4 组件渲染和更新过程

• JSX如何渲染为页面
• setState之后如何更新页面
• 面试考察全流程

组件的本质

• 组件指的是页面的一部分，本质就是一个类，最本质就是一个构造函数
• 类编译成构造函数

1.组件渲染过程

• 分析
  • props、state 变化
  • render()生成vnode
  • patch(elem, vnode) 渲染到页面上（react并一定用patch）
• 渲染过程
  • setState(newState) => newState存入pending队列，判断是否处于batchUpdate状态，保存组件于dirtyComponents中（可能有子组件）
  • 遍历所有的dirtyComponents调用updateComponent生成newVnode
  • patch(vnode,newVnode) 2.组件更新过程
• patch更新被分为两个阶段
  • reconciliation阶段 ：执行diff算法，纯JS计算
  • commit阶段 ：将diff结果渲染到DOM中
• 如果不拆分，可能有性能问题
  • JS是单线程的，且和DOM渲染共用一个线程
  • 当组件足够复杂，组件更新时计算和渲染都压力大
  • 同时再有DOM操作需求（动画、鼠标拖拽等）将卡顿
• 解决方案Fiber
  • reconciliation阶段拆分为多个子任务
  • DOM需要渲染时更新，空闲时恢复在执行计算
  • 通过window.requestIdleCallback来判断浏览器是否空闲