React 16 中的 Fiber 对象和 React Element 有什么区别？答案

【问题标题】：What is the difference between a fibre object in React 16 and a React Element?React 16 中的 Fiber 对象和 React Element 有什么区别？
【发布时间】：2018-12-31 22:15:23
【问题描述】：

在this 链接上（很多人指的是，为了理解React 16 的架构）提到：

React 中的 Elements 也是包含组件信息的普通 JS 对象，具有以下四个 props：

{
  type,
  ref,
  props,
  key
}

我现在想知道 Component、Element、Instance 和这个新的 Fiber 对象之间的明显区别。另外，这个新的 Fiber 对象是否与图片中提到的具有更多新属性的旧 Element 对象相同？

【问题讨论】：

对您为什么想了解 Fiber 感到好奇？通常你不需要它来开发 webapps。如果您提供此上下文，我认为您可能会得到更好的答案。
另外，我发现官方文档（尤其是 React）是寻找这类东西的好地方。例如Component vs Element vs Instance & What is React Fiber 指向 github 帖子
@dubes 除非您了解它的所有来龙去脉，否则您不会真正利用语言或框架的力量。出于同样的原因，我猜你讨厌 20 世纪最美丽的编程语言 JavaScript。 ;-)
嗯...不。我喜欢 JavaScript 和 react。但我怀疑人们将他们的解决方案基于框架的“内部”而不是暴露的 api。 React 社区现在正面临着这个问题。
好吧..在这种情况下，您可能需要更新 StackOverflow 的个人资料描述。 :)

标签： javascript reactjs react-16 react-fiber

【解决方案1】：

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

React Element 是一个对象，它描述了您想在屏幕上看到的内容。基本上是 render 方法出来的。

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

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

【讨论】：

React Element 不代表渲染的组件。相反，它代表一个要被渲染的组件。
对不起，你是对的。我想说的是，它是从 render 方法返回的。不，它实际上是屏幕上的内容。
在你的描述中，我不太喜欢“待渲染”。您拥有一个元素这一事实并不意味着它将被渲染。所以，我最好将我的定义更改为文档中的定义。
是的，这更有意义。谢谢。 :)

【解决方案2】：

纤程是一个 JavaScript 对象，其中包含有关组件及其输入和输出的信息。它与 instance 具有一对一的关系。它管理实例的工作。纤程使用属性 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 reconciler 使用 react 元素为组件实例生成一个 Fiber 节点。所以你可以把它想象成一个具有时间管理超能力的反应元素?。

【讨论】：