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

遍历规定：深度遍历