说一下你理解的 React Fiber
💡
原文中文，约8000字，阅读约需19分钟。
📝
内容提要
React Fiber是React16之后的架构改进，将虚拟DOM和Diff的过程改为异步可中止的更新。React Fiber的核心是可中止、可恢复和优先级。它通过Fiber节点保存组件相关信息，并使用双缓存Fiber树实现DOM更新。React的Diff算法通过比较key和type来判断DOM节点是否可复用。
🎯
关键要点
- React Fiber 是 React16 之后的架构改进，支持异步可中止的更新。
- React Fiber 的核心特性包括可中止、可恢复和优先级。
- Fiber 节点保存组件相关信息，并使用双缓存 Fiber 树实现 DOM 更新。
- React16 的架构分为调度器、协调器和渲染器三层。
- 引入了时刻分片和异步使命，允许高优先级任务中止低优先级任务。
- 使用 requestIdleCallback API 在浏览器闲暇时执行任务。
- 双缓存 Fiber 树包括 current Fiber 树和 workInProgress Fiber 树。
- React 的 Diff 算法通过比较 key 和 type 判断 DOM 节点是否可复用。
- Diff 算法预设三个约束：只对同级元素进行 diff、不同类型元素会生成不同树、使用 key 来保持稳定性。
- 面试题：key 的值不能是 index 或 random，React diff 算法不支持双指针遍历。
🏷️
标签
➡️
