ReactElement源码笔记

ReactElement 源码笔记

ReactElement通过 createElement创建，调用该方法需要 传入三个参数：

• type
• config
• children

type指代这个ReactElement 的类型

config指代这个ReactElement 的属性对象

children指代这个ReactElement 的子元素节点

• 字符串比如 'div'，'p'代表原生DOM，称为HostComponent
• Class 类型是我们继承自 Component 或者 PureComponent的组件，称为ClassComponent
• 方法就是 function Component
• 原生提供的 Fragment、AsyncMode 等是 Symbol，会被特殊处理
• TODO: 是否有其他的

//源码位置： packages/react/src/ReactElement.js
// createElement函数
export function createElement(type, config, children){
// 一、处理config // 1. 判断config是否为空 // 2. 提取保留属性（key, ref, self, soure） // 3. 其余属性添加到新的props对象中
for(propName in config){
if(
hasOwnProperty.call(config, propName)&&
!RESERVED_PROPS.hasOwnProperty(propName)
){
props[propName] = config[propName]
}
} // 二、处理children => props.children
// (children可以超过一个)，处理过后的children 被放入 props.children
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];
}
props.children = childArray;
}
// 三、处理type的 defaultProps
if(type && type.defaultProps) {
const defaultProps = type.defaultProps;
for (propName in defaultProps) {
if(props[propName] === undefined) {
props[propName] = defaultProps[propName]
}
}
} // 四、返回一个ReactElement()函数
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props,
);
}


注：type.defaultProps的由来：

1. 定义一个ClassComponent: class Comp extends React.Component
2. 可以为 Comp设置一个defaultProps: Comp.defaultProps = { value: 1 }

//源码位置： packages/react/src/ReactElement.js
// ReactElement 函数
const ReactElement = function(type, key, ref, self, source, owner, props){
const element = {
// $$typeof用于标识 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,
} // _DEV_ 代码... return element;
}