在夕阳西下时，伴着如夜晚霞，刮起来美丽的秋风，金黄的叶子从树上落下来，像一只只美丽的蝴蝶，翩翩起舞格外美丽。树下，一个个活泼可爱的小朋友正在捡树叶，放在收集本子里，把美丽的秋天永远珍藏。
是什么
高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。
为什么用
封装并抽离组件的通用逻辑，让此部分逻辑在组件间更好地被复用。
如何用
//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方法内部使用高阶组件。
- 高阶组件可以向组件添加功能，但是不应该大幅度地改变功能。
- 为了方便调试，选择一个显示名称，表示它是高阶组件的结果。
到此这篇关于React学习笔记之高阶组件应用就介绍到这了。一个人身边没有人，就容易寂寞。但一个人心里没有人，才会空虚。更多相关React学习笔记之高阶组件应用内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！