跳到主要内容

React Symbols

一、作用​

二、导出的常量​

1. 旧版 React 元素类型​

// ATTENTION
// When adding new symbols to this file,
// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
//
// 注意
// 在向此文件添加新符号时，
// 请同时考虑将其添加到 'react-devtools-shared/src/backend/ReactSymbols'

// The Symbol used to tag the ReactElement-like types.
// 用于标记类似 ReactElement 类型的符号。
export const REACT_LEGACY_ELEMENT_TYPE: symbol = Symbol.for('react.element');

2. React 元素类型​

export const REACT_ELEMENT_TYPE: symbol = renameElementSymbol
  ? Symbol.for('react.transitional.element')
  : REACT_LEGACY_ELEMENT_TYPE;

3. React 门户类型​

export const REACT_PORTAL_TYPE: symbol = Symbol.for('react.portal');

4. React 片段类型​

export const REACT_FRAGMENT_TYPE: symbol = Symbol.for('react.fragment');

5. React 严格模式类型​

export const REACT_STRICT_MODE_TYPE: symbol = Symbol.for('react.strict_mode');

6. React 分析器类型​

export const REACT_PROFILER_TYPE: symbol = Symbol.for('react.profiler');

7. React 消费者类型​

export const REACT_CONSUMER_TYPE: symbol = Symbol.for('react.consumer');

8. React 上下文类型​

export const REACT_CONTEXT_TYPE: symbol = Symbol.for('react.context');

9. React 前置 ref 类型​

export const REACT_FORWARD_REF_TYPE: symbol = Symbol.for('react.forward_ref');

10. React 挂起类型​

export const REACT_SUSPENSE_TYPE: symbol = Symbol.for('react.suspense');

10. React 挂起列表类型​

export const REACT_SUSPENSE_LIST_TYPE: symbol = Symbol.for(
  'react.suspense_list',
);

11. React memo 类型​

export const REACT_MEMO_TYPE: symbol = Symbol.for('react.memo');

12. React 懒惰类型​

export const REACT_LAZY_TYPE: symbol = Symbol.for('react.lazy');

13. React 范围类型​

export const REACT_SCOPE_TYPE: symbol = Symbol.for('react.scope');

14. React 活动类型​

export const REACT_ACTIVITY_TYPE: symbol = Symbol.for('react.activity');

15. React 旧隐藏类型​

export const REACT_LEGACY_HIDDEN_TYPE: symbol = Symbol.for(
  'react.legacy_hidden',
);

16. React 追踪标记类型​

export const REACT_TRACING_MARKER_TYPE: symbol = Symbol.for(
  'react.tracing_marker',
);

17. React 备忘缓存哨兵类型​

export const REACT_MEMO_CACHE_SENTINEL: symbol = Symbol.for(
  'react.memo_cache_sentinel',
);

18. React 视图切换类型​

export const REACT_VIEW_TRANSITION_TYPE: symbol = Symbol.for(
  'react.view_transition',
);

19. 异步迭代器​

export const ASYNC_ITERATOR = Symbol.asyncIterator;

20. REACT 乐观键（Symbol）​

export const REACT_OPTIMISTIC_KEY: ReactOptimisticKey = (Symbol.for(
  'react.optimistic_key',
): any);

21. React 乐观键​

// This is actually a symbol but Flow doesn't support comparison of symbols to refine.
// We use a boolean since in our code we often expect string (key) or number (index),
// so by pretending to be a boolean we cover a lot of cases that don't consider this case.
//
// 这实际上是一个符号，但 Flow 不支持通过符号进行比较来进行类型精炼。我们使用布尔值，因为在我们的代码中我们
// 通常期望是字符串（键）或数字（索引），所以通过假装它是布尔值，我们可以涵盖许多未考虑这种情况的情况。
export type ReactOptimisticKey = true;

三、获取迭代器函数​

export function getIteratorFn(maybeIterable: ?any): ?(() => ?Iterator<any>) {
  if (maybeIterable === null || typeof maybeIterable !== 'object') {
    return null;
  }
  const maybeIterator =
    (MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL]) ||
    maybeIterable[FAUX_ITERATOR_SYMBOL];
  if (typeof maybeIterator === 'function') {
    return maybeIterator;
  }
  return null;
}

常量​

// 可能迭代器符号
const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
// 伪迭代器符号
const FAUX_ITERATOR_SYMBOL = '@@iterator';