为什么选择 React？

学习 React 如何相比原生 JavaScript 简化动态用户界面的构建。

导入

学习 React 如何相比原生 JavaScript 简化动态用户界面的构建。

No configuration found for ID: 5afca15ace58783ddd65846dcdc1687b232746f51b36a58b7891ae04922776c0

No configuration found for ID: 822960c775e540e442bc26c65cf63a25a95ca38266f018989693fbb06f0b5c78

1<h1>Welcome to React</h1>
2<button onClick={handleClick}>点击我</button>

1return (
2  <div>
3    <h1>Welcome to React</h1>
4    <button onClick={handleClick}>点击我</button>
5  </div>
6);

1const App = () => { ... };

1<button onClick={handleClick}>点击我</button>

方面	原生 JavaScript	React
UI 渲染	`renderUI` 函数使用 `innerHTML` 手动将 HTML 注入 DOM。	`App` 组件通过 JSX 声明式地定义 UI 结构。
UI 更新	每次需要更新 UI 时，整个容器（`<div>`）都会被重新渲染，替换全部内容。	React 的虚拟 DOM 确保只有发生变化的部分（如 `<h1>`）被更新。
事件处理	每次调用 `renderUI` 函数时，都会为按钮重新绑定事件监听器（`addEventListener`），存在重复监听的风险。	`onClick` 处理函数在 JSX 中内联定义，由 React 自动管理。
模块化	渲染逻辑和事件处理耦合在同一函数中，降低了可重用性。	`App` 组件封装了 UI 和行为，提高了可重用性和可维护性。
状态管理	无显式状态管理。UI 更新需手动同步，增加了复杂性。	状态（如 `useState`）驱动 UI 自动更新。状态变化仅触发所需部分的重新渲染。

JavaScript for React——快速回顾

什么是 React？