旅游网站开发的重要性,搜索引擎快速排名推广,四川省建设厅安全员报名网站,甘肃新站优化目录
Fiber Reconciler 【react v16.13.1】
React Fiber需要解决的问题
React Fiber的数据结构
时间分片
Fiber Reconciler 的调度
双缓冲 池概念
小节
练习 Fiber Reconciler 【react v16.13.1】
Fiber 协调 优化了栈协调的事务性弊端引起的卡顿
React Fiber需要解决…目录
Fiber Reconciler 【react v16.13.1】
React Fiber需要解决的问题
React Fiber的数据结构
时间分片
Fiber Reconciler 的调度
双缓冲 池概念
小节
练习 Fiber Reconciler 【react v16.13.1】
Fiber 协调 优化了栈协调的事务性弊端引起的卡顿
React Fiber需要解决的问题
可阻断的渲染过程适时重启渲染父子组件中来回切换布局更新更清晰的错误处理
React Fiber的数据结构
React Fiber将之前的DOM节点树用链表的结构来描述与React15.x之前的版本不一样。React 15.x中描述DOM节点数的‘VDom’是一个对象嵌套。而在React 16.x中是用Fiber节点来描述的。Fiber节点的数据结构就是一个链表。
// 来源 react-reconciler包
function FiberNode() {// Fiber 单链表this.return null;// 返回替换旧值更新反馈给根节点【自己执行完返回给父节点】this.child null;// 子节点this.sibling null;// 兄弟节点this.index 0;// 顺序// ...
} Fiber Node结构示意图 render阶段
执行组件的render方法函数组件对应returndom diff 确定哪些需要更新。Reconciler【协调阶段】此过程是可以被打断的。
commit阶段
更新阶段在确定更新内容后提交更新并调用对应渲染模块react-dom进行渲染。【这个过程用户是看的见的】为了防止页面抖动该过程是同步且不能被打断。【如果是异步会存在延迟】
时间分片
React 在挂载或者更新过程中会做很多事情比如调用组件的渲染函数、对比前后树差异而且commit阶段是同步的所以在Stack Reconciler中会导致卡顿等问题。
// 用权重进行区分
export const ImmediatePriority: ReactPriorityLevel 99;// 立即执行权重
// 用户阻断权重【如拖动、事件点击明显会阻断UI】
export const UserBlockingPriority: ReactPriorityLevel 98;
export const NormalPriority: ReactPriorityLevel 97;// 普通任务权重
export const LowPriority: ReactPriorityLevel 96;// 比普通任务低级一点
export const IdlePriority: ReactPriorityLevel 95;// 空闲时执行的
// NoPriority is the absence of priority. Also React-only.
export const NoPriority: ReactPriorityLevel 90;// 保留项平时不会用到
requestAnimationFrame
requestAnimationFrame在做动画时经常用到保障用户体验。Priority优先级较高的任务用requestAnimationFrame执行。
requestIdleCallback【MDN web docs中可查看】
浏览器提供的闲时调用。requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作而不会影响延迟关键事件如动画和输入响应。
Fiber Reconciler 的调度
Reconciler Fiber Node 在具体挂载更新的过程中关键代码如下
function performUnitOfWork(unitOfWork: Fiber): Fiber | null {// ... 代码const current unitOfWork.alternate;let next;if (enableProfilerTimer (unitOfWork.mode ProfileMode) ! NoMode) {startProfilerTimer(unitOfWork);next beginWork(current, unitOfWork, renderExpirationTime);stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true); } else {next beginWork(current, unitOfWork, renderExpirationTime); }// ... 代码if (next null) {next completeUnitOfWork(unitOfWork); }ReactCurrentOwner.current null;return next;
}
function completeUnitOfWork(unitOfWork: Fiber): Fiber | null {// ...completeWork();
}
a1-b1-b2-c1-d1-d2-d1-c1-b2-b3-c2-b3-b2-b1-a1 双缓冲 池概念
Fiber Reconciler过程中内存中保持着两棵树
current Tree【如cpu呈现给用户的存储】 workInProcess Tree。【相当于高速缓冲存储执行更新render();更新完毕的节点映射给current Tree中对应节点】
当workInProcess Tree中执行完毕就转为current Tree。如果执行过程中被打断或者响应更高优先级的任务也能在 workInProcess Tree中继续开始。 小节
React 15.xReact协调机制
React 16.x React Fiber结构 React新协调机制
练习
阅读源码 React v16.13.1 版本 重点读 react-reconciler ReactFiber.js(react-reconciler/src/ReactFiber.js)。
产出
Fiber Node 属性的注解表
