React开发高级篇 - 高阶组件HOC技术总结系列二

HOC 初体验

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。
简单点说，就是组件作为参数，返回值也是组件的函数，它是纯函数，不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数，没有副作用。

使用HOC的原因

1. 抽取重复代码，实现组件复用：相同功能组件复用
2. 条件渲染，控制组件的渲染逻辑（渲染劫持）：权限控制。
3. 捕获/劫持被处理组件的生命周期，常见场景：组件渲染性能追踪、日志打点。

HOC实现方式

属性代理

使用组合的方式，将组件包装在容器上，依赖父子组件的生命周期关系来；

1. 返回stateless的函数组件
2. 返回class组件

操作props

// 可以通过属性代理，拦截父组件传递过来的porps并进行处理。

// 返回一个无状态的函数组件
function HOC(WrappedComponent) {
   
   
  const newProps = {
   
    type: 'HOC' };
  return props => <WrappedComponent {
   
   ...props} {
   
   ...newProps}/>;
}

// 返回一个有状态的 class 组件
function HOC(WrappedComponent) {
   
   
  return class extends React.Component {
   
   
    render() {
   
   
      const newProps = {
   
    type: 'HOC' };
      return <WrappedComponent {
   
   ...this.props} {
   
   ...newProps}/>;
    }
  };
}

• 抽象State

// 通过属性代理无法直接操作原组件的state，可以通过props和cb抽象state
function HOC(WrappedComponent) {
   
   
  return class extends React.Component {
   
   
    constructor(props) {
   
   
      super(props);
      this.state = {
   
   
        name: '',
      };
      this.onChange = this.onChange.bind(this);
    }
    
    onChange = (event) => {
   
   
      this.setState({
   
   
        name: event.target.value,
      })
    }
    
    render() {
   
   
      const newProps = {
   
   
        name: {
   
   
          value: this.state.name,
          onChange: this.onChange,
        },
      };
      return <WrappedComponent {
   
   ...this.props} {
   
   ...newProps} />;
    }
  };
}

// 使用
@HOC
class Example extends Component {
   
   
  render() {
   
   
    return <input name="name" {
   
   ...this.props.name} />;
  }
}

• 通过Props来进行实现条件渲染

// 通过props来控制是否渲染及传入数据
import * as React from 'react';

function HOC (WrappedComponent) {
   
   
  return (props) => (
  <div>
    {
   
   
      props