基于Fiber 的调和
Fiber
将整个更新划分为多个原子性的任务,这就保证了原本完整的组件的更新流程可以被中断与恢复。在浏览器的空闲期执行这些任务并且区别高优先级与低优先级的任务
In React 15, if A is replaced by B, we unmount A, and then create and mount B:
A.componentWillUnmount
B.constructor
B.componentWillMount
B.componentDidMount
In Fiber, we create B first, and only later unmount A and mount B:
B.constructor
B.componentWillMount
A.componentWillUnmount
B.componentDidMount
Cooperative Scheduling -> Stack Reconciler -> Work-in-Progress Tree
将当前界面树上的指针指向
- Synchronous
- Task
- Animation
High Priority: 动画与用户交互Low Priority: 网络请求OffScreen: 任何的隐藏对象
在
Links
- https://medium.com/@chang_yan/get-started-with-react-fiber-ea30e597aad0
- https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e
- https://medium.com/react-in-depth/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-67f1014d0eb7
- https://medium.com/edge-coders/react-16-features-and-fiber-explanation-e779544bb1b7