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