React HOC

[ZhangHanwen96]

接受一个组件，返回一个组件

属性代理

我们有一个这样的 List 组件，如果我们想给这个 List 组件加一个 loading 功能，我们可以这么做：

const List = ({ data, isLoading }) => (
  isLoading ?
    <div>我正在加载...</div> :
    <ul>
      {data.map(item => <li key={item.name}>{item.name}</li>)}
    </ul>
)

我们修改一下 List 组件的代码，让它根据 isLoading 的状态来判断是否出现加载动画。这样做不是不可以，但是不够优雅。第一，这么做需要修改原来组件的代码；第二，如果我们有其它组件，比如 Table也需要 loading 功能，我们又需要重复写相同的判断逻辑。我们用高阶组件/函数就可以完美的解决上面两个问题。

const withLoading = BaseComponent => ({ isLoading, ...otherProps }) => (
  isLoading ?
    <div>我正在加载...</div> :
    <BaseComponent {...otherProps} />
)

const LoadingList = withLoading(List)

反向继承