React 中的 createElement 函数详解：构建虚拟 DOM 的核心

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

// 从 config 中提取保留的属性名 const props = {};

let key = null; let ref = null; let self = null; let source = null;

if (config != null) { if (hasValidRef(config)) { ref = config.ref;

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

self = config.__self === undefined ? null : config.__self;
source = config.__source === undefined ? null : config.__source;
// 将剩余的属性添加到新的 props 对象中
for (propName in config) {
  if (
    hasOwnProperty.call(config, propName) &&
    !RESERVED_PROPS.hasOwnProperty(propName)
  ) {
    props[propName] = config[propName];
  }
}

}

// 子元素可以是多个参数，这些参数将被添加到新分配的 props 对象中。 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; }

// 解析默认 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, ); }