В чем разница между волокнистым объектом в React 16 и элементом React?

Question

Здесь по этой ссылке (как часто говорят люди, для понимания архитектуры React 16) упоминается:

Даже элементы в React - это простые JS-объекты, содержащие информацию о компоненте и имеющие четыре следующих параметра:

{
  type,
  ref,
  props,
  key
}

Я только сейчас хочу узнать четкую разницу между Компонентом, Элементом, Экземпляром и этим новым объектом 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') {
  ....
  ....
  ....

Я мог бы понять, что Reac Fiber Recon Filer использует элемент реагирования для генерации волоконного узла для экземпляра компонента. Таким образом, вы можете думать об этом как об элементе реагирования со сверхспособностями в управлении временем.

Answer 2

Разница не в свойствах структур, а в том, что они представляют.

Элемент React - это объект, который описывает то, что вы хотите видеть на экране. В основном то, что выходит методом рендеринга.

Волокно React (нижний регистр) - это структура данных, представляющая единицу работы.

Большим преимуществом React Fiber (в верхнем регистре) является планирование. React теперь может делать паузы, чтобы позволить другим вещам происходить, и возвращаться туда, где он оставался. Для этого Реакция должна знать, где он оставлен и что нужно делать дальше. И это то, что позволяет волокно (между прочим).