react 16.8以后采用时间切片的方式解决页面卡顿，JS执行可中断
16.8以前采用的是递归的方式 JS 执行不可中断
渲染方式不同
16.8以前 ReactDOM.render(<App/>, rootElement);
16.8以后 ReactDOM.createRoot(rootElement).render(<App/>)
CPU 卡顿：
1. JS执行导致的页面卡顿 60HZ 1s/60 =16.6ms (浏览器渲染频率是60HZ，即要求1帧的时间为1s/60 = 16.67ms,浏览器显示页面的时候，要处理js逻辑，还要做渲染，每个执行片段不能超过16.67ms), 通过时间切片的方式将 Js 切割成一个一个片段，解决JS长尾执行引起的卡顿。解决非阻塞渲染
2. JS线程 GUI线程 render
IO卡顿
Suspense 兜底 ，callBack 异步可中断的更新
快速响应 同步 --- 异步 long task --- 可中断
React 架构对比 15->16
React15
Reconciler 协调器 找到更新的组件
this.setState foreUpdate
1. render jsx -> VDOM
2. VDOM 跟上次更新前的vDOM 对比 diff
3. 找到待更新的节点
4. 将更新的内容传给renderer
Renderer 渲染器，将更新的组件渲染到页面
宿主 H5 reactDOM native reactNative
renderer 是区分环境
React16
requestIdleCallback 空闲时使用 -- fiber
1. Scheduler 调度器 任务排序 排优先级 Reconciler 环境无关
2. Reconciler 协调器 找到更新的组件 递归-->异步可中断
3. Renderer渲染 同步 DOM
1 - 2
3- 4
5-6
拿到前一段时间更新的所有内容 在同步渲染到DOM 上
#Fiber
状态更新的机制，可恢复到上次中断的上下文
双缓存 内存中绘制出此次更新的fiber DOM
JSX :调用jsx，解析jsx 书写的dom 结构
React 执行
render
fiber 树 ---> render 树
深度遍历优先 beginworl completework
