• 售前

  • 售后

热门帖子
入门百科

React Fiber结构的创建步调

[复制链接]
掌柜able 显示全部楼层 发表于 2021-10-26 12:52:39 |阅读模式 打印 上一主题 下一主题
目次


  • React Fiber的创建
  • 一、开始之前
  • 二、从React.render开始
  • 三、竣事

React Fiber的创建


当前React版本基于V17.0.2版本,本篇主要先容fiber结构的创建。

一、开始之前


个人明白,如有不对,请指出。
首先必要设置好React的debugger开辟环境,入口在这里:github
实行npm run i,安装依靠,npm start运行环境。

二、从React.render开始


通过在项目入口处调用React.render,打上Debug,查看React调用栈。
  1. const root = document.getElementById('root');
  2. ReactDOM.render(
  3.   <React.StrictMode>
  4.     <App />
  5.   </React.StrictMode>,
  6.   root
  7. );
复制代码
在React调用render之后,在传入基础的设置后,调用legacyRenderSubtreeIntoContainer。
  1. export function render(
  2.   element: React$Element<any>,
  3.   container: Container,
  4.   callback: ?Function,
  5. ) {
  6.   // 删除一些环境代码
  7.   // ...
  8.   return legacyRenderSubtreeIntoContainer(
  9.     null,
  10.     element,
  11.     container,
  12.     false,
  13.     callback,
  14.   );
  15. }
复制代码
在React调用render之后,在传入基础的设置后,调用legacyRenderSubtreeIntoContainer。
  1. export function render(
  2.   element: React$Element<any>,
  3.   container: Container,
  4.   callback: ?Function,
  5. ) {
  6.   // 删除一些环境代码
  7.   // ...
  8.   return legacyRenderSubtreeIntoContainer(
  9.     null,
  10.     element,
  11.     container,
  12.     false,
  13.     callback,
  14.   );
  15. }
复制代码
legacyRenderSubtreeIntoContainer一共做了两件事情,一个是天生了fiberRoot,一个是调用updateContainer。

进入legacyCreateRootFromDOMContainer函数,查看怎样天生fiberRoot。 在函数内部,调用了createLegacyRoot,在这里区分了下,是否使用hydrate,如下:
  1.   return createLegacyRoot(
  2.     container,
  3.     shouldHydrate
  4.       ? {
  5.         hydrate: true,
  6.       }
  7.       : undefined,
  8.   );
复制代码
对于createLegacyRoot来说,是用来实例化ReactDOMLegacyRoot函数的,通过后续调用,终于进入到root的天生,调用createRootImpl函数,实例化root。
进入createFiberRoot函数,初始化FiberRootNode。
  1. function FiberRootNode(containerInfo, tag, hydrate) {
  2.   this.tag = tag; // 类型
  3.   this.containerInfo = containerInfo; // container
  4.   this.pendingChildren = null;
  5.   this.current = null;
  6.   this.pingCache = null;
  7.   this.finishedWork = null;
  8.   this.timeoutHandle = noTimeout;
  9.   this.context = null;
  10.   this.pendingContext = null;
  11.   this.hydrate = hydrate;
  12.   this.callbackNode = null;
  13.   this.callbackPriority = NoLanePriority;
  14.   this.eventTimes = createLaneMap(NoLanes);
  15.   this.expirationTimes = createLaneMap(NoTimestamp);
  16.   this.pendingLanes = NoLanes;
  17.   this.suspendedLanes = NoLanes;
  18.   this.pingedLanes = NoLanes;
  19.   this.mutableReadLanes = NoLanes;
  20.   this.finishedLanes = NoLanes;
  21.   this.entangledLanes = NoLanes;
  22.   this.entanglements = createLaneMap(NoLanes);
  23.   // ....
  24. }
复制代码
这里的tag,有以下几种类型。
  1. export type RootTag = 0 | 1;
复制代码
上述的结构是fiberRootNode节点。
rootTag 即是0 时,代表legacy渲染模式,即是1时,代表Concurrent mode渲染,也就是说,传统我们使用React.render举行渲染,当调用React.createRoot时,进入Concurrent mode渲染模式,即并行渲染。
如今我们一起看看fiber的结构。
  1.   const uninitializedFiber = createHostRootFiber(tag, strictModeLevelOverride);
  2.   root.current = uninitializedFiber;
  3.   uninitializedFiber.stateNode = root;
复制代码
uninitializedFiber为创建的FiberNode的创建的实例。
  1. const createFiber = function(
  2.   tag: WorkTag,
  3.   pendingProps: mixed,
  4.   key: null | string,
  5.   mode: TypeOfMode,
  6. ): Fiber {
  7.   // $FlowFixMe: the shapes are exact here but Flow doesn't like constructors
  8.   return new FiberNode(tag, pendingProps, key, mode);
  9. };
复制代码
通过基础的创建,天生FiberNode结构,如下
  1. function FiberNode(
  2.   tag: WorkTag,
  3.   pendingProps: mixed,
  4.   key: null | string,
  5.   mode: TypeOfMode,
  6. ) {
  7.   // Instance
  8.   this.tag = tag;//组件类型
  9.   this.key = key;//key属性
  10.   this.elementType = null;//元素类型,类函数,显示类,div显示div
  11.   this.type = null;//func或者class
  12.   this.stateNode = null;//dom节点
  13.   // Fiber
  14.   this.return = null;//指向父节点
  15.   this.child = null;//指向子节点
  16.   this.sibling = null;//兄弟节点
  17.   this.index = 0;//
  18.   this.ref = null;
  19.   this.pendingProps = pendingProps;//等待中的属性pendingProps
  20.   this.memoizedProps = null; //记忆属性,一般存放props
  21.   this.updateQueue = null;//更新队列
  22.   this.memoizedState = null;// 一般存放state
  23.   this.dependencies = null;
  24.   this.mode = mode;
  25.   // Effects相关
  26.   this.flags = NoFlags;
  27.   this.subtreeFlags = NoFlags;
  28.   this.deletions = null;
  29.   this.lanes = NoLanes;
  30.   this.childLanes = NoLanes;
  31.   this.alternate = null;//指向workInProgress
  32. }
复制代码

FiberNode基本显示如上,elementType和type的基础类型为function、class。
通过对比fiberRootNode结构,和下面的代码,天生最终的FiberNode 结构。
  1. render() {
  2.     const { name, count } = this.state;
  3.     return (
  4.       <div className="App">
  5.           <Button name={name} />
  6.         {
  7.           count
  8.         }
  9.       </div>
  10.     );
  11.   }
复制代码
  1. ReactDOM.render(
  2.   <React.StrictMode>
  3.     <App />
  4.   </React.StrictMode>,
  5.   root
  6. );
复制代码
通过末了实行,天生fiberRoot链表结构。

末了,调用unbatchedUpdates,举行渲染。
进入updateContainer函数。
  1. unbatchedUpdates(() => {
  2.   // 更新container
  3.   updateContainer(children, fiberRoot, parentComponent, callback);
  4. });
复制代码
三、竣事

以上就是React Fiber结构的创建步骤的具体内容,更多关于React Fiber结构的创建的资料请关注脚本之家其它相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作