React 16中的纤维对象和React Element之间有什么区别？

Question

在这个链接上（作为很多人提到的，为了解React 16的架构），它被提及：

甚至React中的Elements都是普通的JS对象，它包含有关组件的信息，具有以下四个道具：

{
  type,
  ref,
  props,
  key
}

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

Answer 1

光纤是一个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协调器使用react元素为组件实例生成光纤节点。 因此，您可以将其视为具有时间管理超能力的反应元素。

Answer 2

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

React Element是一个描述您希望在屏幕上看到的内容的对象。 基本上是渲染方法的结果。

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

React Fiber（大写）的巨大优势在于调度。 React现在可以暂停，允许其他事情发生，并恢复到它离开的地方。 为此，React需要知道它离开的位置以及接下来需要做什么。 这就是光纤允许的（在其他事物之间）。