React源码阅读--React.createElement和ReactElement

约定不等于承诺〃 2021-10-30 02:48 265阅读 0赞

### 文章目录 ###

*  React.createElement
 *   *  源码
 *  ReactElement

# React.createElement #

在React中，JSX语法糖都会被转换为`React.createElement`的形式。

例如：

<div id='div'>hello</div>

会被转换为：

React.createElement('div', {
        id: 'div'}, 'hello');

--------------------

这个方法是React对象的一个方法，在源码目录下的`React.js`中，可以看见React对象内包含了这个方法。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

## 源码 ##

而这个方法真正的定义则是在`ReactElement.js`文件内。

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,
      );
    }

首先方法内定义了一个`props`对象，用以存放我们为组件传入的props。**需要注意的是，config参数并不一定就直接是最终的props，因为`key`和`ref`都不是传给组件的。后面定义的`key`和`ref`变量就是用来存放这两个值的。**

接下来

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

这两个`if`分别判断传入的`config`参数内包不包含合法的`ref`和合法的`key`，若包含则分别用`ref`变量、`key`变量保存下来。

然后

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

这段代码是负责将`config`参数中除去`key`、`ref`的值放入之前定义的`props`对象中。`hasOwnProperty`用以确认当前的键是定义在`config`上而不是其原型链上。

`!RESERVED_PROPS.hasOwnProperty(propName)`则是排除掉不属于`props`对象的属性。`RESERVED_PROPS`的定义如下：

const RESERVED_PROPS = {
        
      key: true,
      ref: true,
      __self: true,
      __source: true,
    };

--------------------

从JSX转换成JavaScript之后的代码可以看出，**`React.createElement`方法从第三个参数开始，之后所有的参数都是该组件的子组件。**

所以`arguments.length-2`就是在计算子组件的个数。若只有一个子组件，那么`props.children`的值就是这个子组件。若大于一个，则将所有子组件都放进一个数组内。

--------------------

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

我们在编写组件的时候可以通过编写`defaultProps`来为组件设置缺省的`props`。而这个缺省的`props`就是在这里被设置的。

可以看出，先判断有没有`defaultProps`，若有接着判断`defaultProps`中的每一个键，**若该键在之前定义的`props`对象中找不到对应的值，则将`defaultProps`中的对应值赋给`props`对象**。这样就实现了“若传入的`props`有对应值就是用传入的，若没有则使用默认的”的效果了。

--------------------

最后就是返回`ReactElement`方法返回的结果。

# ReactElement #

一眼就可以看出，`ReactElement`方法返回的就是一个普通的JS对象。这个对象内的值基本就是刚刚`React.createElement`中传入的那些。

这里面要注意的是`$$typeof`这个属性，它用来标记该对象是一个`React`元素。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20211029/71ffb2ea66d3498f9b599ba8a6672c90.png