在上一节我们看到了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
