ReactElement

React系列(2) ReactElement

react/src/ReactElement.js

React.createElement做了什么

1. 先判断config中内置props（key,ref,self,source）存在且有效，则赋值给新声明的变量
2. 再将config中非内置的props 给新声明的props（key和ref不会跟其他config中的变量一起被处理，而是单独作为变量出现在ReactElement上。）
3. 判断如果孩子节点为一个，则赋值给props.children。如果孩子节点有多个，则将其以数组的形式赋值给props.children
4. 如果存在默认值，且存在默认值的属性在props数组中为undefined，则将该属性赋值为默认值。（为null不赋值为默认值）
5. 返回一个ReactElement对象

export function createElement(type, config, children) {
   
  let propName;

  // Reserved names are extracted
  const props = {
   };

  let key = null;
  let ref = null;
  let self = null; // 用于dev
  let source = null; // 用于dev

  if (config != null) {
    // 处理config中的属性
    if (hasValidRef(config)) {
   
      // config里存在合理的ref就将其放入之前声明的ref变量
      ref = config.ref;
    }
    if (hasValidKey(config)) {
   
      // config里存在合理的key就将其放入之前声明的key变量
      key = '' + config.key;
    }

    self = config.__self === undefined ? null : config.__self;
    // config.__self存在就放入self 用于dev
    source = config.__source === undefined ? null : config.__source;