React-StepPitGuide
  • 封面
  • 前言
  • 基础知识
    • 环境配置
      • WebPack 前端打包工具
      • Babel 编译器
      • Node 环境配置
    • 版本说明
    • JSX
    • 组件
    • Child组件
    • 多组件嵌套
    • 组件生命周期
      • 组件生命周期(React16之前)
    • State属性
    • Props属性
    • 类组件
      • React PropTypes
      • React 可复用组件
      • React 事件与数据的双向绑定
      • React 组件DOM操作
      • React 独立组件间共享 Mixins ⚠
      • React 高阶组件(HOC)
        • 继承方式的高阶组件
        • 代理方式的高阶组件
      • React 无状态组件与PureComponent
      • React 容器组件和展示组件
      • setState
    • 函数组件
      • React 函数子组件
      • React Hook
        • useState
        • useEffect
    • 组件样式
      • CSS內联式样
      • CSS模块化
    • 受控与非受控组件
  • 进阶知识
  • React Context
  • React 顶级API
  • React Portal 传送门
  • 应用知识
    • 路由
      • React-Router2
      • React-router4
        • React-router4 结合React-Redux
    • 服务端渲染
    • 性能优化
      • React 组件优化
        • 定制shouldComponentUpdate
        • PureComponent
        • immutablejs存在的意义和使用
      • Redux性能优化
      • React同构
    • 项目应用
      • React 文件组织方式
      • React 模块接口
      • React 合并reducer
      • React 问题
  • 状态管理
    • Flux
    • Redux
      • Redux 使用
      • Redux 异步
      • Redux Chrome插件使用
      • Redux React-Redux
      • Redux applyMiddleware
      • Redux 结合React
      • Redux 自制Redux
      • Redux 自制React-Redux
      • Redux 自制thunk中间件
      • Redux 自制arr中间件
    • Mobx
      • Mobx 思想
    • RXJS
    • immutable
  • 源码思考
    • 简述
    • SimpleReact
    • 虚拟DOM
      • 虚拟DOM概念(React 16前)
      • 虚拟DOM思考(React 16前)
    • 生命周期
    • 事件
    • Fiber
      • 数据结构
      • Scheduler 调度
      • Concurrent 异步渲染
    • Hooks
      • useState
由 GitBook 提供支持
在本页

这有帮助吗?

  1. 源码思考
  2. Fiber

数据结构

// A Fiber is work on a Component that needs to be done or was done. There can
// be more than one per component.
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.
  tag: WorkTag,

  // Unique identifier of this child.
  key: null | string,

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

  // The resolved function/class/ associated with this fiber.
  type: any,

  // The local state associated with this fiber.
  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.
  return: Fiber | null,

  // Singly Linked List Tree Structure.
  child: Fiber | null,
  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:
    | null
    | (((handle: mixed) => void) & {_stringRef: ?string, ...})
    | RefObject,

  // Input is the data coming into process this fiber. Arguments. Props.
  pendingProps: any, // This type will be more specific once we overload the tag.
  memoizedProps: any, // The props used to create the output.

  // A queue of state updates and callbacks.
  updateQueue: mixed,

  // The state used to create the output
  memoizedState: any,

  // Dependencies (contexts, events) for this fiber, if it has any
  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: TypeOfMode,

  // Effect
  flags: Flags,
  subtreeFlags: Flags,
  deletions: Array<Fiber> | null,

  // 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,

  lanes: Lanes,
  childLanes: Lanes,

  // 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.
  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 descendants 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

  _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下一页Scheduler 调度

最后更新于3年前

这有帮助吗?