聊一聊React高阶组件

一、高阶函数

在了解高阶组件之前首先了解一下高阶函数 高阶函数有两个特点：

1. 函数可以作为参数被传递

setTimeout(() => {
    console.log(123);
}, 1000);

2. 函数可以作为返回值被输出

function foo(x) {
    return function() {
        return x;
    }
}

看完上面两个例子就明白了什么叫高阶函数了。实际上高阶函数的应用场景很多，像setTimeout、setInterval这样的时间函数，我们熟悉的操作数组的一些方法（map、some、filter）等也是高阶函数。

---

二、高阶组件（High Order Component，HOC）

高阶组件就是接收一个组件作为参数并返回一个新组件的函数。 注：高阶组件是一个函数，并不是一个组件

---

三、高阶组件的实现

例子

上面的图片有两个组件，可以看到它们除了白色内容区域不同之外，别的部分都是相同的，这时我们可以使用高阶组件来实现它。 步骤：

• React 项目目录结构如下：

  

• components 文件夹放置我们的组件
  • A.js

import React, { Component } from 'react';

export default class A extends Component {
  render() {
    return (
      <div className="box">
        <header className="head">头部</header>
        <div className="content">
        </div>
      </div>
    )
  }
}

• 把 A 组件挂载到页面上，App.js

import React from 'react';

import A from './components/A';
import './index.css';

class App extends React.Component {
  render() {
    return(
      <div className="out-box">
        <A />
      </div>
    )
  }
}
export default App;

启动项目后页面的效果：

可以看到现在的效果离我们想要的效果不远了，我们只需要将 A 组件改写成一个函数就能实现我们所要的高阶组件了。

• 改写后的A.js

import React, { Component } from 'react';

// hocA函数接收一个组件参数
function hocA(Wrapper) {
  return class A extends Component {
    render() {
      return (
        <div className="box">
          <header className="head">头部</header>
          <div className="content">
            {/* 将组件挂载到相应的位置即可 */}
            <Wrapper />
          </div>
        </div>
      )
    }
  }
};

export default hocA;

那么现在组件 A 就是一个高阶组件了，那么怎么使用呢，很简单

• B.js

import React, { Component } from 'react';
// 引入该高阶组件
import hocA from './A';

class B extends Component {
  render() {
    return (
      <div>
        这是B组件
      </div>
    )
  }
}
// 将组件作为参数传入高阶组件即可
export default hocA(B);

同理，C.js也是这么改写。改写完后将 B、C 组件挂载到页面上

• App.js

import React from 'react';

import B from './components/B';
import C from './components/C';
import './index.css';

class App extends React.Component {
  render() {
    return(
      <div className="out-box">
        <B />
        <C />
      </div>
    )
  }
}

export default App;

• 启动项目

  

---

四、装饰器的语法来使用高阶组件

下面介绍使用高阶组件的第二种方法，使用装饰器：@高阶组件名。但是 React 项目默认是不支持装饰器语法的，所以我们需要安装一个插件同时修改一下配置。

• 暴露出 React 项目的配置文件：npm run eject
• 安装插件：yarn add @babel/plugin-proposal-decorators -D
• 修改 package.json 中 babel 的配置：

  "babel": {
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ],
    "presets": [
      "react-app"
    ]
  },

• 修改使用方法： B.js

import React, { Component } from 'react';
// 引入该高阶组件
import hocA from './A';

// 装饰器语法使用该高阶组件
@hocA
class B extends Component {
  render() {
    return (
      <div>
        这是B组件
      </div>
    )
  }
}
// 直接导出该组件
export default B;

同理 C.js 也是这么修改。重新启动项目，效果和之前一样。

---

至此一个简单的高阶组件便实现了。那么我们为什么需要高阶组件，原因就是当多个组件都需要某个相同的功能，使用高阶组件可以减少重复实现。

想要深入了解 React 高阶组件，可参看下一篇文章再聊代理以及继承方式的React高阶组件