createElement执行过程

createElement

• createElement(type, config, children)
  

  • config

    • 是否存在key 并给其放入提前定义好的key中

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

    • 遍历config 将不是RESERVED_PROPS里面包含的属性遍历存入props

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

  • children

    • 找出children的长度

      const childrenLength = arguments.length - 2;
      

    • 并将children内容放入props.children里面

      if (childrenLength === 1) { //长度为1直接放入
          props.children = children;
      } else if (childrenLength > 1) {//长度大于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;}
      

  • type

    • 对默认值的特殊处理

    if (type && type.defaultProps) {//存在默认值
        const defaultProps = type.defaultProps; 
        for (propName in defaultProps) { 
            if (props[propName] === undefined) {  //默认值属性在props没有定义
                props[propName] = defaultProps[propName];//给其定义    } 
     }}
    

• 处理完数据后

return ReactElement(  type,  key,  ref,  undefined,  undefined,  ReactCurrentOwner.current,  props,);//将处理后的数据返回给ReactElement 方法

• ReactElement 方法

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

  • return element;