专栏首页前端干货和生活感悟React源码解析之RootFiber

React源码解析之RootFiber

一、Fiber的含义和作用 (1)每一个ReactElement对应一个Fiber对象

(2)记录节点的各种状态 比如ClassComponent中的stateprops的状态就是记录在Fiber对象上的。

只有当Fiber对象更新后,才会更新到ClassComponent上的this.statethis.props

this上的stateprops是根据Fiber对象的stateprops更新的。

这实际上也方便了ReactHooks,因为hooks是为FunctionalComponent服务的。虽然FunctionalComponent没有this,但Fiber上有,是可以拿到stateprops

(3)串联整个应用形成树结构 每个ReactElement通过props.children与其他ReactElement连结起来

图1

说明:ReactElement只会把子节点(props.children)的第一个子节点当做child节点,其余的子节点(也就是第一个子节点的兄弟节点)都是从第一个子节点开始,依次单向连接至后一个兄弟节点

② 每个子节点都会指向父节点(红箭头),也就是Fiber对象的return属性

export type Fiber = {|
  //指向该对象在Fiber节点树中的`parent`,用来在处理完该节点后返回
  //即流程图上的红线
  return: Fiber | null,
}

串联过程: ① 任一 叶子 节点A,如果有兄弟节点,则去单向向后遍历兄弟节点,最后return到父节点 ② 父节点的child节点不是刚刚的子节点A的话,则从child节点遍历到A前的节点,并再次return到父节点 ③ 该父节点执行 ①、②

根据图1举例: 比如从左下角的input节点开始,它没有兄弟节点,则return到父组件Input(因为父节点有且只有一个,所以必定return到父节点)

Input有兄弟节点ListList又有child节点,则从child节点往后单向遍历兄弟节点,最后returnList

Listreturndivdivchild节点已被遍历,则returnApp节点,AppAppreturn到所有Fiber对象的根对象RootFiber对象

这样,就将整个应用遍历完了。

二、Fiber对象 源码:

// A Fiber is work on a Component that needs to be done or was done. There can
// be more than one per component.

//Fiber对应一个即将update或已经update的组件,
// 一个组件可以有一个或多个Fiber
export type Fiber = {|
  // These first fields are conceptually members of an Instance. This used to
  // be split into a separate type and intersected with the other Fiber fields,
  // but until Flow fixes its intersection bugs, we've merged them into a
  // single type.

  // An Instance is shared between all versions of a component. We can easily
  // break this out into a separate object to avoid copying so much to the
  // alternate versions of the tree. We put this on a single object for now to
  // minimize the number of objects created during the initial render.

  // Tag identifying the type of fiber.

  //标记不同的组件类型
  //有原生的DOM节点,有React自己的节点
  tag: WorkTag,

  // Unique identifier of this child.

  //ReactElement里面的key
  key: null | string,

  // The value of element.type which is used to preserve the identity during
  // reconciliation of this child.

  //ReactElement.type,也就是我们调用createElement的第一个参数
  elementType: any,

  // The resolved function/class/ associated with this fiber.

  //异步组件resolve之后返回的内容,一般是function或class
  //比如懒加载
  type: any,

  // The local state associated with this fiber.

  //当前Fiber的状态(比如浏览器环境就是DOM节点)

  //不同类型的实例都会记录在stateNode上
  //比如DOM组件对应DOM节点实例
  //ClassComponent对应Class实例
  //FunctionComponent没有实例,所以stateNode值为null

  //state更新了或props更新了均会更新到stateNode上
  stateNode: any,

  // Conceptual aliases
  // parent : Instance -> return The parent happens to be the same as the
  // return fiber since we've merged the fiber and instance.

  // Remaining fields belong to Fiber

  // The Fiber to return to after finishing processing this one.
  // This is effectively the parent, but there can be multiple parents (two)
  // so this is only the parent of the thing we're currently processing.
  // It is conceptually the same as the return address of a stack frame.

  //指向该对象在Fiber节点树中的`parent`,用来在处理完该节点后返回
  //即流程图上的红线
  return: Fiber | null,

  // Singly Linked List Tree Structure.
  //单链表树结构

  //指向自己的第一个子节点
  child: Fiber | null,

  //指向自己的兄弟结构
  //兄弟节点的return指向同一个父节点
  sibling: Fiber | null,
  index: number,

  // The ref last used to attach this node.
  // I'll avoid adding an owner field for prod and model that as functions.

  //ref属性
  ref: null | (((handle: mixed) => void) & {_stringRef: ?string}) | RefObject,

  // Input is the data coming into process this fiber. Arguments. Props.

  //新的变动带来的新的props,即nextProps
  pendingProps: any, // This type will be more specific once we overload the tag.

  //上一次渲染完成后的props,即 props
  memoizedProps: any, // The props used to create the output.

  // A queue of state updates and callbacks.

  //该Fiber对应的组件,所产生的update,都会放在该队列中
  updateQueue: UpdateQueue<any> | null,

  // The state used to create the output

  //上次渲染的state,即 state
  //新的state由updateQueue计算得出,并覆盖memoizedState
  memoizedState: any,

  // Dependencies (contexts, events) for this fiber, if it has any

  //一个列表,存在该Fiber依赖的contexts,events
  dependencies: Dependencies | null,

  // Bitfield that describes properties about the fiber and its subtree. E.g.
  // the ConcurrentMode flag indicates whether the subtree should be async-by-
  // default. When a fiber is created, it inherits the mode of its
  // parent. Additional flags can be set at creation time, but after that the
  // value should remain unchanged throughout the fiber's lifetime, particularly
  // before its child fibers are created.

  //mode有conCurrentMode和strictMode

  //用来描述当前Fiber和其他子树的Bitfield
  //共存的模式表示这个子树是否默认是 异步渲染的

  //Fiber刚被创建时,会继承父Fiber
  //其他标识也可以在创建的时候被设置,但是创建之后不该被修改,特别是它的子Fiber创建之前
  mode: TypeOfMode,

  //以下属性是副作用
  //副作用是 标记组件哪些需要更新的工具、标记组件需要执行哪些生命周期的工具

  // Effect
  effectTag: SideEffectTag,

  // Singly linked list fast path to the next fiber with side-effects.
  nextEffect: Fiber | null,

  // The first and last fiber with side-effect within this subtree. This allows
  // us to reuse a slice of the linked list when we reuse the work done within
  // this fiber.
  firstEffect: Fiber | null,
  lastEffect: Fiber | null,

  // Represents a time in the future by which this work should be completed.
  // Does not include work found in its subtree.

  //代表任务在未来的哪个时间点 应该被完成
  //不包括该Fiber的子树产生的任务
  expirationTime: ExpirationTime,

  // This is used to quickly determine if a subtree has no pending changes.

  //快速确定子树中是否有 update
  //如果子节点有update的话,就记录应该更新的时间
  childExpirationTime: ExpirationTime,

  // This is a pooled version of a Fiber. Every fiber that gets updated will
  // eventually have a pair. There are cases when we can clean up pairs to save
  // memory if we need to.

  // 在FIber树更新的过程中,每个Fiber都有与其对应的Fiber
  //我们称之为 current <==> workInProgress
  //在渲染完成后,会交换位置

  //doubleBuffer Fiber在更新后,不用再重新创建对象,
  // 而是复制自身,并且两者相互复用,用来提高性能

  alternate: Fiber | null,

  // Time spent rendering this Fiber and its descendants for the current update.
  // This tells us how well the tree makes use of sCU for memoization.
  // It is reset to 0 each time we render and only updated when we don't bailout.
  // This field is only set when the enableProfilerTimer flag is enabled.
  actualDuration?: number,

  // If the Fiber is currently active in the "render" phase,
  // This marks the time at which the work began.
  // This field is only set when the enableProfilerTimer flag is enabled.
  actualStartTime?: number,

  // Duration of the most recent render time for this Fiber.
  // This value is not updated when we bailout for memoization purposes.
  // This field is only set when the enableProfilerTimer flag is enabled.
  selfBaseDuration?: number,

  // Sum of base times for all descedents of this Fiber.
  // This value bubbles up during the "complete" phase.
  // This field is only set when the enableProfilerTimer flag is enabled.
  treeBaseDuration?: number,

  // Conceptual aliases
  // workInProgress : Fiber ->  alternate The alternate used for reuse happens
  // to be the same as work in progress.
  // __DEV__ only
  _debugID?: number,
  _debugSource?: Source | null,
  _debugOwner?: Fiber | null,
  _debugIsCurrentlyTiming?: boolean,
  _debugNeedsRemount?: boolean,

  // Used to verify that the order of hooks does not change between renders.
  _debugHookTypes?: Array<HookType> | null,
|};

解析: 熟悉Fiber的含义和属性含义就可以了,之后讲React更新的时候,还会提到它。

GitHub: https://github.com/AttackXiaoJinJin/reactExplain/blob/master/react16.8.6/packages/react-reconciler/src/ReactFiber.js

三、总结 (1)Fiber的三个作用 (2)单向遍历 (3)props.children连接 (4)子指父 (5)doubleBuffer


本文分享自微信公众号 - webchen(webchen1995)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Sqlite3+Express.js+React实现在线答题(上)

    将word格式的题库转为txt格式,导入至sqlite3中,使用Express.js做服务端提供json格式数据,使用React做前端获取服务端数据。本文为第一...

    fanzhh
  • 2019年要学习的前5个前端开发主题

    TypeScript是2018年最令人惊讶的增长故事之一.npm调查发现,有46%的npm用户使用TypeScript。它现在不仅是使用Angular的默认语言...

    技术小工
  • 以 React 的方式思考

    React 很棒的一点是创建应用中引导你思考的过程。这篇文档中,我们将通过运用React创建一个产品搜索列表,来引导你熟悉这个思考过程。

    fanzhh
  • React V16.9来了 无痛感升级 加入性能检测 【译-真香】

    React 16.9不包含重大更改,旧版本名称在此版本中继续有效。但是,当您使用任何旧名称时,您将看到警告:

    Peter谭金杰
  • React.js 概念与入门

    React 是Facebook开发的UI库,这个库有助于创建交互式、基于状态、可重用的UI部件。React已经应用与Facebook,Instagram全部是用...

    fanzhh
  • React人机验证控件

    在使用React做前端,用户注册页面因为要短信验证,短信服务商要求加人机验证,于是我找到了 react-captcha-generator。

    fanzhh
  • Django REST + React + Redux 上传文件

    fanzhh
  • 从0实现一个React(一):JSX和虚拟DOM

    React是前端最受欢迎的框架之一,解读其源码的文章非常多,但是我想从另一个角度去解读React:从零开始实现一个React,从API层面实现React的大部分...

    前端迷
  • 一个9年开发经验程序员的分享,从零基础到专业工程师?

    一次规划局的项目,规划局的职员很是钦佩地说:“你们真了不起,在电脑上敲敲键盘就能做出软件来。”

    老九君
  • 使用Sqlite3+Express.js+React实现在线答题(下)

    在使用Sqlite3+Express.js+React实现在线答题(上)中,我们将题目数据从word文件转为txt格式并导入到sqlite3中,使用Expres...

    fanzhh

扫码关注云+社区

领取腾讯云代金券