React 是如何工作的？

Source: Dev.to

Component 是基础

React 应用由组件组成。组件只是返回 UI 的 JavaScript 函数。

function App() {
  return 
}

Hello

JSX（JavaScript XML）

JSX 看起来像 HTML，但它不是 HTML。React 会把 JSX 转换成 JavaScript 对象。

Hello

React.createElement("h1", null, "Hello");

虚拟 DOM

React 创建一个虚拟 DOM，它是实际 DOM 的轻量级 JavaScript 对象副本。可以把它想象成蓝图，而不是实际的建筑。

渲染流程

首次渲染

JSX → Virtual DOM → Real DOM

状态变化

JSX → New Virtual DOM
        ↓
Compare with Old Virtual DOM
        ↓
Find differences
        ↓
Update ONLY required parts in Real DOM

一开始，React 将 JSX 转换为虚拟 DOM，并使用它来创建真实 DOM，从而在屏幕上呈现 UI。当状态发生变化时，React 并不会立即操作真实 DOM，而是重新运行组件，根据更新后的状态生成新的虚拟 DOM。随后，React 使用其 diff（调和）算法将新旧虚拟 DOM 进行比较，找出具体的变化。找到差异后，React 只更新真实 DOM 中受影响的部分，而不是整页刷新。