react fiber理解

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，不中断，一次执行