跳到主要内容

React 组件渲染和更新的过程

问题

  • JSX 如何渲染为页面
  • setState 之后如何更新页面
  • 全流程是怎么样

回顾知识点

Vue 组件渲染和更新过程

vue

JSX 本质和 vdom

  • JSX 即 createElement 函数
  • 执行会生产 vnode
  • patch(elem,vnode) 和 patch(vnode,newVnode)

回顾 dirtyComponents

react

渲染和更新过程

渲染过程

  • props state
  • render() 生成 vnode
  • patch(elem,vnode),可能不叫 patch 名字,但过程一样

更新过程

  • setState(newState) --> dirtyComponents(可能有子组件)
  • render() 生成 newVnode
  • patch(elem,newVnode),可能不叫 patch 名字,但过程一样

更新的两个阶段

  • 上述的 patch 被拆分为两个阶段:
  • reconciliation 阶段 - 执行 diff 算法,纯 JS 计算
  • commit 阶段 - 将 diff 结果渲染 DOM

React fiber

  • JS 是单线程,且和 DOM 渲染共用一个

  • 当组件足够复杂,组件更新时计算和渲染都压力大

  • 同时再有 DOM 操作需求(动画,鼠标拖拽等),将卡段

  • 解决方案 fiber

    • 将 reconciliation 阶段进行任务拆分(commit 无法拆分)
    • DOM 需要渲染时暂停,空闲时恢复
    • window.requestIdleCallback (存在兼容性)

关于 fiber

  • React 内部运行机制,开发者体会不到
  • 了解背景和基本概念即可