React源码解析-首次渲染（纯DOM元素）I

• 前言

React 是一个十分庞大的库，由于要同时考虑 ReactDom 和 ReactNative ，还有服务器渲染等，导致其代码抽象化程度很高，嵌套层级非常深，阅读其源码是一个非常艰辛的过程。在学习 React 源码的过程中，给我帮助最大的就是这个系列文章，于是决定基于这个系列文章谈一下自己的理解。本文会大量用到原文中的例子，想体会原汁原味的感觉，推荐阅读原文。

本系列文章将基于 React 15.4.2。

• React.createElement

在写 React 项目的时候，我们一般会直接用 JSX 的形式来写，而 JSX 经过 Babel 编译后最终会将 HTML 标签转换为React.createElement的函数形式。如果想进行更深入的了解，可以看我之前写的这篇文章：你不知道的Virtual DOM（一）：Virtual Dom介绍。文章中的h函数，如果不在 Babel 中配置的话，默认就是React.createElement。

下面，我们将从一个最简单的例子，来看React是如何渲染的：

ReactDOM.render(    <h1 style={{"color":"blue"}}>hello world</h1>,    document.getElementById('root')
);

经过JSX编译后，会是下面这个样子

ReactDOM.render(
    React.createElement(        'h1',
        { style: { "color": "blue" } },        'hello world'
    ),    document.getElementById('root')
);

先来看下React.createElement的源码。

// 文件位置：src/isomorphic/React.jsvar ReactElement = require('ReactElement');

...

var createElement = ReactElement.createElement;

...

var React = {
    ...
    
    createElement: createElement,
    
    ...
}module.exports = React;

最终的实现需要查看ReactElement.createElement：

// 文件位置：src/isomorphic/classic/element/ReactElement.jsReactElement.createElement = function (type, config, children) {
    ...    // 1. 将过滤后的有效的属性，从config拷贝到props
    if (config != null) {
        
        ...
        
        for (propName in config) {            if (hasOwnProperty.call(config, propName) &&
                !RESERVED_PROPS.hasOwnProperty(propName)) {
                props[propName] = config[propName];
            }
        }
    }    // 2. 将children以数组的形式拷贝到props.children属性
    var childrenLength = arguments.length - 2;    if (childrenLength === 1) {
        props.children = children;
    } else if (childrenLength > 1) {        var childArray = Array(childrenLength);        for (var i = 0; i < childrenLength; i++) {
            childArray[i] = arguments[i + 2];
        }        if (__DEV__) {            if (Object.freeze) {                Object.freeze(childArray);
            }
        }
        props.children = childArray;
    }    // 3. 默认属性赋值
    if (type && type.defaultProps) {        var defaultProps = type.defaultProps;        for (propName in defaultProps) {            if (props[propName] === undefined) {
                props[propName] = defaultProps[propName];
            }
        }
    }
    
    ...
    
    return ReactElement(
        type,
        key,
        ref,
        self,
        source,
        ReactCurrentOwner.current,
        props
    );
};

本质上只做了3件事：

1. 将过滤后的有效的属性，从config拷贝到props

2. 将children以数组的形式拷贝到props.children属性

3. 默认属性赋值

最终的返回值是ReactElement。我们再来看看它做了什么

// 文件位置：src/isomorphic/classic/element/ReactElement.jsvar ReactElement = function (type, key, ref, self, source, owner, props) {    var element = {        // This tag allow us to uniquely identify this as a React Element
        $$typeof: REACT_ELEMENT_TYPE,        // Built-in properties that belong on the element
        type: type,        key: key,        ref: ref,        props: props,        // Record the component responsible for creating this element.
        _owner: owner,
    };
    
    ...

    return element;
};

最终只是返回了一个简单对象。调用栈是这样的：

React.createElement
|=ReactElement.createElement(type, config, children)
    |-ReactElement(type,..., props)

这里生成的 ReactElement 我们将其命名为ReactElement[1]，它将作为参数传入到 ReactDom.render。

• ReactDom.render

ReactDom.render 最终会调用 ReactMount 的 _renderSubtreeIntoContainer：

// 文件位置：src/renderers/dom/client/ReactMount.js_renderSubtreeIntoContainer: function (parentComponent, nextElement, container, callback) {
    ...
    var nextWrappedElement = React.createElement(
        TopLevelWrapper, 
        {            child: nextElement
        }
    );

    ...
    
    var component = ReactMount._renderNewRootComponent(
        nextWrappedElement,
        container,
        shouldReuseMarkup,
        nextContext
    )._renderedComponent.getPublicInstance();
    
    ...
    
    return component;
},

...

var TopLevelWrapper = function () {    this.rootID = topLevelRootCounter++;
};

TopLevelWrapper.prototype.isReactComponent = {};

TopLevelWrapper.prototype.render = function () {    return this.props.child;
};

TopLevelWrapper.isReactTopLevelWrapper = true;

...

_renderNewRootComponent: function (
    nextElement,
    container,
    shouldReuseMarkup,
    context) {
    ...
    
    var componentInstance = instantiateReactComponent(nextElement, false);

    ...

    return componentInstance;
},

这里又会调用到另一个文件 instantiateReactComponent：

// 文件位置：src/renders/shared/stack/reconciler/instantiateReactComponent.jsfunction instantiateReactComponent(node, shouldHaveDebugID) {    var instance;

    ...

    instance = new ReactCompositeComponentWrapper(element);
    
    ...

    return instance;
}// To avoid a cyclic dependency, we create the final class in this modulevar ReactCompositeComponentWrapper = function (element) {    this.construct(element);
};Object.assign(
    ReactCompositeComponentWrapper.prototype,
    ReactCompositeComponent, 
    {        _instantiateReactComponent: instantiateReactComponent,
    }
);

这里又会调用到另一个文件 ReactCompositeComponent：

// 文件位置：src/renders/shared/stack/reconciler/ReactCompositeComponent.jsvar ReactCompositeComponent = {    construct: function (element) {        this._currentElement = element;        this._rootNodeID = 0;        this._compositeType = null;        this._instance = null;        this._hostParent = null;        this._hostContainerInfo = null;        // See ReactUpdateQueue
        this._updateBatchNumber = null;        this._pendingElement = null;        this._pendingStateQueue = null;        this._pendingReplaceState = false;        this._pendingForceUpdate = false;        this._renderedNodeType = null;        this._renderedComponent = null;        this._context = null;        this._mountOrder = 0;        this._topLevelWrapper = null;        // See ReactUpdates and ReactUpdateQueue.
        this._pendingCallbacks = null;        // ComponentWillUnmount shall only be called once
        this._calledComponentWillUnmount = false;        if (__DEV__) {            this._warnedAboutRefsInRender = false;
        }
    }
    
    ...
}

我们用ReactCompositeComponent[T]来表示这里生成的顶层 component。

整个的调用栈是这样的：

ReactDOM.render
|=ReactMount.render(nextElement, container, callback)
|=ReactMount._renderSubtreeIntoContainer()
    |-ReactMount._renderNewRootComponent(
        nextWrappedElement, // scr:------------------> ReactElement[2]
        container,          // scr:------------------> document.getElementById('root')
        shouldReuseMarkup,  // scr: null from ReactDom.render()
        nextContext,        // scr: emptyObject from ReactDom.render()
    )
    |-instantiateReactComponent(
          node,             // scr:------------------> ReactElement[2]
          shouldHaveDebugID /* false */
        )
        |-ReactCompositeComponentWrapper(
            element         // scr:------------------> ReactElement[2]
        );
        |=ReactCompositeComponent.construct(element)

组件间的层级结构是这样的：

当顶层组件构建完毕后，下一步就是调用 batchedMountComponentIntoNode（来自 ReactMount 的 _renderNewRootComponent方法），进行页面的渲染了。这部分内容将在下一篇文章进行讲解。如果你等不及的话，可以直接看这个系列文章。

原文链接：https://segmentfault.com/a/1190000016741764