关于前端:react-fiber

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.nowchannel.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）一次性执行，这个阶段必须同步执行，不能被打断

遍历规定：深度遍历