初学React高阶函数

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

export const createCesiumComponent = (
  opts: CesiumComponentOption,
): CesiumComponentType => {
  class CesiumComponent extends React.PureComponent> {
    ......
}

先看 class CesiumComponent extends React.PureComponent>

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 {
  name: string;
  create: (
    cesiumProps: Readonly

, props: Readonly

, context: Readonly, ref?: React.RefObject, ) => E | [E, any]; mount?: (element: E, context: Readonly, props: Readonly

, ref?: React.RefObject) => void; unmount?: ( element: E, context: Readonly, props: Readonly

, ref: React.RefObject | undefined, state: any, ) => void; render?: ( element: E | undefined, props: Readonly

& Readonly<{ children?: React.ReactNode }>, mounted: boolean, ref: React.RefObject | undefined, ) => React.ReactNode; update?: (element: E, props: Readonly

, prevProps: Readonly

, context: Readonly) => void; provide?: (element: E, props: Readonly

, state: any) => CC; cesiumProps?: (keyof P)[]; cesiumReadonlyProps?: (keyof P)[]; cesiumEventProps?: EventkeyMap; setCesiumPropsAfterCreate?: boolean; noRender?: boolean; createRef?: boolean; defaultProps?: Partial

; }

看这个

cesiumProps: Readonly

, props: Readonly

, context: Readonly, ref?: React.RefObject,

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

你可能感兴趣的:(react.js,hoc,currying)