React 16中的纤维对象和React元素有什么区别？

Question

您可以在此链接上找到很多人用来理解React 16架构的内容。这里提到：

在React中，即使元素是纯JS对象，它也包含有关组件的信息，并具有以下四个props:

{
  type,
  ref,
  props,
  key
}

我现在想要了解组件(Component)、元素(Element)、实例(Instance)和这个新的Fiber对象之间的明显区别。此外，这个新的Fiber对象仅仅是旧的Element对象加上一些新属性而已吗？

- UtkarshPramodGupta

---

你想知道Fiber是为什么吗？一般来说，开发Web应用程序不需要它。如果你提供更多的上下文信息，我认为你会得到更好的答案。 - dubes

此外，我发现官方文档（特别是React的文档）是寻找这些信息的好地方。例如组件 vs 元素 vs 实例和什么是React Fiber，这些链接会带你到Github的文章。 - dubes

@dubes 除非你了解一门语言或框架的所有细节，否则你无法真正发挥它们的威力。我猜你讨厌20世纪最美丽的编程语言JavaScript，也是因为同样的原因吧。;-) - UtkarshPramodGupta

嗯...不行。我喜欢JavaScript和React。但是我对那些基于框架“内部”而非公开API的解决方案持怀疑态度。React社区现在正在面临这个问题。 - dubes

那么，你可能需要更新一下你的StackOverflow个人资料描述。 :) - UtkarshPramodGupta

Answer 1

一根fiber是一个JavaScript对象，它包含有关组件、其输入和输出的信息。它与实例具有一对一的关系。它管理实例的工作。该fiber使用属性stateNode跟踪实例。它还具有有关其与其他实例的关系的信息。 从这里的源代码： https://github.com/facebook/react/blob/9ea4bc6ed607b0bbd2cff7bbdd4608db99490a5f/packages/react-reconciler/src/ReactFiber.js#L406

export function createFiberFromElement(
  element: ReactElement,
  mode: TypeOfMode,
  expirationTime: ExpirationTime,
): Fiber {
  let owner = null;
  if (__DEV__) {
    owner = element._owner;
  }

  let fiber;
  const type = element.type;
  const key = element.key;
  const pendingProps = element.props;

  let fiberTag;
  if (typeof type === 'function') {
  ....
  ....
  ....

我可以理解React Fiber调和器使用react元素来为组件实例生成一个fiber节点。因此，您可以将其视为具有时间管理超能力的react元素。

- Atul

Answer 2

区别不在于结构的属性，而在于它们所代表的内容。

React元素是描述您想在屏幕上看到的对象。基本上是从渲染方法中输出的内容。

React fiber（小写）是表示工作单元的数据结构。

React Fiber（大写）的巨大优势在于调度。现在React可以暂停，以允许其他事情发生，并恢复到离开的地方。为此，React需要知道它离开了哪里以及接下来需要做什么。这就是纤维所允许的（除其他事项外）。

- Johnny Zabala

---

React元素并不代表一个已渲染的组件，而是代表一个将要被渲染的组件。 - UtkarshPramodGupta

抱歉，你是对的。我想说的是这是从渲染方法返回的内容，而不是实际显示在屏幕上的内容。 - Johnny Zabala

在您的描述中，我不太喜欢“要呈现”的说法。拥有一个元素并不意味着它将被呈现。因此，我更愿意将我的定义更改为文档中的定义。 - Johnny Zabala

是的，这样更有意义。谢谢。 :) - UtkarshPramodGupta