react 高阶组件的应用

一、什么是高阶组件

高阶组件其实就是一个函数，他会接收一个组件作为参数并返回一个经过改造后的组件

二、高阶组件的实现

1. 属性代理

属性代理是最常见的高阶组件实现方式，它实际上是使用组合的方式，通过将被包裹组件，包裹在容器组件中实现功能。

1.1 提取原始组件的state状态

function myHOC(WrappedComponent) {
  return class PP extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        name: ''
      }
      this.onNameChange = this.onNameChange.bind(this)
    }
    onNameChange(e) {
      this.setState({
        name: e.target.value
      })
    }
    render() {
      const newProps = {
        value: this.state.name,
        onChange: this.onNameChange
      }
       return 
    }
  }
}

//使用方式如下
@myHOC
class Example extends React.Component {
  render() {
    //使用myHOC装饰器之后，组件的props被添加了value属性和onChange属性
    return 
  }
}

1.2 获取原始组件的refs引用

通过属性代理实现高阶组件时，我们往往会发现这样一个问题：此时，通过ref，我们无法获取被高阶组件包装的原始组件，而是访问到的外层包裹的容器组件。

我们知道，ref属性可以设置回调函数，当组件被挂载后，该回调函数被立即执行，回调函数的参数为该组件的具体实例。在该回调函数中，可以立即使用组件，或者把它的引用保存起来供将来使用

那么为了处理高阶组件ref获取原始组件的问题，我们需要作如下的一层中转处理：

function myHOC(WrappedComponent) {
  return class Mytest extends React.Component {
    // 实现 HOC 不同的命名
    static displayName = `HOC(${WrappedComponent.displayName})`;

    /*获取被包裹的原始组件的实例*/
    getWrappedInstance() {
      return this.wrappedInstance;
    }

    // 这里的参数为被高阶组件包裹的原始组件的实例，在此将该实例存储起来
    setWrappedInstance(ref) {
      this.wrappedInstance = ref;
    }

    /*在组件被挂载后，会立即调用setWrappedInstance方法，参数为原始组件的具体实例*/
    render() {
      return 
    }
  }
}

/*用高阶组件进行包裹处理*/
@myHOC
class Example extends React.Component {
  static displayName = 'Example';
  handleClick() { ... }
  ...
}

class App extends React.Component {
  handleClick() {
    /*这里this.refs.example获取到的是外层高阶组件，而不是被包裹的原始组件。因而可以调用高阶组件上的getWrappedInstance方法，获取到原始组件实例后，再调用其handleClick方法*/
    this.refs.example.getWrappedInstance().handleClick();
  }
  render() {
    return (
      <div>
        按钮
        
      </div>  
    );
  }
}

2. 反向继承

反向继承是使用一个函数接受一个组件作为参数传入，并返回了一个继承了该传入组件的类组件

const HOC = (WrappedComponent) => {
  return class extends WrappedComponent {
    render() {
      return super.render();
    }
  }
}

相比于属性代理的方式，通过方向继承的方式实现高阶组件时。

1）可以直接拿到原始组件的state/refs
2）通过super.render()方法，可以对原始组件进行渲染劫持
3）可以对原始组件的生命周期进行劫持

对比：

属性代理，有利于从外部操作原始组件，可以操作的是props

反向继承，从继承的角度出发，可以从内部去操作原始组件，也就是操作原始组件内部的state，render，生命周期

三、高阶组件用途

1.抽取重复代码，实现组件复用

// HOC
import React from 'react';
const withFetchingHOC = (WrappedComponent, fetchingMethod, defaultProps) => {
  return class extends React.Component {
    async componentDidMount() {
      const data = await fetchingMethod();
      this.setState({
        data,
      });
    }
    
    render() {
      return (
        
      );
    }
  }
}

// views/PageA.js
import React from 'react';
import withFetchingHOC from '../hoc/withFetchingHOC';
import fetchMovieListByType from '../lib/utils';
import MovieList from '../components/MovieList';
const defaultProps = {emptyTips: '暂无喜剧'}

export default withFetchingHOC(MovieList, fetchMovieListByType('comedy'), defaultProps);

// views/PageB.js
import React from 'react';
import withFetchingHOC from '../hoc/withFetchingHOC';
import fetchMovieListByType from '../lib/utils';
import MovieList from '../components/MovieList';
const defaultProps = {emptyTips: '暂无动作片'}

export default withFetchingHOC(MovieList, fetchMovieListByType('action'), defaultProps);;

2.权限控制

对某个项目中的若干页面增加白名单功能，如果不在白名单中的用户访问这些页面时进行文案提示。

此时，高阶组件就很适合用在这里。既可以使鉴权代码不重复写在不同的页面逻辑中，而且也方便日后对其他页面增加或去除鉴权逻辑。

import React from 'react';
import { whiteListAuth } from '../lib/utils'; // 鉴权方法

/**
 * 白名单权限校验
 * @param WrappedComponent
 * @returns {AuthWrappedComponent}
 * @constructor
 */
function AuthWrapper(WrappedComponent) {
  return class AuthWrappedComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        permissionDenied: -1,
      };
    }
    
    async componentDidMount() {
      try {
        await whiteListAuth(); // 请求鉴权接口
        this.setState({
          permissionDenied: 0,
        });
      } catch (err) {
        this.setState({
          permissionDenied: 1,
        });
      }
    }
    
    render() {
      if (this.state.permissionDenied === -1) {
        return null; // 鉴权接口请求未完成
      }else if (this.state.permissionDenied) {
        return <div>功能即将上线，敬请期待~</div>;
      }else{
        return ;
      }
    }
  }
}

export default AuthWrapper;

通过使用高阶组件，使得鉴权与业务完全解藕。只需要将需要加权限控制的页面组件作为参数传给高阶组件AuthWrapper即可

3.通过反向继承劫持原始组件的生命周期，进行一些渲染性能追踪

import React from 'react';
// Home 组件
class Home extends React.Component {
  render () {
    return (<h1>Hello World.</h1>);
  }
}

// HOC
function withTiming (WrappedComponent: any) {
  let start: number, end: number;

  return class extends WrappedComponent {
    constructor (props: any) {
      super(props);
      start = 0;
      end = 0;
    }
    componentWillMount () {
      if (super.componentWillMount) {
        super.componentWillMount();
      }
      start = +Date.now();
    }
    componentDidMount () {
      if (super.componentDidMount) {
        super.componentDidMount();
      }
      end = +Date.now();
      console.error(`${WrappedComponent.name} 组件渲染时间为 ${end - start} ms`);
    }
    render () {
      return super.render();
    }
  };
}

export default withTiming(Home);

总结：合理的使用高阶组件可以增强代码的复用性和灵活性，提升开发效率。