react filber

[MJingv]

简介

• react fiber 是 react16中新的协调引擎or重新实现的堆栈
• 主要目标是支持虚拟dom的增量渲染

状态更新的区别

之前：

• react遍历整个组件树，为每个组件生成新的虚拟dom，对比旧的dom，最后更新真实的dom。
• 以上的过程是同步的，一旦开始无法终止，可能会阻塞，影响用户体验。

fiber后

• fiber引入增量渲染，把渲染拆分，每次只做一小部分，让浏览器做高优任务（用户交互等），再接着小部分渲染。
• 这样不阻塞，提升用户体验。

fiber主要解决了什么问题：

1. 增量渲染。拆分渲染任务，可插入高优任务，避免阻塞浏览器。
2. 任务调度。根据任务优先级决定任务顺序。
3. 并发模式。并发模式下，react可以再内存中预渲染（预构建）组件，在合适时机一次性更新dom，避免屏幕闪烁。
4. 错误边界。捕获子组件树的错误，防止整个应用崩溃。

fiber缺点问题

• 兼容性，生命周期不同。componentWillMount/componentWillReceiveProps/componentWillUpdate已废弃。异步渲染会重复调用
• 学习成本。
• 性能问题。大量小更新的场景，性能会下降。
• 内存消耗。每个组件都创建了fiber node，会增加内存消耗。

[MJingv]

https://juejin.cn/post/7258881840823844920