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

Question

Here on this link (as a lotta people referring to, for understanding React 16's architecture) it is mentioned:

Even Elements in React are plain JS objects that contains info about the component, having the following four props:

{
  type,
  ref,
  props,
  key
}

I just now want to know a clear difference between Component, Element, Instance and this new Fiber object. Also, is this new Fiber object just the same old Element object with some more new properties as mentioned in the picture?

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是一个对象，它描述您想要在屏幕上看到的内容。基本上是render方法的结果。

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

React Fiber（大写）的最大优点是调度。现在，React可以暂停，以允许其他事情发生，然后恢复到它原来的位置。为此，React需要知道它在哪里以及下一步需要做什么。这就是光纤所允许的（在其他事物之间）。