React：FiberNode 与 React 组件之间的对应关系

让我们以一个简单的 React 组件为例,结合代码说明 FiberNode 与 React 组件之间的对应关系。

下面是一个简单的 React 组件示例:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

这个组件是一个简单的计数器,它使用 useState Hook 来管理状态,并渲染一个显示当前计数值的 <p> 元素和一个增加计数值的 <button> 元素。

当 React 渲染这个组件时,它会创建一个对应的 FiberNode 对象。让我们分析 FiberNode 与组件之间的关系:

组件类型

• 对于这个函数组件,FiberNode 的 type 属性将指向 Counter 函数本身。

组件属性

• 由于这个组件没有接收任何属性,FiberNode 的 pendingProps 和 memoizedProps 属性都将是一个空对象 {}。

组件状态

• 这个组件使用了 useState Hook,因此 FiberNode 的 memoizedState 属性将存储 Hook 的状态信息。
• 在这个例子中,memoizedState 属性可能类似于以下结构:

{
  baseState: 0,
  queue: {
    pending: null,
    dispatch: [Function],
    lastRenderedReducer: [Function],
    lastRenderedState: 0
  },
  memoizedState: 0,
  next: null
}

组件实例

• 对于函数组件,没有组件实例,因此 FiberNode 的 stateNode 属性将为 null。

子组件

• 这个组件包含两个子元素:<p> 和 <button>。
• React 将为这两个子元素创建对应的 FiberNode 对象,并通过 child 和 sibling 属性将它们链接起来。
• FiberNode 的结构可能类似于以下形式:

Counter FiberNode
  |
  |-- child --> <p> FiberNode
                  |
                  |-- sibling --> <button> FiberNode
                  

副作用

• 当组件发生更新时,React 会根据更新的内容设置 FiberNode 的 effectTag 属性,表示需要执行的副作用。
• 例如,当点击 "Increment" 按钮时,React 会将 <p> 元素对应的 FiberNode 的 effectTag 设置为 "Update",表示需要更新该元素的文本内容。

通过这个示例,我们可以看到 FiberNode 与 React 组件之间的紧密关系。FiberNode 对象存储了组件的类型、属性、状态、子组件等信息,并在 React 的协调过程中用于管理组件的更新和渲染。

理解 FiberNode 与 React 组件之间的对应关系,可以帮助我们更好地理解 React 的工作原理,并在开发和优化 React 应用程序时做出更明智的决策。