react fiber理解

2024-05-31 13:49:27 浏览数 (2)

1、没有fiber之前有什么问题?

  • 当状态发生变化,react开始调度,新旧的虚拟DOM进行递归diff,过程不可中断,当页面结构复杂,树结构深度较深时,diff消耗较大,浏览器在每一帧的idle阶段不能完成调度就会出现卡顿

2、react原理与实现

jsx会被babel编译为React.createElement(type,props,...children),createElement会将传入参数转换成js对象,即vdom。

  • React.createElement的实现
  • render原理与实现
    • render【diff】阶段干两件事:创建fiber树 && 收集effect list
    • 树层级较深,借助浏览器的requestIdleCallback实现可中断diff,不阻塞主流程渲染;
    • commit阶段渲染真实dom,不中断,一次执行

0 人点赞