ReactRoot之前已经说过，再贴一下源码。



从DOMRenderer.updateContainer到达updateContainerAtExpirationTime到达scheduleWork到达scheduleWork到达scheduleWorkImpl到达requestWork，我们一路加点注释

下面是scheduleWorkImpl的代码：

requestWork里面才进行同步异步逻辑分家

scheduleCallbackWithExpiration是干了什么呢？它会判定是否工作与不干作，工作就是重新计算过期时间，然后执行scheduleDeferredCallback方法。scheduleDeferredCallback有两个参数，第一个是回调函数，第二个是对象，里面的timeout决定它在执行scheduleDeferredCallback最迟多少ms才执行。

scheduleDeferredCallback是何方神圣呢？它是大名鼎鼎的requestIdleCallback

requestIdleCallback的语法如下：

performAsyncWork与performSyncWork也是一对兄弟。

//by 司徒正美

  function performAsyncWork(dl) {
    performWork(NoWork,true,dl);
  }

  function performSyncWork() {
    performWork(Sync,false,null);
  }

performWork的源码

function performWork(minExpirationTime,dl) {
    deadline = dl;
    // Keep working on roots until there's no more work,or until the we reach
    // the deadline.
    findHighestPriorityRoot();
    if (enableUserTimingAPI && deadline !== null) {
      var didExpire = nextFlushedExpirationTime < recalculateCurrentTime();
      stopRequestCallbackTimer(didExpire);
    }
    if (isAsync) {
      while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && 
        (minExpirationTime === NoWork ||
         minExpirationTime >= nextFlushedExpirationTime) && (!deadlineDidExpire || recalculateCurrentTime() >= nextFlushedExpirationTime)) {
        performWorkOnRoot(nextFlushedRoot,nextFlushedExpirationTime,!deadlineDidExpire);
        findHighestPriorityRoot();
      }
    } else {
      while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && 
        (minExpirationTime === NoWork || minExpirationTime >= nextFlushedExpirationTime)) {
        performWorkOnRoot(nextFlushedRoot,false);
        findHighestPriorityRoot();
      }
    }
    // We're done flushing work. Either we ran out of time in this callback,// or there's no more work left with sufficient priority.
    // If we're inside a callback,set this to false since we just completed it.
    if (deadline !== null) {
      callbackExpirationTime = NoWork;
      callbackID = -1;
    }
    // If there's work left over,schedule a new callback.
    if (nextFlushedExpirationTime !== NoWork) {
      scheduleCallbackWithExpiration(nextFlushedExpirationTime);
    }
    // Clean-up.
    deadline = null;
    deadlineDidExpire = false;

    finishRendering();
  }

下面是同步与异步的执行情况

但异步模式为什么会调用两次render呢？估计这还在测试阶段，许多BUG。我们追踪到finishClassComponent方法，看到它的render方法：

我们再改一下Root组件的代码，添加一个componentDidMount.

class Root extends React.Component{
        constructor(props){
            super(props)
            this.props = props
            this.state = {
                x: 1
            }
        }
        render(){
            console.log("Root render..",Date.now())
            return <h1><A x={this.state.x} /></h1>
        }
        componentDidMount(){
            console.log("Root componentDidMount")
            this.setState({
                x: 2
            })
        }
    }
     class A extends React.Component{
        constructor(props){
            super(props)
            this.props = props
            this.state = {
                text: props.x
            }
        }
        componentWillReceiveProps(p){
            this.setState({
               text: p.x
            })
        }
        render(){
            console.log("A render..",Date.now())
            return <h2>{this.state.text}</h2>
        }
    }

我们再看一下fiber树。fiber有许多种类型，但主要是四种， ClassFiber,FunctionFiber,HostComponentFiber,HostTextFiber，分别对应原来的类组件，无状态组件，元素虚拟节点，文本虚拟节点。Fiber表面上比React15的虚拟DOM多了一些属性，如parent,child,sibling。换言之，fiber可以像真实DOM一样上下右遍历（没有左）。

React16的源码里面有两个方法beginWork@H_502_24@与finishWork@H_502_24@重要方法。beginWork，就是从一个Fiber开始，初始化它的state（如果fiber.type为函数，则new 实例或一个类似类似的东西，如果type为标签名，则创建元素节点或文本节点），并遍历它的第一重孩子，让孩子们加上parent,sibling（注意这时孩子没有stateNode）。最后返回第一个孩子，作为刚才fiber的child。 然后对这个child再执行beginWork操作。