首页 > 网络编程 > JavaScript > javascript技巧 > HTML/JS/React关系及用途

一文详细讲解HTML/JS/React三者之间的关系及用途

2025-10-27 11:21:42 作者：小宝哥Code

React是JavaScript的一个‌上层框架‌,通过组件化、声明式编程和虚拟DOM等机制,让开发者更高效地构建复杂的用户界面,这篇文章主要介绍了HTML/JS/React三者之间的关系及用途的相关资料,需要的朋友可以参考下

你可以用一个生动的比喻来理解它们：

HTML = 骨骼与结构：定义了一个人的骨架——哪里是头（<header>），哪里是手臂（<nav>），哪里是躯干（<main>）。它有形状，但不会动。
CSS = 皮肤与外貌：定义了人的外观——肤色、发型、衣服款式（颜色、字体、布局）。它让人变得好看。
JavaScript = 肌肉与神经：让人可以运动、思考、与外界交互。比如走路、握手、说话（动画、逻辑、用户交互）。
React = 高效的人体改造蓝图：它是一套更科学、更高效的“构建和指挥人体”的系统和方法论。它让你能像搭乐高一样，用可复用的“组件”来快速、高效地组装和管理一个复杂的人体。

一、三者各自的核心职责

1. HTML - 结构层

是什么：超文本标记语言。它不是编程语言，而是一种标记语言。
干什么：负责定义网页的内容和结构。它是所有网页的基础。
怎么干：使用一系列标签（如 <h1>、<p>、<div>、<img>）来搭建页面的骨架。

例子：

html

<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一个段落文本。</p>
  <button>点击我</button> <!-- 这个按钮现在只是个摆设 -->
</body>

用途：没有HTML，就没有网页。它是信息的载体。

2. JavaScript - 行为层

是什么：一种强大的脚本编程语言。
干什么：负责网页的行为、逻辑和交互。它让网页从静态文档变成动态应用。
怎么干：通过操作HTML（DOM）和CSS，来实现动态更新内容、控制多媒体、生成动画、处理用户输入、与服务器通信等。

例子（接上面的HTML）：

javascript

// 获取按钮元素
const button = document.querySelector('button');
// 给按钮添加一个点击事件的监听器
button.addEventListener('click', function() {
  // 当按钮被点击时，改变段落的内容
  document.querySelector('p').textContent = '你点击了按钮！';
});

用途：任何动态效果、数据验证、异步加载数据（如无限滚动）、弹出框等都离不开JS。它直接操作DOM（HTML的树形结构）。

3. React - 高效构建用户界面的JavaScript库

是什么：它是一个用于构建用户界面的JavaScript库（不是框架，不是语言）。由Facebook开发并维护。
干什么：它的核心工作是更高效、更声明式地构建复杂的、数据驱动的交互界面。它尤其擅长管理那些状态（数据）会随时间频繁变化的界面。
怎么干：它引入了组件化和虚拟DOM的概念。
- 组件化：将页面拆分成独立、可复用的小部件（组件）。每个组件管理自己的结构和逻辑，然后像搭积木一样组合成完整页面。
- 虚拟DOM：React在内存中维护一个轻量级的JS对象（虚拟DOM），用来描述界面应该长什么样。当数据变化时，React会生成一个新的虚拟DOM，并与旧的进行对比（Diffing），找出最小变化集，然后高效地批量更新真实DOM。这避免了直接操作真实DOM的性能损耗。

例子（用React实现同样功能）：

jsx

// 这是一个React组件
function WelcomeComponent() {
  // React Hook：管理组件的状态（数据）
  const [text, setText] = useState('这是一个段落文本。');

  // 处理点击事件的函数
  const handleClick = () => {
    setText('你点击了按钮！'); // 更新状态
  };

  // UI长什么样？状态（text）决定视图。
  return (
    <div>
      <h1>欢迎来到我的网站</h1>
      <p>{text}</p> {/* 大括号{}用于嵌入JavaScript变量 */}
      <button onClick={handleClick}>点击我</button>
    </div>
  );
}

用途：构建单页面应用、复杂的后台管理系统、数据看板、移动应用（React Native）等。几乎所有现代大型Web应用都在使用React或类似的库（Vue, Angular）。

二、三者之间的关系

结论：React是构建在JavaScript之上的，用于更高效地输出和管理HTML的库。

JS 是基础，React 是拓展：你必须先学会JavaScript，才能学好React。React的语法和核心概念（组件、Props、State、Hooks）都是JavaScript（ES6+）的实现。不懂JS直接学React，如同不会走路就想跑步。
React 替代了原始的JS DOM操作：在传统开发中，你用document.querySelector等原生JS方法直接操作DOM。在React中，你不再需要直接操作DOM，而是通过管理“状态”，由React自动、高效地根据最新状态去更新DOM。你只需要声明“界面在某种状态下应该长什么样”。
它们最终一起工作：浏览器最终能运行的，依然是标准的HTML、CSS和JavaScript。React代码通过打包工具（如Webpack, Vite）进行编译和打包，最终转换成一捆浏览器能直接理解的、优化后的纯JS代码。这捆JS代码会在浏览器中运行，并动态地生成和操作HTML。

总结与用途对比

| 技术 | 角色 | 用途 | 一句话概括 |
| ：--- | :--- | :--- | :--- |
| HTML | 结构 | 搭建网页骨架，定义内容结构 | “是什么” - 定义页面上有什么内容 |
| JavaScript | 行为 | 添加交互逻辑，动态操作页面 | “做什么” - 定义页面如何对事件做出反应 |
| React | 高效构建 | 用组件化和声明式的方式，大规模地、高性能地构建复杂用户界面 | “怎么更好地做” - 一套更科学的UI构建和管理方案 |

给你的学习建议：

绝对基础：首先扎实掌握 HTML 和 CSS，能做出静态页面。
核心关键：花大量时间深入学习现代JavaScript（ES6+特性，如箭头函数、解构、模块化、异步编程）。
进阶工具：在你熟练掌握JS之后，再开始学习 React。你会发现自己是在用已经学会的JS知识去理解React，事半功倍。

简历中提到了“熟悉React等原型设计”，这表明你已经有了初步的概念。接下来需要深入理解其核心思想（组件、状态管理、数据流）而不仅仅是语法，并尝试用React去重构或实现一个更复杂的项目，这将极大提升你的竞争力。

附：react代码与javascript区别

React 代码的书写格式和以前的 JS 有很大的不同，下面通过对这段代码进行分析了解一下他。

以前使用 JavaScript 定义一个变量使用 var，ES6 加入了 const 关键字，用来定义一个常量：

const div = document.createElement('div');

ReactDOM.render(…) 是渲染方法，所有的 js,html 都可通过它进行渲染绘制，他有两个参数，内容和渲染目标 js 对象。

内容就是要在渲染目标中显示的东西，可以是一个 React 部件，也可以是一段HTML或TEXT文本。渲染目标JS对象，就是一个DIV或TABEL,或TD 等HTML的节点对象。

ReactDOM.render(<App />, div);

unmountComponentAtNode() 这个方法是解除渲染挂载，作用和 render 刚好相反，也就清空一个渲染目标中的 React 部件或 html 内容。

ReactDOM.unmountComponentAtNode(div);

到此这篇关于HTML/JS/React三者之间的关系及用途的文章就介绍到这了,更多相关HTML/JS/React关系及用途内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！