这里是学习React18 的记录
react 理解
理解react，react-reconciler，react-dom，shared 之间的关系
- react 包含 jsx 方法，将原始的html结构解析为ReactElement，如：以下结构：
<div><span>big-react</span></div>会被解析为:
{
"type": "div",
"key": null,
"ref": null,
"props": {
"children": {
"type": "span",
"key": null,
"ref": null,
"props": {
"children": "big-react"
},
"__mark": "Dora Li"
}
},
"__mark": "Dora Li"
}-
react-reconciler是react的主要执行逻辑的地方，是react和react-dom的桥梁，也是将ReactElement 转为 fiber结构，创建dom元素，控制更新的地方。以上ReactElement会在react-reconciler被转为：
红色框即为fiber结构，绿色框即为fiber对应的dom节点 -
react-dom 就是创建node节点，以及把node节点放在dom中，当前这些可能不仅仅是在浏览器环境，其他宿主环境也可以实现
-
shared 其实就是定义一下公共的 type，共所有的包都可以使用
理解workLoop做了什么？
workLoop 其实就是根据 react 的jsx方法解析出来的jsx ReactElement 结构数据进行递归 递归中的递就是 beginWork 主要是在根据 ReactElement 来创建 fiber结构，来树形记录节点关系 递归中的归就是 completeWork 主要作用就是根据 fiber 的节点关系来创建DOM结构的节点关系
react中的一些难以理解的技术点
位运算
const A = 1 << 0; // 0b00000001
const B = 1 << 1; // 0b00000010
const C = 1 << 2; // 0b00000100
// 增加属性
const ABC = A | B | C; // 0b00000111
// 删除属性
const AB = ABC & ~C; // 0b00000011
// 属性比较
// 1. AB当中包含B
console.log(AB & (B === B)); // true
// 2. AB当中不包含C
console.log(AB & (C === 0)); // true
// 3. A和B相等
console.log(A === B); // true