- 请简述 React 16 版本中初始渲染的流程
分为 render 阶段和 commit 阶段:
- render 阶段负责为每一个 React 元素构建对应的 Fiber 对象并为 Fiber 节点添加 effectTag 属性用于标记当前节点要进行的DOM操作。
- commit 阶段负责根据 Fiber 节点标记 ( effectTag ) 进行相应的 DOM 操作。
- 为什么 React 16 版本中 render 阶段放弃了使用递归
- 递归无法中断,执行重任务耗时长。
- JavaScript 又是单线程,无法同时执行其他任务,导致任务延迟页面卡顿,用户体验差。
- 请简述 React 16 版本中 commit 阶段的三个子阶段分别做了什么事情
commit 阶段可以分为三个子阶段:
before mutation 阶段(执行 DOM 操作前)
调用类组件生命周期函数 getSnapshotBeforeUpdate,并且把旧的 props 和旧的 states 传递进去。mutation 阶段(执行 DOM 操作)
获取对象的 effects,根据不同的 effectTag 执行不同的操作,将workInProgress Fiber树变成 current Fiber 树。layout 阶段(执行 DOM 操作后)
调用生命周期函数和钩子函数,重置 nextEffect。
- 请简述 workInProgress Fiber 树存在的意义是什么
React 使用双缓存技术完成 Fiber 树的构建与替换,实现 DOM 对象的快速更新。在双缓存技术中,当前屏幕中显示的内容对应的 Fiber 树叫做 current Fiber 树;当发生更新时,React 会在内存中重新构建一颗新的、即将要显示在页面中的 Fiber 树,即 workInProgress Fiber 树。由于 workInProgress Fiber 树是在内存中构建的所以构建速度非常快,因此,React 使用它直接替换 current Fiber 树就能达到快速更新DOM的目的。