共计 1098 个字符,预计需要花费 3 分钟才能阅读完成。
react15 之前面临的问题
1. 如果界面节点多,档次深,递归渲染比拟耗时
2.js 是单线程,而且 UI 线程和 Js 线程互斥
什么是 Fiber
1.Fiber 其实是指的是一种数据结构,它能够用一个纯 JS 对象来示意
const fiber= {
stateNode,// 节点实例
child,
sibling,
return
}
2.Fiber 是一个执行单元,每次执行完一个执行单元,React 就会查看当初还剩多少工夫,如果没有工夫就将控制权让进来
Fiber 要害个性
1. 增量渲染
2. 暂停,终止,复用渲染工作
3. 不同更新的优先级
4. 并发方面新的根底能力
用 requestAnimationFrame+MessageChannel 实现 requestldleCallback
let activeTimeFrame = 1000/60;// 每帧的工夫
let deadFrameTime;
let pendingCallback;
let channel = new MessageChanne();
let timeRemaining = ()=>deadFrameTime - performance.now
channel.port2.onMessage = function(){console.log("接管到 port1 返回的音讯")
let currentTime = performance.now()
let didTimeOut = deadFrameTime<=currentTime
if(didTimeOut||timeRemaining>0){if(pendingCallback){pendingCallback(didTimeOut,timeRemaining)
}
}
}
window.requestldleCallback = function(callback,option){window.requestAnimationFrame((rafTime)=>{console.log(rafTime);// 前面计算是否超时应用的
deadFrameTime = rafTime + activeTimeFrame;
pendingCallback = callback;
channel.port1.postMessage("hello");
})
}
Fiber 执行阶段
每次渲染有两个阶段:Reconciliation(协调 render 阶段)和 commit(提交阶段)
一、协调阶段:能够认为是 diff 阶段,这个阶段会找出所有节点变更,这些变更称为 React 的副作用
二、提交阶段:将上一阶段计算出来的须要解决的副作用(effects)一次性执行,这个阶段必须同步执行,不能被打断
遍历规定:深度遍历
正文完