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
的由来:
- 定义一个ClassComponent:
class Comp extends React.Component
- 可以为
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;
}
赞 (0)