复合组件的更新流程

在组件的挂载流程中讲到了,组件的渲染结果保存在_renderedComponent中。当组件执行更新操作时,首先会将之前的renderedComponent保存下来,作为currentComponent;然后再执行_renderValidatedComponent,将其结果记为nextComponent。

如果currentComponent和nextComponent两者类型相同,那么只需要更新子组件的属性值即可;两者类型不同,则需要将原油组件卸载,同时将新组件挂载到对应的位置。相关的源代码如下所示:

updateComponent: function(transaction) {
    var currentComponent = this._renderedComponent;
    var nextComponent = this._renderValidatedComponent();
    if (currentComponent.constructor === nextComponent.constructor) {
      if (!nextComponent.props.isStatic) {
        currentComponent.receiveProps(nextComponent.props, transaction);
      }
    } else {
      // These two IDs are actually the same! But nothing should rely on that.
      var thisID = this._rootNodeID;
      var currentComponentID = currentComponent._rootNodeID;
      currentComponent.unmountComponent();
      var nextMarkup = nextComponent.mountComponent(thisID, transaction);
      ReactComponent.DOMIDOperations.dangerouslyReplaceNodeWithMarkupByID(
        currentComponentID,
        nextMarkup
      );
      this._renderedComponent = nextComponent;
    }
  },

results matching ""

    No results matching ""