React15前的渲染方式
React15
以前,React
是用全量渲染的方式进行页面渲染,每次更新都需要整个页面重新渲染。全量当数据量大的时候,页面就会掉帧卡顿。
为什么需要React Fiber
为了解决上述React15
带来的卡顿问题,我们不能让一个程序长期霸占着资源,可以将浏览器的渲染、布局、绘制、资源加载(例如HTML解析)、事件响应、脚本执行视作操作系统的’进程’,我们需要通过某些调度策略合理地分配CPU资源,从而提高浏览器的用户响应速率, 同时兼顾任务执行效率。
React16
后使用Fiber作为新的协调引擎(diff
算法工作),主要目的是用于增量渲染,让协调(Reconcilation
)过程能进行中断,适时让出CPU执行权,让位给高优先级的任务,浏览器空闲后再恢复渲染。
什么是Fiber
React Fiber
本质是一个链表,其结构大致如下:
type Fiber = {...// 指向父节点return : Fiber | null,// 指向下一个节点child: Fiber | null,// 指向同级隔壁节点sibling: Fiber | null
}
根据这个数据结构,我们可以以迭代的方式使用深度优先遍历来处理这些节点:
/**
* @params fiber 当前需要处理的节点
* @params topWork 本次更新的根节点
*/
function performUnitOfWork(fiber: Fiber, topWork: Fiber) {// 对该节点进行处理beginWork(fiber);// 如果存在子节点,那么下一个待处理的就是子节点if (fiber.child) {return fiber.child;}// 没有子节点了,上溯查找兄弟节点let temp = fiber;while (temp) {completeWork(temp);// 到顶层节点了, 退出if (temp === topWork) {break}// 找到,下一个要处理的就是兄弟节点if (temp.sibling) {return temp.sibling;}// 没有, 继续上溯temp = temp.return;}
}
React Fiber
通过使用requestIdleCallback
类似的实现方式来控制的组件渲染的进度条
。requestIdleCallback
属于宏任务,每隔16ms(一帧)
会调用一次,它的回调可获取本次可执行的时间。使用方法:
const workLoop = (deadline) => {let shouldYield = falsewhile(!shouldYield) {console.log('working')shouldYield = deadline.timeRemaining() < 1}requestIdleCallback(workLoop)
}
requestIdleCallback(workLoop)
由于兼容性问题以及更新不及预期等问题 ,React
实际使用的是requestIdleCallback
的polyfill方法,(Safari
不支持,其余浏览器需要较新版本)
最后
整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。
有需要的小伙伴,可以点击下方卡片领取,无偿分享