一、回顾Vue组件渲染和更新的过程
二、回顾JSX本质和vdom
三、组件渲染和更新
1、组件渲染过程
- props state (组件有了props state)
- render()生成vnode
- patch(elem, vnode)
2、组件更新过程
- setState(newState) --> dirtyComponents (可能有子组件)
- render()生成newVnode
- patch(vnode, newVnode)
React的patch可以被拆分为2个阶段
1、reconciliation阶段-------执行diff算法, 纯JS计算
2、commit阶段--------将diff结果渲染DOM
四、fiber优化性能(解决虚拟DOM的效率问题)
可能会有性能问题
js是单线程,且和DOM渲染公用一个线程
当组件足够复杂,组件更新时计算和渲染都压力大,导致主进程长时间被占用
同时再有DOM操作需求(动画、鼠标拖拽等),将卡顿,同步阻塞
fiber:
将reconciliation阶段进行任务分片,vdom 的数据对比,是个适合拆分的阶段,比如对比一部分树后,先暂停执行个动画调用,待完成后再回来继续比对(commit无法拆分,dom渲染无法拆分)
DOM需要渲染时暂停,空闲时恢复
window.requestIdlecallback
window.requestAnimationFrame
(是React内部机制,开发者体会不到)