React源码解析18-架构篇

598 阅读2分钟

这个也要认真哦只要是学习都认真 我感觉这个比之前讲得好哈哈

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

image-20210520151502567

n.注意点

1.currentFiber树在第一次挂载的时候是没有的 只有在更新的时候才有

2.首屏渲染只有当前应用的根节点存在current

3.更新流程

每次调用ReactDom.render 都会创建当前应用的根节点fiberRootNode,他有current属性指向rootFiber,

他的子节点是空白的,

image-20210520141913497

接下来首屏渲染开始创建子树fiber,这时候会先创建rootFiber的woringProgress树在上面进行创建fiber子树

image-20210520142029511

首屏渲染完成,current指针改为workingprogress

image-20210520142104693

如果setState触发更新,current的rootFiber创建新的workingprogress,这时候有current进行比对,每个fiber节点都有alternate进行比对,jsx和之前的fiber进行对比生成workingprogress的fiber,最后current又指向workingprogress

image-20210520142324043

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副作用

image-20210520144342293