ReactElement
ReactElement
通过createElement
创建,调用该方法需要传入三个参数:
- type
- config
- children
type
指代这个ReactElement
的类型
- 字符串比如
div
,p
代表原生DOM,称为HostComponent
- Class类型是我们继承自
Component
或者PureComponent
的组件,称为ClassComponent
- 方法就是
functional Component
- 原生提供的
Fragment
、AsyncMode
等是Symbol,会被特殊处理 - TODO: 是否有其他的
从源码可以看出虽然创建的时候都是通过config
传入的,但是key
和ref
不会跟其他config
中的变量一起被处理,而是单独作为变量出现在ReactElement
上。
在最后创建ReactElement
我们看到了这么一个变量$$typeof
,这是个啥呢,在这里可以看出来他是一个常量:REACT_ELEMENT_TYPE
,但有一个特例:ReactDOM.createPortal
的时候是REACT_PORTAL_TYPE
,不过他不是通过createElement
创建的,所以他应该也不属于ReactElement
export function createElement(type, config, children) {
// 处理参数
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props,
);
}
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,
};
return element
}
ReactElement
只是一个用来承载信息的容器,他会告诉后续的操作这个节点的以下信息:
type
类型,用于判断如何创建节点key
和ref
这些特殊信息props
新的属性内容$$typeof
用于确定是否属于ReactElement
这些信息对于后期构建应用的树结构是非常重要的,而React通过提供这种类型的数据,来脱离平台的限制
results matching ""
No results matching ""
扫码添加Jokcy,更多更新更优质的前端学习内容不断更新中,期待与你一起成长!