这个也要认真哦只要是学习都认真 我感觉这个比之前讲得好哈哈
1.jsx与fiber关系
建立workingprogress 的fiber阶段 会把jsx和current fiber树的所有fiber节点去diff,产生更新
2.reactElement和reactComponent之前关系
reactElement是react内置的数据结构
reactComponent是类组件或者函数组件
reactElement的type就是该类组件或者函数组件 想一下要处理type.defaulPropst 不然就是dom的string 或者内置组件的对象
ps:所有更新后的属性都是放到workingProgressfiber的pendingProps里面,包括children(jsx产生的),更新前的属性是放到currentfiber的merizoedprops里面,包括children
n.注意点
1.currentFiber树在第一次挂载的时候是没有的 只有在更新的时候才有
2.首屏渲染只有当前应用的根节点存在current
3.更新流程
每次调用ReactDom.render 都会创建当前应用的根节点fiberRootNode,他有current属性指向rootFiber,
他的子节点是空白的,
接下来首屏渲染开始创建子树fiber,这时候会先创建rootFiber的woringProgress树在上面进行创建fiber子树
首屏渲染完成,current指针改为workingprogress
如果setState触发更新,current的rootFiber创建新的workingprogress,这时候有current进行比对,每个fiber节点都有alternate进行比对,jsx和之前的fiber进行对比生成workingprogress的fiber,最后current又指向workingprogress
4.react中所有的component的tag
export const FunctionComponent = 0;
export const ClassComponent = 1;
export const IndeterminateComponent = 2; // Before we know whether it is function or class
export const HostRoot = 3; // Root of a host tree. Could be nested inside another node.
export const HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
export const HostComponent = 5;
export const HostText = 6;
export const Fragment = 7;
export const Mode = 8;
export const ContextConsumer = 9;
export const ContextProvider = 10;
export const ForwardRef = 11;
export const Profiler = 12;
export const SuspenseComponent = 13;
export const MemoComponent = 14;
export const SimpleMemoComponent = 15;
export const LazyComponent = 16;
export const IncompleteClassComponent = 17;
export const DehydratedFragment = 18;
export const SuspenseListComponent = 19;
export const FundamentalComponent = 20;
export const ScopeComponent = 21;
export const Block = 22;
export const OffscreenComponent = 23;
export const LegacyHiddenComponent = 24;
5.react中所有的side Effect副作用