React 高级组件
1. 理解
高阶组件（HOC）是 react 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React api 的一部分，它是一种基于 React 的组合特性而形成的设计模式
高阶组件是参数为组件，返回值为新组件的函数
2.示例
2.1 场景一 假设有两个组件 在didmount里都会打印一些日志
class Page1 extends React.Component {
componentDidMount() {
/*用console.log来模拟日志打印 实际上这里一般会传到服务器保存*/
console.log('进入page1')；
}
render(){
return <div>page1</div>
}
}
class Page2 extends React.Component {
componentDidMount() {
console.log('进入page2')；
}
render(){
return <div>page2</div>
}
}利用高阶组件实现打印日志行为的复用
function withLog (WrappedComponent, pageName) {
// 这个函数接收一个组件作为参数
return class extends React.Component {
componentDidMount() {
// 用console.log来模拟日志打印 实际上这里一般会传到服务器保存
console.log(pageName)；
}
render (){
// 此处注意要把this.props继续透传下去
return <WrappedComponent {...this.props} />;
}
}
}此时可以解耦掉打印日志的逻辑和具体组件的关联:
class Page1 extends React.Component {
/* 不必保留打印日志的逻辑了*/
render(){
return <div>page1</div>
}
}
class Page2 extends React.Component {
/* 不必保留打印日志的逻辑了*/
render(){
return <div>page2</div>
}
}
// 使用时
const Page1WithLog = withLog(Page1);
const Page2WithLog = withLog(Page2);这样，就实现了一个简单的高阶组件！
请注意，HOC 不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数，没有副作用。
2.2 高阶组件组合使用
假设现在有一个权限管理的高级组件 封装了权限校验或者登录状态校验的逻辑
function withCheckPermission (WrappedComponent){
return class extends React.Component {
async componentWillMount() {
const hasPermission = await getCurrentUserPermission();
this.setState({hasPermission});
}
render (){
/* 此处注意要把this.props继续透传下去 */
return (
{this.state.hasPermission ?
<WrappedComponent {...this.props} /> :
<div>您没有权限查看该页面，请联系管理员！</div>}
)
}
}
}checkPermission 函数会检查用户权限，以判断是否允许用户访问当前页面，接下来我们希望给前面 Page1 组件同时加上权限控制和日志打印的功能：
// 当然可以这样写
// 1. 首先附加Log功能
const Page1WithLog = withLog(Page1, 'pageName1');
// 2. 在1的基础上附加CheckPermission功能
const Page1WithLogAndPermission = withCheckPermission(Page1WithLog);
实际上可以直接用 compose 来实现, 这样在使用多个高阶组件时可以更简洁:
// tips: compose(f, g, h) 等同于 (...args) => f(g(h(...args)))
import {compose} from 'redux';
const Page1WithLogAndPermission = compose(
Page1WithLogAndPermission,
(Component) => withLog(Component, 'pageName1'),
);在前面提到过，高阶组件不会破坏被包裹组件本身，因此非常适合灵活使用多个组件，实际上产生的效果很类似于在原有的组件外层再包裹了不同的组件。
2.3 反向继承实现高级组件
回顾一下前面提到高阶组件的时候，提到的一直是 装饰者模式 或者叫属性代理 用新组建包裹旧组件做增强 等关键词，与此不同的是，反向代理的思路是这样的，代码如下
function withHeader (WrappedComponent){
/*请注意这里是extends WrappedComponent而不是extends React.Component*/
return class extends WrappedComponent {
render (){
<div>
<h1 className='demo-header'></h1>
// 注意此处要调用父类的render函数
{ super.render() }
</div>
}
}
}观察这个例子的重点部分: 高阶组件实际上是返回了一个继承WrappedComponent组件的新组件，这也是反向继承命名的由来。在这种模式下，主要可以有两种操作：
渲染劫持，如上图的例子可见，在返回的新组件里其实可以控制WrappedComponent的render结果并且执行各种需要的操作，包括选择性的渲染WrappedComponent的子树
操作 state ，由于在新组件可以通过this访问到WrappedComponent，所以同样可以通过this.state 来修改它。
这种实现高阶组件的方式如果真的要使用，一定要非常谨慎，渲染劫持需要考虑条件渲染（即不完全返回子树）的情况，而操作state也有可能在某些情况下破坏父组件的原有逻辑
3. 总结
高阶组件的本质是一个函数，入参和返回值均为组件，作用是给组件增强某个特定的功能
高阶组件推荐灵活组合的使用方式
使用过程中要记得一些注意事项（不要在render中使用HOC 静态方法一定要记得赋值 refs传递注意）
大概了解反向继承的原理，但是要谨慎使用
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
