第 2 天：React 如何更新 UI
昨天我学习了 React 是做什么的。今天我学习了它是如何实现的。
我以前一直在想，React 是如何准确知道 UI 中需要更改哪些内容的。如果你修改了一个段落中的一个单词，React 会重建整个页面吗？不会。它使用一种智能流程来保持高效。
以下是 React 更新周期的详细分解。
Reconciliation 与 Diffing
Reconciliation 是策略，而 Diffing 是具体的实现方法。React 会将新的 Virtual DOM 树与旧的树进行比较。
对计算机来说，比较两棵树是很困难的。标准的算法速度太慢。React 通过做出两个假设来保持高效：
- 如果元素类型发生了变化，React 会销毁旧树并构建一棵新树。
- 如果类型保持不变，React 则只更新发生变化的属性。
这使得 React 能够以 O(n) 的时间复杂度运行，让更新感觉是即时的。
两个阶段
React 将其工作分为两个截然不同的步骤：
Render Phase 这是规划阶段。React 调用你的组件并计算变化。在此阶段它不会触碰 Real DOM。可以把它想象成建筑师在绘制蓝图。
Commit Phase 这是施工阶段。React 将计算出的变化应用到 Real DOM 上。这部分是同步的。一旦开始，就会一直进行直到工作完成。
重要提示：React 更新 DOM，但浏览器负责绘制像素。React 处理结构，而浏览器处理视觉渲染。
React Fiber
在 React 16 之前，渲染是同步的。如果一次渲染耗时过长，浏览器就会冻结，你无法滚动或输入。
Fiber 改变了这一点。Fiber 是管理 Render Phase 的引擎。它允许 React：
- 暂停工作并在稍后恢复。
- 优先处理用户输入等紧急更新，而不是后台数据。
- 将工作拆分为小的任务块。
Virtual DOM 是数据结构，而 Fiber 是作用于该数据的算法。
流程总结：
• State 发生变化。 • Render Phase：React 通过 Diffing 规划变化。 • Commit Phase：React 更新 Real DOM。 • 浏览器：布局（Layout）、绘制（Paint）和合成（Composite）。 • 像素出现在屏幕上。