【React入门】并发模型

在开始增加其它的代码，我们需要重构。

我们看之前的render函数。我们会发现，在递归调用的时候会有问题。当开始render的时候我们就只能等到element tree全部render完成。如果element tree太大的话。它就会中断主线程很久。如果浏览器需要做一些高权限的事情，比如处理用户输入，动画处理这些就必须的等到render结束。

所以我们要将这个任务分成小的单元。我们在完成每个单元之后，如果要有别的事情需要做。浏览器就将会中断渲染。
我们来看看代码

let nextUnitOfWork = null;

function workLoop(deadline) {
    let shouldYield = false;
    while (nextUnitOfWork && !shouldYield) {
        nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
        shouldYield = deadline.timeRemaining() < 1
    }
    requestIdleCallback(workLoop)
}

requestIdleCallback(workLoop)

function performUnitOfWork(nextUnitOfWork) {
    
}

我们用requestIdleCallback来做循环。它就是在浏览器主线程空闲的时候才调用这个方法。
React已经不再用requestIdleCallback了。现在用scheduler package但是不影响这个例子。

requestIdleCallback的回调会传入deadline参数。我们可以用这个来检测还剩多长时间。浏览器将会夺回控制权。
截止2019年11月，并发模型在React还不稳定，稳定的版本的循环像这样:

while (nextUnitOfWork) {    
  nextUnitOfWork = performUnitOfWork(   
    nextUnitOfWork  
  ) 
}

在开始循环，我们需要设置一个工作单元。我们需要编写一个performUnitOfWork函数。它不仅运行当前work。还会将下次要运行的work返回。