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