React源码学习入门（六）React Component是如何实现的？

本文基于React v15.6.2版本介绍，原因请参见新手如何学习React源码

源码解析

ReactComponent的实现超出想象的简单，位于src/isomorphic/class/ReactBaseClasses.js：

function ReactComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

ReactComponent.prototype.isReactComponent = {};

是的，你没有看错，这就是我们平时继承的ReactComponent的全部面貌，其中的updater和React的更新机制有关，后续文章会详细介绍。

既然Component的实现如此简单，那React又是如何去处理背后的复杂逻辑呢？

这个需要从实例化说起。

React组件实例化

React组件实例化代码位于src/renderers/shared/stack/reconciler：

function instantiateReactComponent(node, shouldHaveDebugID) {
  var instance;

  if (node === null || node === false) {
    // 实例化一个空组件
    instance = ReactEmptyComponent.create(instantiateReactComponent);
  } else if (typeof node === 'object') {
    var element = node;
    var type = element.type;

    if (typeof element.type === 'string') {
       // 实例化一个Host组件
      instance = ReactHostComponent.createInternalComponent(element);
    } else if (isInternalComponentType(element.type)) {
      // 此处为native使用，省略这段代码
    } else {
      // 实例化一个Component组件
      instance = new ReactCompositeComponentWrapper(element);
    }
  } else if (typeof node === 'string' || typeof node === 'number') {
    // 实例化一个Text组件
    instance = ReactHostComponent.createInstanceForText(node);
  } else {
    invariant(false, 'Encountered invalid React node of type %s', typeof node);
  }

  instance._mountIndex = 0;
  instance._mountImage = null;

  return instance;
}

首先看一下instantiateReactComponent的入参，是node，这个node就是我们前面提到的ReactNode，也就是render的返回值。

回顾一下之前我们render的返回值类型：

null、false，这个在React里面会初始化一个ReactEmptyComponent
string，纯字符串，React会初始化成一个ReactTextComponent
type为string，也就是表示DOM原生标签，会初始化成一个HostComponent->ReactDOMComponent
最后type是一个ReactComponent，会初始化成一个ReactCompositeComponent

以我们之前分析的JSX为例：

render() {
  return /*#__PURE__*/React.createElement("button", {
    onClick: this.handleClick
  }, "Click me! Number of clicks: ", this.state.count);
}

这个结构的Element，被实例化的情况如下：