React源码中的几种关键数据结构
element对象
jsx
_jsxs方法就是来生成element对象的,它执行的结果才是element对象
element对象是对UI的描述
https://babeljs.io/ 可以尝试自己玩一下
/*#__PURE__*/ 这个注释可以帮助webpack做tree shaking
function App() {
return /*#__PURE__*/_jsxs("div", {
id: "div",
class: "div",
children: [/*#__PURE__*/_jsx("span", {}), /*#__PURE__*/_jsx("p", {
id: "p"
})]
});
}
类型声明文件
export interface ReactElementType {
// 元素类型
$$typeof: symbol | number;
type: ElementType;
// for循环中的key,不加默认用index代替
key: Key;
// 组件的props
props: Props;
// 组件ref
ref: Ref;
// 我们自己的特殊标记
__mark: string;
}
fiber对象
fiber对象是对react执行过程中元素状态的描述,打上一些标记等等
export class FiberNode {
// 元素类型,函数式组件就是函数本身
type: any; // div span li ul
// 组件对象类型
tag: WorkTag;
// 组件初始props
pendingProps: Props;
key: Key;
// 真实dom
stateNode: any;
ref: Ref;
return: FiberNode | null;
sibling: FiberNode | null;
child: FiberNode | null;
index: number;
// 更新后的props状态
memoizedProps: Props | null;
memoizedState: any;
// 连体婴儿 双缓存机制
alternate: FiberNode | null;
// 副作用标记
flags: Flags;
subtreeFlags: Flags;
updateQueue: unknown;
constructor(tag: WorkTag, pendingProps: Props, key: Key) {
// 实例
this.tag = tag;
this.key = key;
// HostComponent <div> div DOM
this.stateNode = null;
// FunctionComponent () => {}
this.type = null;
// 构成树状结构
this.return = null;
this.sibling = null;
this.child = null;
this.index = 0;
this.ref = null;
// 作为工作单元
this.pendingProps = pendingProps;
this.memoizedProps = null;
this.memoizedState = null;
this.updateQueue = null;
this.alternate = null;
// 副作用, 更新元素的标记
this.flags = NoFlags;
this.subtreeFlags = NoFlags;
}
}
worktag是对元素类型的进一步抽象
export type WorkTag =
| typeof FunctionComponent
| typeof HostRoot
| typeof HostComponent
| typeof HostText;
export const FunctionComponent = 0;
export const HostRoot = 3; // hsotroot代表生成的中间空节点
export const HostComponent = 5; // 原生节点 div span等
// <div>123</div>
export const HostText = 6;