React16.2的fiber架构详解(3)

React16是否能异步渲染，在于内部一个变量。在开始之前，我们需要准备一个例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="utf-8">
    <title>by 司徒正美</title>
    <Meta name="viewport" content="width=device-width">
    <!-- <script type='text/javascript' src="./src/React2.js"></script>-->
    <script type='text/javascript' src="./test/react.js"></script>
    <script type='text/javascript' src="./test/react-dom.js"></script>
    <script src="test/babel.js"></script>
</head>

<body>
    <div id="test"></div>
    <div id="content"></div>
</body>
<script type="text/babel">
    var container = document.getElementById("test");
    class Root extends React.Component{
        constructor(props){
            super(props)
            this.props = props
        }
        render(){
            console.log("Root render..",Date.Now())
            return <div><A /></div>
        }
    }
    class A extends React.Component{
        constructor(props){
            super(props)
            this.props = props
        }
        render(){
            console.log("A render..",Date.Now())
            return <div>{1111}</div>
        }
    }
    ReactDOM.render(<Root />,container,function(){
        console.log("callback",Date.Now())
    })
   console.log("end",Date.Now())
</script>

</html>

当中的react.js与react-dom.js是React16.4beta,大家可以在bootcdn上下载。

前文已经提过，ReactDOM.render/hydrate/unstable_renderSubtreeIntoContainer/unmountComponentAtNode都是legacyRenderSubtreeIntoContainer方法的加壳方法。

legacyRenderSubtreeIntoContainer里面调用legacyCreateRootFromDOMContainer创建一个ReactRoot对象，然后再调用其render或legacy_renderSubtreeIntoContainer方法

//by 司徒正美
function legacyCreateRootFromDOMContainer(container,forceHydrate) {
  var shouldHydrate = forceHydrate || shouldHydrateDuetoLegacyHeuristic(container);
  // First clear any existing content.
  if (!shouldHydrate) {
    var warned = false;
    var rootSibling = void 0;
    while (rootSibling = container.lastChild) {
      {
        if (!warned && rootSibling.nodeType === ELEMENT_NODE && rootSibling.hasAttribute(ROOT_ATTRIBUTE_NAME)) {
          warned = true;
          warning_1(false,'render(): Target node has markup rendered by React,but there ' + 'are unrelated nodes as well. This is most commonly caused by ' + 'white-space inserted around server-rendered markup.');
        }
      }
      container.removeChild(rootSibling);
    }
  }
  {
    if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) {
      warnedAboutHydrateAPI = true;
      lowPriorityWarning$1(false,'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + 'will stop working in React v17. Replace the ReactDOM.render() call ' + 'with ReactDOM.hydrate() if you want React to attach to the server HTML.');
    }
  }
  // Legacy roots are not async by default.
  var isAsync = false;
  console.log("new ReactRoot",isAsync,shouldHydrate)
  return new ReactRoot(container,shouldHydrate);
}

留意里面的isAsync，是写死的，强制使用同步，我们可以改一改，就能使用异步

var isAsync = true;

本节的内容就准备读如何 异步渲染。

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

beginWork的过程中，确到组件，需要用到context,context是来自contextStack。这是一个全局对象。在顶层，默认会push一个空对象。然后到达某个组件时，peek一下（不使用pop方法）。如果这个组件有getChildContext方法呢，这时就会产生一个新context,push进去。

有些fiber是没有孩子的，比如说文本节点，或一些元素节点，这样它开始 finishWork操作，找它的sibling,对sibling进行beginWork操作，没有sibling就往上找，这时就会再次访问到某个组件，如果这个组件有getChildContext，于是就pop一下。

finishWork还有一个重要任务，就是收集DOM操作指令，一开始所有fiber的effects都PLACEMENT，叫做置换，其实相当于append。每次往上找时，父fiber就把它所有孩子的effect收集一下，最后到顶层Root组件时， contextStack为空，而effects则装得满满的，然后交给commintAllWork执行这些指令。

fiber架构是很好地解决context的往下传送问题。

React16.2的fiber架构详解(3)

相关文章