React学习笔记之高阶组件

是什么

高阶组件是一个函数,能够接受一个组件并返回一个新的组件。没有任何副作用。

为什么用

封装并抽离组件的通用逻辑,让此部分逻辑在组件间更好地被复用。

如何用
//hoc为我们的高阶组件,可以使用es7装饰器语法来使用高阶组件
//当然也可以不用es7,如:let hocHello = hoc(Hello),只是es7的语法更优雅一些。
//高阶组件可以叠加使用,可以对一个组件使用多个高阶组件
@hoc                         
class Hello extends React.Component {
 //
}
如何实现
  • 属性代理
    下面的例子是最简单的一个实现
function hoc(ImportComponent) {
  return class Hoc extends React.Component {
    static displayName = `Hoc(${getDisplayName(ImportComponent)})`  //displayName是设置高阶组件的显示名称
    render() {
      return <ImportComponent {...this.props} />
    }
  }
}

function getDisplayName(Component) {
  return Component.displayName || Component.name || "Component"
}

作用:操作prop,refs获取组件实例
注意事项:静态方法无法传递,必须手动复制;refs无法传递。

  • 反向继承
    下面的例子是最简单的一个实现

    export function hoc(ImportComponent) {
      return class Hoc extends ImportComponent {
        static displayName = `Hoc(${getDisplayName(ImportComponent)})`
        render() {
          return super.render()
        }
      }
    }
    

    作用: 操作state;渲染劫持(操作它的render函数)
    注意事项:通过继承ImportComponent,除了一些静态方法,包括生命周期,state,各种function,我们都可以得到。

  • 原则

    1. 不要修改原组件,高阶组件只是通过组合的方式将子组件包装在容器组件中,是一个无副作用的纯函数。
    2. 不要在render方法内部使用高阶组件。
    3. 高阶组件可以向组件添加功能,但是不应该大幅度地改变功能。
    4. 为了方便调试,选择一个显示名称,表示它是高阶组件的结果。
    原文作者:tiancai啊呆
    原文地址: https://www.jianshu.com/p/bd22c0a479c5
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞