React 16 中的 fiber 对象和 React Element 有什么区别？

Question

在 this link 上（正如很多人所指，为了理解 React 16 的架构）提到：

即使是 React 中的 Elements 也是包含组件信息的纯 JS 对象，具有以下四个属性：

{
  type,
  ref,
  props,
  key
}

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

Answer 1

区别不在于结构的属性，而在于它们代表什么。

React 元素是一个对象，它描述了您希望在屏幕上看到的内容。渲染方法基本上是什么。

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

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

Answer 2

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

React 16 中的 fiber 对象和 React Element 有什么区别？

What is the difference between a fibre object in React 16 and a React Element?

javascript

reactjs

react-fiber

react-16