运行机制 | Notion

“UI = f(state)”（UI 是状态的函数）

每次状态变了，就重新执行整个组件函数，生成新的 UI 结构。

🧠 React 的运行机制核心步骤：

组件是个函数

function Counter() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

初次渲染时执行函数
- 执行 Counter()，得到 JSX（也就是 React Element 虚拟 DOM）
- React 把这棵“虚拟 DOM 树”挂到真实 DOM 上
调用 setCount() 后，React 会：
- 标记该组件需要更新
- 重新执行 Counter() 函数，得到新的 JSX
- 用新的虚拟 DOM 和旧的做对比（diff 算法）
- 根据差异去 patch 实际 DOM（增删改）

✅ React 是函数式 UI 编程

特性	React
响应式模型	组件函数重新执行
状态持久方式	Hook 系统记录函数调用顺序
更新策略	Virtual DOM diff + batch 更新
不依赖 signal 或 Proxy	状态由 Hook 管理，依赖组件生命周期

🔧 为什么需要 useState/useEffect？

因为函数组件本身是无状态的，每次执行都是新的。React 就用 Hook 来模拟“持久状态”：

// useState 背后逻辑类似
const stateStore = []; // 存所有状态
let cursor = 0;

function useState(initial) {
  const i = cursor;
  stateStore[i] ??= initial;
  function setState(val) {
    stateStore[i] = val;
    rerender(); // 整个组件重新跑
  }
  cursor++;
  return [stateStore[i], setState];
}

所以你每次 render 都重新跑函数，但 state 其实是 React 框架“偷偷保管”的。

React 的核心逻辑是：每次状态变了就 rerun 组件函数，再用 Virtual DOM diff 出新 UI。它不做依赖追踪，而是靠完整组件重跑来保证一致性。