跳到主要内容

React 组件渲染和更新过程

组件渲染和更新过程

组件渲染​

  • props state 发生变更
  • render() 生成 vnode
  • patch 更新 dom 元素

组件更新​

  • setState(newState) -> dirtyComponents （可能有子组件）

执行 setState 后，子组件也可能会更新

  • 重新执行 render()，生成新的 vnode
  • patch 更新 dom 元素

patch​

React 中的 patch 分为两个阶段:

  • reconciliation (调和)阶段: 执行 diff 算法
  • commit 阶段: 将 diff 结果渲染到 DOM

patch 为何需要拆分为两个阶段​

  • reconciliation 阶段是纯 JS 操作
  • commit 阶段是渲染绘制阶段

如果不拆分的话，可能会产生性能问题。

  • JS 是单线程的。渲染和JS线程是共用一个线程的
  • 当组件足够大时，组件的更新和渲染都比较耗时
  • 如果遇到用户进行DOM 交互(input)，将会出现卡顿

解决方案​

React 提出了 react fiber

  • 将 reconciliation 阶段进行任务拆分，commit 阶段无法拆分
  • DOM 需要渲染的时候，暂停 reconciliation 执行，空闲时，恢复执行
  • 通过 window.requestIdleCallback 获取空闲时间

参考链接