01、介绍

React 高阶组件也叫做 React HOC(High Order Component), 它是react中的高级技术, 用来重用组件逻辑。
但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。
那么在学习高阶组件之前有一个概念我们必须清楚，就是高阶函数。

02、高阶函数

概念：高阶函数是一个函数，它接收函数作为参数或将函数作为输出返回

举个栗子:

接收函数作为参数

function a(x) {
  x();
}
function b() {
  alert('hello');
}

a(b);

将函数作为输出返回

function a() {
  function b() {
    alert('hello');
  }
  return b;
}

a()();

以上函数a就是一个高阶函数, 用法非常简单, 那么实际开发中又有哪些是高阶函数呢？
- Array 的 map 、reduce 、filter 等方法
- Object 的 keys 、values 等方法

03、高阶组件

概念：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件

举个栗子：

// WrappedComponent 就是传入的包装组件
function withHoc(WrappedComponent) {
  return class extends Component {
    render () {
      return (
        <WrappedComponent />
      )
    }
  }
}

withHoc 函数就是一个高阶组件。那么高阶组件到底有什么神奇的魔力，值得我们为之着迷？
开发组件时，我们会遇到相同的功能，使用高阶组件则能减少重复代码

04、高阶组件实训1

目的: 定义高阶组件

组件 Login -- 登陆页面

// 受控组件
class Login extends Component {
  state = {
    username: '',
    password: ''
  }
  
  onUsernameChange = (e) => {
    this.setState({username: e.target.value});
  }
  
  onPasswordChange = (e) => {
    this.setState({password: e.target.value});
  }
  
  login = (e) => {
    // 禁止默认事件
    e.preventDefault();
    // 收集表单数据
    const { username, password } = this.state;
    alert(`用户名: ${username}, 密码: ${password}`);
  }
  
  render () {
    const { username, password } = this.state;
    return (
      <div>
        <h2>登陆</h2>
        <form onSubmit={this.login}>
          用户名: <input type="text" name="username" value={username} onChange={this.onUsernameChange}/> <br/>
          密码: <input type="password" name="password" value={password} onChange={this.onPasswordChange}/> <br/>
          <input type="submit" value="登陆"/>
        </form>
      </div>
    )
  }
}

组件 Register -- 注册页面

// 受控组件
class Register extends Component {
  state = {
    username: '',
    password: '',
    rePassword: ''
  }
  
  onUsernameChange = (e) => {
    this.setState({username: e.target.value});
  }
  
  onPasswordChange = (e) => {
    this.setState({password: e.target.value});
  }
  
  onRePasswordChange = (e) => {
    this.setState({rePassword: e.target.value});
  }
  
  register = (e) => {
    // 禁止默认事件
    e.preventDefault();
    // 收集表单数据
    const { username, password, rePassword } = this.state;
    alert(`用户名: ${username}, 密码: ${password}, 确认密码: ${rePassword}`);
  }
  
  render () {
    const { username, password, rePassword } = this.state;
    return (
      <div>
        <h2>注册</h2>
        <form onSubmit={this.register}>
          用户名: <input type="text" name="username" value={username} onChange={this.onUsernameChange}/> <br/>
          密码: <input type="password" name="password" value={password} onChange={this.onPasswordChange}/> <br/>
          确认密码: <input type="password" name="rePassword" value={rePassword} onChange={this.onRePasswordChange}/> <br/>
          <input type="submit" value="注册"/>
        </form>
      </div>
    )
  }
}

页面效果

我们发现里面重复逻辑实在太多了，尤其是 onXxxChange 函数出现太多，我们先优化一下。

// 我们以 Register 组件为例来看
class Register extends Component {
  state = {
    username: '',
    password: '',
    rePassword: ''
  }
  // 最终修改状态数据的函数
  onChange = (stateName, stateValue) => {
    this.setState({[stateName]: stateValue});
  }
  // 高阶函数 --> 这样后面就能一直复用当前函数，而不用重新创建了~
  composeChange = (name) => {
    return (e) => this.onChange(name, e.target.value);
  }
  // 统一所有提交表单函数名
  handleSubmit = (e) => {
    e.preventDefault();
    const { username, password, rePassword } = this.state;
    alert(`用户名: ${username}, 密码: ${password}, 确认密码: ${rePassword}`);
  }
  
  render () {
    const { username, password, rePassword } = this.state;
    return (
      <div>
        <h2>注册</h2>
        <form onSubmit={this.handleSubmit}>
          用户名: <input type="text" name="username" value={username} onChange={this.composeChange('username')}/> <br/>
          密码: <input type="password" name="password" value={password} onChange={this.composeChange('password')}/> <br/>
          确认密码: <input type="password" name="rePassword" value={rePassword} onChange={this.composeChange('rePassword')}/> <br/>
          <input type="submit" value="注册"/>
        </form>
      </div>
    )
  }
}

现在两个页面都有 onChange 、 composeChange 、handleSubmit 函数和相关的状态，我们接下来提取，封装成高阶组件！

// 高阶组件 withHoc
export default function withHoc(WrappedComponent) {
  return class extends Component {
    state = {
      username: '',
      password: '',
      rePassword: ''
    }
  
    onChange = (stateName, stateValue) => {
      this.setState({[stateName]: stateValue});
    }
  
    composeChange = (name) => {
      return (e) => this.onChange(name, e.target.value);
    }
    
    handleSubmit = (e) => {
      e.preventDefault();
      const { username, password, rePassword } = this.state;
      if (rePassword) {
        alert(`用户名: ${username}, 密码: ${password}, 确认密码: ${rePassword}`);
      } else {
        alert(`用户名: ${username}, 密码: ${password}`);
      }
    }
    
    render () {
      // 抽取方法
      const mapMethodToProps = {
        composeChange: this.composeChange,
        handleSubmit: this.handleSubmit,
      }
      // 将状态数据和操作的方法以 props 的方式传入的包装组件中
      return (
        <div>
          {/*提取公共头部*/}
          <h2>xxx</h2>
          <WrappedComponent {...this.state} {...mapMethodToProps}/>
        </div>
      )
    }
  }
}

// 组件 Register
class Register extends Component {
  render () {
    const { handleSubmit, composeChange, username, password, rePassword } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        用户名: <input type="text" name="username" value={username} onChange={composeChange('username')}/> <br/>
        密码: <input type="password" name="password" value={password} onChange={composeChange('password')}/> <br/>
        确认密码: <input type="password" name="rePassword" value={rePassword} onChange={composeChange('rePassword')}/> <br/>
        <input type="submit" value="注册"/>
      </form>
    )
  }
}
// 向外暴露的是高阶组件的返回值~包装了 Register 组件返回了一个新组件
export default withHoc(Register);

现在我们提取了公共方法、状态等数据, 封装了一个基本的高阶组件。但是还有很多需要问题需要解决，现在开始行动~

05、高阶组件实训2

目的: 向高阶组件中传参

修改高阶组件

// 再次包裹了一层高阶函数, 这个高阶函数执行后返回值才是高阶组件
// 通过这种方式, 高阶组件内部就能获取参数了~
export default (title) => (WrappedComponent) => {
  return class Form extends Component {
    ...重复代码省略...
    
    render () {
      const mapMethodToProps = {
        composeChange: this.composeChange,
        handleSubmit: this.handleSubmit,
      }
      return (
        <div>
          {/*获取到参数值就能正常显示了~*/}
          <h2>{title}</h2>
          <WrappedComponent {...this.state} {...mapMethodToProps}/>
        </div>
      )
    }
  }
}

在 Login / Register 组件中使用
- export default withHoc('登陆')(Login);
- export default withHoc('注册')(Register);

06、高阶组件实训3

目的: 获取父组件传递的 props

修改 App 组件

class App extends Component {
  render() {
    return (
      <div>
        {/*父组件向子组件传递属性*/}
        <Login name="jack" age={18}/>
        <Register />
      </div>
    );
  }
}

修改高阶组件

export default (title) => (WrappedComponent) => {
  return class Form extends Component {
    ...重复代码省略...
    
    render () {
      const mapMethodToProps = {
        composeChange: this.composeChange,
        handleSubmit: this.handleSubmit,
      }
      return (
        <div>
          {/*获取到参数值就能正常显示了~*/}
          <h2>{title}</h2>
          {/* 将当前组件接受到的props传给包装组件~*/}
          <WrappedComponent {...this.props} {...this.state} {...mapMethodToProps}/>
        </div>
      )
    }
  }
}

Login 组件中使用

 class Login extends Component {
   render () {
     const { handleSubmit, composeChange, username, password, name, age } = this.props;
     return (
       <div>
         <p>你的名字: {name}</p>
         <p>你的年龄: {age}</p>
         <form onSubmit={handleSubmit}>
           用户名: <input type="text" name="username" value={username} onChange={composeChange('username')}/> <br/>
           密码: <input type="password" name="password" value={password} onChange={composeChange('password')}/> <br/>
           <input type="submit" value="登陆"/>
         </form>
       </div>
     )
   }
 }

07、高阶组件实训4

目的: 修改在 React-devtool 中高阶组件名称，方便调试

修改高阶组件

export default (title) => (WrappedComponent) => {
  return class Form extends Component {
    // 定义静态方法，修改组件在调试工具中显示的名称
    static displayName = `Form(${getDisplayName(WrappedComponent)})`
    
    ...省略重复代码...
  }
}
// 获取包装组件的displayName的方法
function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

修改之前名称
修改之后名称

08、使用装饰器

目的: 简化使用高阶组件
下载包
- npm i react-app-rewired customize-cra @babel/plugin-proposal-decorators -D

在项目根目录配置 config-overrides.js

const { override, addDecoratorsLegacy } = require('customize-cra');
// 修改 create-react-app 的 webpack 的配置
module.exports = override(
  addDecoratorsLegacy()
)

修改 package.json 的 scripts

// 将 react-scripts 修改为 react-app-rewired
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
},

以上就是使用 decorator 的配置，修改完后就能使用了~

修改 Login 组件

@withHoc('登陆')
class Login extends Component {
  ...省略重复代码...
}
export default Login;

修改 Register 组件

@withHoc('注册')
class Register extends Component {
  ...省略重复代码...
}
export default Register;

react-app-rewired customize-cra 是 create-react-app 2.0以上专门用来修改 webpack 的配置
decorator 还能做很多事，感兴趣朋友可以看看阮一峰ES6教程了解更多

重复代码永远是我们需要考虑处理的代码，所以我们有模块化、组件化、工具类函数等等，在 React 中再次引入了一个高阶组件的概念，都是为了去除掉万恶的重复代码，让我们代码变得更加精简。本篇文章所有源码都放在了 git仓库，如果它对你有帮助的话，欢迎点 star ~~