Fiber架构是什么
同学们好，这一小节我们来探索什么是Fiber架构。首先我们要对Fiber架构下一个定义：
Fiber架构是React为了解决性能问题和提升调度能力而引入的一种新的内部实现机制.它主要通过重新组织渲染过程，使React可以更有效地执行渲染任务。
那Fiber架构是如何进行工作的呢，其工作流程是什么样子的呢？要回答这个问题并不容易，请看这样的一张流程图：
js
+------------------------------------------------------------------------------+
| Reconciliation Phase |
+------------------------------------------------------------------------------+
|
v
+------------------------------------------------------------------------------+
| Initialize/Update Fiber Tree |
| - Create Root Fiber |
| - Clone Fibers for Updates |
| - Link Old and New Fibers |
| - Handle Offscreen and Hidden Components |
| - Process Legacy Context API |
| - Assign Return Pointer and Child Pointer |
| - Calculate Update Priority based on Lane Strategy |
| - Handle Strict Mode Warnings and DevTool Integrations |
+------------------------------------------------------------------------------+
|
v
+------------------------------------------------------------------------------+
| Begin Work |
| - Render Component |
| - Determine Changes |
| - Schedule Updates |
| - Handle Context Providers |
| - Handle Error Boundaries |
| - Handle Suspense and Lazy Loading |
| - Process useMemo and useCallback |
| - Detect Concurrent Mode and Update Priority |
| - Handle Event Handlers in Concurrent Mode |
| - Process useContext Hook |
| - Process useReducer Hook |
| - Handle useImperativeHandle Callbacks |
+------------------------------------------------------------------------------+
|
v
+------------------------------------------------------------------------------+
| Complete Work |
| - Create Work In Progress Tree |
| - Process Side-Effects |
| - Merge New Fibers with Old Fibers |
| - Check for Interrupted Work |
| - Update Memoized State and Props |
| - Compute Expiration Time for Updates |
| - Handle Profiler Component and Timing Metrics |
| - Process useTransition Hook |
| - Process useDeferredValue Hook |
+------------------------------------------------------------------------------+
|
v
+------------------------------------------------------------------------------+
| Task Splitting |
| - Prioritize Tasks |
| - Defer Low Priority Tasks |
| - Yield to High Priority Tasks |
| - Utilize Browser Idle Time |
| - Check for Uncommitted Updates |
| - Use Lane Strategy for Scheduling and Prioritization |
| - Handle Time Slicing in Concurrent Mode |
+------------------------------------------------------------------------------+
|
v
+------------------------------------------------------------------------------+
| Commit Phase |
+------------------------------------------------------------------------------+
|
v
+------------------------------------------------------------------------------+
| Before Mutation Phase |
| - Snapshot Lifecycle |
| - getSnapshotBeforeUpdate |
| - Call getDerivedStateFromProps |
| - Call static getDerivedStateFromError in Error Boundaries |
| - Process Strict Mode Double Render |
+------------------------------------------------------------------------------+
|
v
+------------------------------------------------------------------------------+
| Mutation Phase |
| - Execute Side-Effects |
| - Insert/Update/Delete DOM Elements |
| - Process Ref Updates |
| - Handle Forward Refs |
| - Handle Passive Effects |
| - Commit Hydration for Server-Rendered Components |
| - Invoke componentDidCatch in Error Boundaries |
| - Process useMutableSource Hook Updates |
+------------------------------------------------------------------------------+
|
v
+------------------------------------------------------------------------------+
| Layout Phase |
| - componentDidUpdate |
| - componentDidMount |
| - FLIP Animation Techniques |
| - Apply Accessibility Changes |
| - Apply Directionality Changes |
| - Handle ResizeObserver Callbacks |
| - Apply CSS Variables and Custom Properties |
| - Handle IntersectionObserver Callbacks |
| - Process useLayoutEffect Callbacks |
+------------------------------------------------------------------------------+
|
v
+------------------------------------------------------------------------------+
| Passive Phase |
| - useEffect callbacks |
| - Clean up Previous Effects |
| - Interact with External Libraries and APIs |
| - Schedule Passive Effect Cleanup |
| - Handle Batched Updates |
| - Manage Custom React Renderers |
| - Perform Profiler Data Collection |
| - Integrate with React DevTools |
+------------------------------------------------------------------------------+我们现在不要企图现在就去直接理解这个流程图，在这里只需要知道，Fiber架构在工作的时候是分成了很多阶段来完成的。实际上我们在手写React18的源码的时候也不会把流程图中设计到的所有内容都实现，而是实现其最核心的部分，我们学习一定要学会抓住主要矛盾，不要陷于无休无止的细节中去，因为细节本身也是不断动态变化的。
尽管现在我不会对这张流程图进行详细的解释，但在本章接下来的小节，我会对一些Fiber架构中的关键的概念进行介绍。比如：
- 什么是Fiber？
- 什么是双缓冲策略？
- 什么是工作循环？
- 什么是并发模式？