React Fiber执行原理中，长尾词如何影响组件渲染性能？

本文共计2580个文字，预计阅读时间需要11分钟。

目录+为什么使用Fiber，要解决什么问题？+Fiber是什么？+数据结构+执行单元+浏览器工作原理：+Fiber执行原理+workInProgress tree+currentFiber tree+Effects list+render阶段+遍历节点过程+收集

目录

• 为什么要使用fiber，要解决什么问题?
• fiber是什么？
• 数据结构
• 执行单元
• 浏览器工作：
• Fiber执行原理
• workInProgress tree：
• currentFiber tree：
• Effects list：
• render阶段：
• 遍历节点过程：
• 收集effect list：
• commit阶段：
• 为什么commit必须是同步的操作的？

为什么要使用fiber，要解决什么问题?

在 react16 引入 Fiber 架构之前，react 会采用递归方法对比两颗虚拟DOM树，找出需要改动的节点，然后同步更新它们，这个过程 react 称为reconcilation（协调）。