初学React高阶函数

React 和高阶函数的定义就不说了，主要是记录下小白看 react 库时大佬用高阶组件时看不懂的地方。

export const createCesiumComponent = <E, P, C, CC = {}, R = {}>(opts: CesiumComponentOption<E, P, C, CC, R>,): CesiumComponentType<E, P, C> => {
  class CesiumComponent extends React.PureComponent<WithContextProps<P, C>> {......}

先看 class CesiumComponent extends React.PureComponent<WithContextProps<P,C>>

React.PureComponent 与 React.Component 几乎完全相同，但 React.PureComponent 通过 prop 和 state 的浅对比来实现 shouldComponentUpate()。
如果 React 组件的 render() 函数在给定相同的 props 和 state 下渲染为相同的结果，在某些场景下你可以使用 React.PureComponent 来提升性能。
React.PureComponent 的 shouldComponentUpdate() 只会对对象进行浅对比。如果对象包含复杂的数据结构，它可能会因深层的数据不一致而产生错误的否定判断 (表现为对象深层的数据已改变视图却没有更新, 原文：false-negatives)。当你期望只拥有简单的 props 和 state 时，才去继承 PureComponent，或者在你知道深层的数据结构已经发生改变时使用 forceUpate()。或者，考虑使用 不可变对象 来促进嵌套数据的快速比较。
此外,React.PureComponent 的 shouldComponentUpate() 会忽略整个组件的子级。请确保所有的子级组件也是”Pure”的。

原文链接
PureComponent 理解了，看 Context，withContext，涉及
Context 提供了一种在组件之间共享此类值的方式，而不必通过组件树的每个层级显式地传递 props
接着看 CesiumComponentOption 接口

export interface CesiumComponentOption<E, P, C, CC = {}, R = {}> {
  name: string;
  create: (
    cesiumProps: Readonly<P>,
    props: Readonly<P>,
    context: Readonly<C>,
    ref?: React.RefObject<R>,
  ) => E | [E, any];
  mount?: (element: E, context: Readonly<C>, props: Readonly<P>, ref?: React.RefObject<R>) => void;
  unmount?: (
    element: E,
    context: Readonly<C>,
    props: Readonly<P>,
    ref: React.RefObject<R> | undefined,
    state: any,
  ) => void;
  render?: (
    element: E | undefined,
    props: Readonly<P> & Readonly<{children?: React.ReactNode}>,
    mounted: boolean,
    ref: React.RefObject<R> | undefined,
  ) => React.ReactNode;
  update?: (element: E, props: Readonly<P>, prevProps: Readonly<P>, context: Readonly<C>) => void;
  provide?: (element: E, props: Readonly<P>, state: any) => CC;
  cesiumProps?: (keyof P)[];
  cesiumReadonlyProps?: (keyof P)[];
  cesiumEventProps?: EventkeyMap<E, keyof P>;
  setCesiumPropsAfterCreate?: boolean;
  noRender?: boolean;
  createRef?: boolean;
  defaultProps?: Partial<P>;
}

看这个

cesiumProps: Readonly<P>,
    props: Readonly<P>,
    context: Readonly<C>,
    ref?: React.RefObject<R>,

泛型大概知道了，看 create,mount,unmount,update, 这看起来是定义了生命周期。
后面就不用看了，大概就是有这样的一个组件：Clock，它是通过高阶组件 createCesiumComponent 创建的，高阶组件在 Clock 本身有的
componentDidMount,componentDidUpdate,componentWillUnmount 中加了料，又封装了一套生命周期。
后面的看懂了再分享。