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传递注意）
大概了解反向继承的原理，但是要谨慎使用

￥为站长发电

链接: https://www.fly63.com/article/detial/11370