React高阶组件

一、高阶函数

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

  1. 函数可以作为参数被传递
setTimeout(() => {
    console.log(123);
}, 1000);
  1. 函数可以作为返回值被输出
function foo(x) {
    return function() {
        return x;
    }
}

看完上面两个例子就明白了什么叫高阶函数了。实际上高阶函数的应用场景很多,像setTimeoutsetInterval这样的时间函数,我们熟悉的操作数组的一些方法(mapsomefilter)等也是高阶函数。


二、高阶组件(High Order Component,HOC)

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


三、高阶组件的实现

例子

image.png

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

  • React 项目目录结构如下:


    image.png
  • 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;

启动项目后页面的效果:


image.png

可以看到现在的效果离我们想要的效果不远了,我们只需要将 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;
  • 启动项目


    image.png

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

下面介绍使用高阶组件的第二种方法,使用装饰器:@高阶组件名。但是 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已经有一段时间了,期间在阅读官方文档的基础上也看了不少文章,但感觉对很多东西的理解还是不够深刻...
    Srtian阅读 1,686评论 0 7
  • React进阶之高阶组件 前言 本文代码浅显易懂,思想深入实用。此属于react进阶用法,如果你还不了解react...
    流动码文阅读 1,193评论 0 1
  • 在目前的前端社区,『推崇组合,不推荐继承(prefer composition than inheritance)...
    Wenliang阅读 77,726评论 16 124
  • 第一章 引导 学习之前要有一定的:es6基础、js面向对象编程、react的一些基础知识 第二章 高阶组件介绍 2...
    读书的鱼阅读 1,803评论 0 5
  • 1.早起打卡 2.健康 冥想 3.感恩伙伴们的分享 4.反思,伙伴们的分享都很真挚,真挚就更容易感染人。
    重塑生命之花阅读 79评论 0 0