React 源码讲解第 4 节- Fiber 对象

客官°小女子只卖身不卖艺 2022-12-09 05:12 167阅读 0赞

### React 源码讲解第 4 节- Fiber 对象 ###

*   *   *  Fiber 的三层含义
         *  Fiber 的八种类型
         *  Fiber 数据结构
         *  开发模式

上一节 [React 源码讲解第 2 节-入口 API 之 ReactDOM.render][React _ 2 _-_ API _ ReactDOM.render] 讲到 render 函数的核心步骤。其中非常重要的一个环节就是创建 Fiber 对象 。本小节介绍 Fiber 对象的含义、类型以及具体包含哪些属性。

### Fiber 的三层含义 ###

1.  作为架构来说，React 15 的 Reconciler （协调器）采用的是不可中断的递归 。所以被称为【stack Reconciler】，而 React 16 的 Reconciler （协调器）是基于 Fiber 实现的是可中断的循环。所以被称为【Fiber Reconciler】。
2.  作为静态的数据结构来说，每一个 element 节点都有一个对应的 Fiber 对象，保存了该组件的类型以及 DOM 节点信息。
3.  作为动态的工作单元来说，每一个 Fiber 节点保存了本次更新中该组件改变的状态、要执行的工作等（删除/插入/更新…）。

### Fiber 的八种类型 ###

export const FunctionComponent = 0;// 函数类型
    export const ClassComponent = 1;// class 类型
    export const IndeterminateComponent = 2; // 不确定类型；可能是class或function
    export const HostRoot = 3; // 树的根
    export const HostPortal = 4; // 一颗子树
    export const HostComponent = 5; // 原生节点；根据环境而定，浏览器环境就是div等
    export const HostText = 6; // 纯文本节点
    export const Fragment = 7; // 节点片段

### Fiber 数据结构 ###

function FiberNode(tag, pendingProps, key, mode) { 
      // tag 组件的类型 Function/class/ContextProvider
      this.tag = tag;
      // key属性
      this.key = key;
      //大部分情况同type，某些情况不同，比如 FunctionComponent 使用React.memo 包裹
      this.elementType = null;
      // 对于 FunctionComponent，指函数本身，对于ClassComponent，指class，对于HostComponent，指 DOM 节点的tagName
      this.type = null;
      // Fiber对应的真实DOM节点
      this.stateNode = null; 
      
      // 以下属性用于连接其他Fiber节点形成Fiber树。
      // 指向父Fiber节点
      this.return = null;
      //指向第一个子Fiber节点
      this.child = null;
      //指向右边第一个兄弟Fiber节点
      this.sibling = null;
      
      this.index = 0;
      // 获取真实节点的 DOM 属性
      this.ref = null;
      
      // 动态的工作单元属性。保存本次更新造成的状态改变相关信息
      this.pendingProps = pendingProps;
      this.memoizedProps = null;
      this.updateQueue = null;
      this.memoizedState = null;
      this.dependencies = null;
      
      //开发模式
      this.mode = mode; // Effects
      
      // 保存本次更新会造成的DOM操作。比如删除，移动
      this.effectTag = NoEffect;
      this.nextEffect = null;
      this.firstEffect = null;
      this.lastEffect = null;
      
      // 调度优先级相关
      this.expirationTime = NoWork;
      this.childExpirationTime = NoWork;
      
      // 指向该fiber在另一次更新时对应的fiber，
      //用于链接新树和旧树；旧->新，新->旧
      this.alternate = null;
    
      { 
        // Note: The following is done to avoid a v8 performance cliff.
        //
        // Initializing the fields below to smis and later updating them with
        // double values will cause Fibers to end up having separate shapes.
        // This behavior/bug has something to do with Object.preventExtension().
        // Fortunately this only impacts DEV builds.
        // Unfortunately it makes React unusably slow for some applications.
        // To work around this, initialize the fields below with doubles.
        //
        // Learn more about this here:
        // https://github.com/facebook/react/issues/14365
        // https://bugs.chromium.org/p/v8/issues/detail?id=8538
        this.actualDuration = Number.NaN;
        this.actualStartTime = Number.NaN;
        this.selfBaseDuration = Number.NaN;
        this.treeBaseDuration = Number.NaN; // It's okay to replace the initial doubles with smis after initialization.
        // This won't trigger the performance cliff mentioned above,
        // and it simplifies other profiler code (including DevTools).
    
        this.actualDuration = 0;
        this.actualStartTime = -1;
        this.selfBaseDuration = 0;
        this.treeBaseDuration = 0;
      } // This is normally DEV-only except www when it adds listeners.
      // TODO: remove the User Timing integration in favor of Root Events.
    
    
      { 
        this._debugID = debugCounter++;
        this._debugIsCurrentlyTiming = false;
      }
    
      { 
        this._debugSource = null;
        this._debugOwner = null;
        this._debugNeedsRemount = false;
        this._debugHookTypes = null;
    
        if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') { 
          Object.preventExtensions(this);
        }
      }
    }

### 开发模式 ###

本源码讲解的是最新版本 React 16.13.1。到目前版本为止，内置的开发模式有如下几种。其中最常用的是严格模式 StrictMode。

export type TypeOfMode = number;
    // 普通模式|Legacy模式，同步渲染，React15-16的生产环境用
    export const NoMode = 0b0000;
    // 严格模式，用来检测是否存在废弃API(会多次调用渲染阶段生命周期)，React16-17开发环境使用
    export const StrictMode = 0b0001;
    // ConcurrentMode 模式的过渡版本
    export const BlockingMode = 0b0010;
    // 并发模式，异步渲染，React17的生产环境用
    export const ConcurrentMode = 0b0100;
    // 性能测试模式，用来检测哪里存在性能问题，React16-17开发环境使用
    export const ProfileMode = 0b1000;

[React _ 2 _-_ API _ ReactDOM.render]: https://blog.csdn.net/weixin_44135121/article/details/108575542

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关手写 React 第 4 节 - 实现 Fiber

手写 React 第 4 节 - 实现 Fiber 前言 1. Fiber 的作用 2. Fiber 数据结

- 日理万妓/ 2022年12月18日 13:58/ 0 赞/ 153 阅读

相关 React 源码讲解第 6 节- expirationTime 公式

React 源码讲解第 6 节- expirationTime 公式入口 currentTime 源码 c

我不是女神ヾ/ 2022年12月11日 07:28/ 0 赞/ 148 阅读

相关 React 源码讲解第 5 节- Update 对象和 UpdateQueue 对象

React 源码讲解第 5 节- Update 对象源码 Update 数据结构 Update 的四种类型

本是古典何须时尚/ 2022年12月11日 04:29/ 0 赞/ 148 阅读

相关 React 源码讲解第 4 节- Fiber 对象

React 源码讲解第 4 节- Fiber 对象 Fiber 的三层含义 Fiber 的八种类型 Fibe

客官°小女子只卖身不卖艺/ 2022年12月09日 05:12/ 0 赞/ 168 阅读

相关 React 源码讲解第 3 节- FiberRoot 对象

React 源码讲解第 3 节- FiberRoot 对象 FiberRoot 作用 FiberRoot 与 RootFiber

末蓝、/ 2022年12月09日 04:52/ 0 赞/ 173 阅读

相关 React 源码讲解第 2 节-入口 API 之 ReactDOM.render

React 源码讲解第 2 节-入口 API 之 ReactDOM.render 前言源码分析

ゝ一世哀愁。/ 2022年12月06日 15:48/ 0 赞/ 175 阅读

相关 React 源码讲解第 1 节-准备工作

React 源码讲解第 1 节-准备工作 1. 先按住 shift ，同时右击选择【在此处打开PowerShell 窗口】。 2. 在打开的窗口中执行 `create

迈不过友情╰/ 2022年12月06日 15:16/ 0 赞/ 180 阅读

相关【React】1077- React Fiber架构浅析

1.浏览器渲染为了更好的理解 React Fiber, 我们先简单了解下渲染器进程的内部工作原理。 > 参考资料: > > 1. 从内部了解现代浏览器(3)\[1\]

逃离我推掉我的手/ 2022年09月11日 03:25/ 0 赞/ 207 阅读

相关 React学习-- React源码（4）setState机制

React通过this.state来访问state，通过this.setState来更新state。当setState被调用的时候，React会重新调用render方法来重新渲

ゝ一世哀愁。/ 2022年06月14日 08:57/ 0 赞/ 166 阅读

相关 ArrayDeque源码讲解

介绍上篇已经介绍了Deque的方法，这次介绍ArrayDeque的实现原理，并对几个主要方法进行讲解（基于jdk11的源码） 1. ArrayDeque是可扩

朱雀/ 2022年04月06日 04:28/ 0 赞/ 519 阅读