这次给大家带来react高阶组件使用详解，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，我们都可以得到。
原则
不要修改原组件，高阶组件只是通过组合的方式将子组件包装在容器组件中，是一个无副作用的纯函数。
不要在render方法内部使用高阶组件。
高阶组件可以向组件添加功能，但是不应该大幅度地改变功能。
为了方便调试，选择一个显示名称，表示它是高阶组件的结果。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
如何操作js实现html中placeholder属性提示文字
如何使用js倒计时恢复按钮点击功能
以上就是react高阶组件使用详解的详细内容。