React 16中的纤维对象和React元素有什么区别?

fiber是一个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 fiber(小写)是表示工作单元的数据结构。

React Fiber(大写)的最大优点是调度React now可以暂停,允许其他事情发生,然后恢复到原来的位置因为这个反应需要知道它离开了哪里,接下来需要做什么这是一种纤维(在其他东西之间)所允许的。