React API

1. React.createElement()：创建并返回指定类型的新React元素

React.createElement(
  type,
  [props],
  [...children]
)

2. React.cloneElement()：以 element 元素为样板克隆并返回新的 React 元素

React.cloneElement(
  element,
  [props],
  [...children]
)

返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。新的子元素将取代现有的子元素，而来自原始元素的 key 和 ref 将被保留。cloneElement()几乎等同于

<element.type {...element.props} {...props}>
  {children}
</element.type>

3. React.createContext()：创建一个 Context 对象

interface Context<T> {
      Provider: Provider<T>;
      Consumer: Consumer<T>;
      displayName?: string;
}

 function createContext<T>(
     defaultValue: T,
): Context<T>;

MyContext.Provider允许消费订阅context变化
MyContext.Consumer/React.useContext/this.context使用订阅context变更
context使用介绍

4. React.isValidElement()：验证对象是否为 React 元素，返回值为 true 或 false

function isValidElement<P>(
object: {} | null | undefined
): object is ReactElement<P>;

5. React.Children：提供了用于处理 this.props.children 不透明数据结构的实用方法

是一个对象，包括map/forEach/count/only/toArray几个属性

   interface ReactChildren {
        map<T, C>(children: C | C[], fn: (child: C, index: number) => T):
            C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;
        forEach<C>(children: C | C[], fn: (child: C, index: number) => void): void;
        count(children: any): number;
        only<C>(children: C): C extends any[] ? never : C;
        toArray(children: ReactNode | ReactNode[]): Array<Exclude<ReactNode, boolean | null | undefined>>;
    }
const Children: ReactChildren;

• React.Children.map(children,function(child,index))
  在 children 里的每个直接子节点上调用一个函数，并将 this 设置为 thisArg。如果 children 是一个数组，它将被遍历并为数组中的每个子节点调用该函数。如果子节点为 null 或是 undefined，则此方法将返回 null 或是 undefined，而不会返回数组
• React.Children.forEach(children,function(child,index))
  与React.Children.map()类似，但不会返回一个数组
• React.Children.count(children)
  返回 children 中的组件总数量，等同于通过 map 或 forEach 调用回调函数的次数。
• React.Children.only(children)
  验证 children 是否只有一个子节点（一个 React 元素），如果有则返回它，否则此方法会抛出错误

  try {
        React.Children.only(children);
    } catch (err) {
        React.Children.forEach(children, child => {
          console.log(20, child);
        });
    }

• React.Chidlren.toArray(children)
  将 children 这个复杂的数据结构以数组的方式扁平展开并返回，并为每个子节点分配一个 key。当你想要在渲染函数中操作子节点的集合时，它会非常实用，特别是当你想要在向下传递 this.props.children 之前对内容重新排序或获取子集时

6. React.Fragment：能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素

可以简写为：<></>

7. React.createRef()/React.forwardRef()

React.createRef(): 类组件中创建Refs
React.forwardRef()：是一个高阶组件，接受一个函数组件，返回一个新组件，新的组件中第二个参数为ref
详细内容

8.React.lazy/React.Suspense

React.lazy() :定义一个动态加载的组件
在React.Suspense 组件中渲染 lazy 组件

// 该组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // 显示 <Spinner> 组件直至 OtherComponent 加载完成
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

fallback 属性接受任何在组件加载过程中想展示的 React 元素

9. React.Component/React.PureComponent/React.memo()

• React.Component： 定义 React 类组件的基类
• React.PureComponent：React.Component相似。区别在于React.Component并未实现 shouldComponentUpdate()，React.PureComponent中以浅层对比 prop 和 state 的方式来实现了该函数。
• React.memo：是一个高阶组件，通过记忆组件渲染结果的方式（浅对比props）来提高组件的性能表现。
  React.memo仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer或 useContext的 Hook，当 context 发生变化时，它仍会重新渲染。支持第二个参数，传入自定义的比较函数。

10. 各种Hook

useState / useEffect / useContext / useReducer / useCallback / useMemo / useRef / useImperativeHandle / useLayoutEffect / useDebugValue