React源码解析(二)：react-element

在上一节我们看到了jsx代码转化成了javascript代码之后，我们的写的类似html的那种标签形式，然后标签的属性和内容最终都会变成类型参数传到我们调用的React.createElement(type, config, children)方法中。

首先我们看下creatElement方法的源码，如下：

/** 
* Create and return a new ReactElement of the given type. 
* See https://reactjs.org/docs/react-api.html#createelement 
*/

export function createElement(type, config, children) {  
    let propName;  
    // Reserved names are extracted  
    const props = {};  
    let key = null;  
    let ref = null;  
    let self = null;  
    let source = null;  
    
    if (config != null) {    
        if (hasValidRef(config)) {      
            ref = config.ref;    
        }    

        if (hasValidKey(config)) {      
            key = '' + config.key;    
        }    

        self = config.__self === undefined ? null : config.__self;    
        source = config.__source === undefined ? null : config.__source;    
        // Remaining properties are added to a new props object    

        for (propName in config) {      
            if (
                    hasOwnProperty.call(config, propName) &&
                    !RESERVED_PROPS.hasOwnProperty(propName)      
               ) {        
                    props[propName] = config[propName];      
                 }    
            }  
     }  

    // Children can be more than one argument, and those are transferred onto  
    // the newly allocated props object.  
    const childrenLength = arguments.length - 2;  

    if (childrenLength === 1) {    
        props.children = children;  
    } else if (childrenLength > 1) {    
        const childArray = Array(childrenLength);    
        for (let i = 0; i < childrenLength; i++) {      
            childArray[i] = arguments[i + 2];    
        }    
        if (__DEV__) {      
            if (Object.freeze) {
                Object.freeze(childArray);      
            }    
        }    
        props.children = childArray;  
    }  

    // Resolve default props  
    if (type && type.defaultProps) {    
        const defaultProps = type.defaultProps;    
        for (propName in defaultProps) {      
            if (props[propName] === undefined) {        
                props[propName] = defaultProps[propName];      
            }    
        }  
    }  

    if (__DEV__) {    
        if (key || ref) {      
            const displayName = typeof type === 'function' 
                ? type.displayName || type.name || 'Unknown' 
                : type;   
   
            if (key) {        
                defineKeyPropWarningGetter(props, displayName);      
            } 
     
            if (ref) {        
                defineRefPropWarningGetter(props, displayName);      
            }    
        }  
    }  

    return ReactElement(
        type, 
        key, 
        ref, 
        self, 
        source, 
        ReactCurrentOwner.current, 
        props,
    );
}复制代码

从源码我们可以看到，该方法接受三个参数：

• type
• config
• children

type 指代这个ReactElement的类型

• 标签类的字符串，div, p等等
• 组件类，Class类型是我们继承自 Component 或者 PureComponent 的组件或者函数类型的Function Component 
• React原生提供的Fragment、AsyncMode等是Symbol，会被特殊处理
  

config 指代元素节点上attr的属性，但是从源码里可以看出有两个属性会被特殊处理，就是ref和key，首先它会检查是否有合法的ref和key，然后把它读取到单独的变量中保存，最终传给ReactElement, 然后剩下的属性会被保存到props变量当中

我们可以看到defaultProps是如何处理的，首先遍历defaultProps，然后查看props对象中该键是否有值，如果（props[propName] === undefined），就把该键的值设为defaultProps改建的值（props[propName] = defaultProps[propName]） ，但是我们可以看到它只是判断了是否为undefined ,说明设为null是可以的。

createElement方法最后返回一个ReactElement方法的调用，那么ReactElement到底是什么，我们来看下它的源码：

const ReactElement = function(type, key, ref, self, source, owner, props) {  
    const element = {    
        // This tag allows 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,  
    };  

    if (__DEV__) {    
        // The validation flag is currently mutative. We put it on    
        // an external backing store so that we can freeze the whole object.    
        // This can be replaced with a WeakMap once they are implemented in    
        // commonly used development environments.    

        element._store = {};    

        // To make comparing ReactElements easier for testing purposes, we make    
        // the validation flag non-enumerable (where possible, which should    
        // include every environment we run tests in), so the test framework    
        // ignores it.    

        Object.defineProperty(element._store, 'validated', {      
            configurable: false,      
            enumerable: false,      
            writable: true,      
            value: false,    
        });  
  
        // self and source are DEV only properties.    
        Object.defineProperty(element, '_self', {      
            configurable: false,      
            enumerable: false,      
            writable: false,      
            value: self,    
        });    

        // Two elements created in two different places should be considered    
        // equal for testing purposes and therefore we hide it from enumeration.    
        Object.defineProperty(element, '_source', {      
            configurable: false,      
            enumerable: false,      
            writable: false,      
            value: source,    
        });    

        if (Object.freeze) {      
            Object.freeze(element.props);      
            Object.freeze(element);    
        }  
    } 
 
    return element;
};复制代码

从上面的源码中我们可以看到方法内部首先声明了一个element对象，并且把type, ref, key, props等属性保存在对象里然后返回element。

但是我们还看到element对象上有个$$typeof ，这是个什么东西，我们可以看到它的值是一个常量（REACT_ELEMENT_TYPE），但有一个特例：ReactDOM.createPortal的时候是REACT_PORTAL_TYPE，不过他不是通过createElement创建的，所以他应该也不属于ReactElement ，所以$$typeof是ReactElement用于确定是否属于ReactElement 。

ReactElement是用来承载信息的容器，他会告诉我们后续操作这个节点的以下信息：

• type类型，用于判断如何创建节点
• key和ref这些特殊信息
• props新的属性内容
• $$typeof用于确定是否属于ReactElement