React 是咋工作的 - 01 大纲

本文是作者再次尝试学习 React 的经历。参照 https://jser.dev/2023-07-11-overall-of-react-internals/

React Internals Overview

1. Trigger
   触发阶段，mount, re-render 的时候进入。告知 react 哪一些地方需要渲染 (scheduleUpdateOnFiber())。此阶段会创建任务。最后调用 ensureRootIsScheduled()，将任务发给 scheduleCallback() 去调度。

2. Schedule
   优先级队列，按优先级处理任务。 运行时调用 scheduleCallback()，调度渲染或者副作用 (effect)。调度器中 workLoop() 控制任务如何执行。

3. Render
   performConcurrentWorkOnRoot()，计算新的 Fiber 树，计算需要实施在 host DOM 上的更新。本来叫 Virtual DOM，现在不仅仅是 DOM 了，所以叫 Fiber Tree。

遍历 Fiber Tree, 检查是否需要重新渲染，弄清楚 host DOM 上需要的更新。

在并发模式下，"Render" 阶段可以被中断或者恢复。致使此阶段颇为复杂。

4. Commit
   当新的 Fiber Tree 被构建，并且最小的更新产生后。就会提交(commit) host DOM 上的更新。不仅执行实际上操作 DOM (commitMutationEffects())。更会执行所有的 Effect (flushPassiveEffects() 和 commitLayoutEffects())

5. 总结
   循序渐进，慢慢来。