react进阶系列：高阶组件详解（一）

2019年8月25日 175次阅读 来源: 九死蚕传人bo

许多人写文章喜好把题目庞杂化，因而当我进修高阶组件的时刻，查阅到的许多文章都给人一种高阶组件高深莫测的觉得。然则事实上却未必。

有一个词叫做“封装”。置信写代码这么久了，人人对这个词所表达的寄义都不会生疏。我们一般会将功用雷同或许类似的代码提取出来封装成为一个可共用的函数或许对象，这也是我们从初学者逐步进阶的必经之路。而高阶组件就是一个封装行动。

然则高阶组件的封装与我们一般所运用的不太一样，假如完整一样也就不是那末难明白了。幸亏我们有一个经常使用的口头语“包一层“正好可以用来简朴诠释高阶组件的差别。在一般组件外面包一层逻辑，就是高阶组件。

关于”包一层“，可以经由过程一个异常简朴的例子来明白。

import React, { Component } from 'react';

class Div extends Component {
    componentDidMount() {
        console.log('这是新增的才能');
    }
    render () {
        return (
            <div>{ this.props.children }</div>
        )
    }
}

export default Div;

在上面的例子中，我们把html的DIV标签作为基本元件。对他新增了一个输出一条提醒信息的才能。而新的Div组件，就可以明白为div标签的高阶组件。到这里愿望人人已明白了包一层的详细寄义。

为了越发透辟的明白“包一层”的观点，我们须要来回忆一下new与组织函数之间的关联。在前面我有文章提到过为什么组织函数中this在运转时会指向new出来的实例，不知道另有没有人记得。我将那段代码复制过来。

// 先道貌岸然的建立一个组织函数，实在该函数与一般函数并没有区分
var Person = function(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function() {
        return this.name;
    }
}

// 将组织函数以参数情势传入
function New(func) {

    // 声明一个中心对象，该对象为终究返回的实例
    var res = {};
    if (func.prototype !== null) {

        // 将实例的原型指向组织函数的原型
        res.__proto__ = func.prototype;
    }

    // ret为组织函数实行的效果，这里经由过程apply，将组织函数内部的this指向修改成指向res，即为实例对象
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));

    // 当我们在组织函数中明白指定了返回对象时，那末new的实行效果就是该返回对象
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret;
    }

    // 假如没有明白指定返回对象，则默许返回res，这个res就是实例对象
    return res;
}

// 经由过程new声明建立实例，这里的p1，现实吸收的恰是new中返回的res
var p1 = New(Person, 'tom', 20);
console.log(p1.getName());

// 固然，这里也可以推断出实例的范例了
console.log(p1 instanceof Person); // true

在上面的例子中，起首我们定义了一个本质上与一般函数没区分的组织函数，然后将该组织函数作为参数传入New函数中。我在New函数中进行了一些的逻辑处置惩罚，让New函数的返回值为一个实例，正由于New的内部逻辑，让组织函数中的this可以指向返回的实例。这个例子就是一个“包一层”的案例。假如由于基本不够踏实致使你对上面的例子确切明白不了，我们还可以简朴粗犷的把上面的例子分红三个步骤来影象。

  1. 建立一个一般函数（由于new的存在所以变成组织函数）

  2. 建立一个new要领

    • 在new要领中，建立一个中心实例res
    • 对中心实例res经由逻辑处置惩罚以后返回res
  3. 运用new要领建立实例

而正好，高阶组件的建立逻辑与运用，与这里的new要领完整一致。由于new要领实在就是组织函数的”高阶组件“。依据这个步骤，我们来尝试一步一步建立一个高阶组件。

第一步，建立一个最简朴的基本组件。

class Basic extends Component {
    render() {
        return (
            <div>{ this.props.children }</div>
        )
    }
}

第二步，依据上栗new要领的步骤，来建立高阶组件。

// src/Addsss.jsx
import React from 'react';

// 基本组件作为高阶组件的参数传入
function Addsss(Container) {

    // 建立一个中心组件，该中心组件会在增加了逻辑以后返回
    return class Asss extends React.Component {
        componentDidMount() {}
        render() {
            return (
                // 高阶组件往基本组件中传入了一个name属性，这是高阶组件给予基本组件的新才能，固然，依据现实需求还可以增加更加庞杂的新才能
                <Container name="asper">{ this.props.children }</Container>
            )
        }
    }
}

export default Addsss;

高阶组件在基本组件中挪用，并将高阶组件的运转效果返回给模块外部。因而基本组件的代码调解以下：

// src/basic.jsx
import React, { Component } from 'react';
import Addsss from './Addsss';

class Basic extends Component {
    componentDidMount() {
        // 在基本组件中试图接见高阶组件传入的新参数
        console.log(this.props.name);
    }
    render() {
        return (
            <div className={this.props.name}>{ this.props.children }</div>
        )
    }
}

// 这里相当于实行了一次new操纵，返回了一个实例，实在运转效果真是高阶组件中的中心组件
export default Addsss(Basic);

我们看到实在在基本组件中，对外抛出的接口是Addsss(Basic)，这是高阶组件里定义的函数运转的效果。也就是说，实在基本组件中返回的是高阶组件中定义的Asss中心组件。这和new的思绪险些完整一致。

所以我们可以简朴明白为：react组件的高阶组件，就是在基本react组件外面包一层，给该基本组件给予新的才能。

固然，想要闇练运用高阶组件并非一件轻易的事变，我们还须要更多的思索他。在下面一篇文章中我将会以现实的案例来剖析高阶组件的运用场景与他究竟给我们带来了哪些方便。

《react进阶系列：高阶组件详解（一）》

    原文作者：九死蚕传人bo
    原文地址: https://segmentfault.com/a/1190000009937019
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞