react進階系列：高階組件詳解（一）

NervosNetwork 發(fā)布于2019-08-20 17:34 / 2621人閱讀

摘要：創(chuàng)建一個普通函數(shù)因為的存在所以變成構(gòu)造函數(shù)創(chuàng)建一個方法在方法中，創(chuàng)建一個中間實例對中間實例經(jīng)過邏輯處理之后返回使用方法創(chuàng)建實例而恰好，高階組件的創(chuàng)建邏輯與使用，與這里的方法完全一致。因為方法其實就是構(gòu)造函數(shù)的高階組件。

很多人寫文章喜歡把問題復(fù)雜化，因此當我學習高階組件的時候，查閱到的很多文章都給人一種高階組件高深莫測的感覺。但是事實上卻未必。

有一個詞叫做“封裝”。相信寫代碼這么久了，大家對這個詞所表達的含義都不會陌生。我們通常會將功能相同或者相似的代碼提取出來封裝成為一個可共用的函數(shù)或者對象，這也是我們從初學者慢慢進階的必經(jīng)之路。而高階組件就是一個封裝行為。

但是高階組件的封裝與我們通常所使用的不太一樣，如果完全一樣也就不是那么難理解了。好在我們有一個常用的口頭語“包一層“剛好可以用來簡單解釋高階組件的不同。在普通組件外面包一層邏輯，就是高階組件。

關(guān)于”包一層“，可以通過一個非常簡單的例子來理解。

import React, { Component } from "react";

class Div extends Component {
    componentDidMount() {
        console.log("這是新增的能力");
    }
    render () {
        return (
            { this.props.children }
        )
    }
}

export default Div;

在上面的例子中，我們把html的DIV標簽作為基礎(chǔ)元件。對他新增了一個輸出一條提示信息的能力。而新的Div組件，就可以理解為div標簽的高階組件。到這里希望大家已經(jīng)理解了包一層的具體含義。

為了更加透徹的理解“包一層”的概念，我們需要來回顧一下new與構(gòu)造函數(shù)之間的關(guān)系。在前面我有文章提到過為什么構(gòu)造函數(shù)中this在運行時會指向new出來的實例，不知道還有沒有人記得。我將那段代碼復(fù)制過來。

// 先一本正經(jīng)的創(chuàng)建一個構(gòu)造函數(shù)，其實該函數(shù)與普通函數(shù)并無區(qū)別
var Person = function(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function() {
        return this.name;
    }
}

// 將構(gòu)造函數(shù)以參數(shù)形式傳入
function New(func) {

    // 聲明一個中間對象，該對象為最終返回的實例
    var res = {};
    if (func.prototype !== null) {

        // 將實例的原型指向構(gòu)造函數(shù)的原型
        res.__proto__ = func.prototype;
    }

    // ret為構(gòu)造函數(shù)執(zhí)行的結(jié)果，這里通過apply，將構(gòu)造函數(shù)內(nèi)部的this指向修改為指向res，即為實例對象
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));

    // 當我們在構(gòu)造函數(shù)中明確指定了返回對象時，那么new的執(zhí)行結(jié)果就是該返回對象
    if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
        return ret;
    }

    // 如果沒有明確指定返回對象，則默認返回res，這個res就是實例對象
    return res;
}

// 通過new聲明創(chuàng)建實例，這里的p1，實際接收的正是new中返回的res
var p1 = New(Person, "tom", 20);
console.log(p1.getName());

// 當然，這里也可以判斷出實例的類型了
console.log(p1 instanceof Person); // true

在上面的例子中，首先我們定義了一個本質(zhì)上與普通函數(shù)沒區(qū)別的構(gòu)造函數(shù)，然后將該構(gòu)造函數(shù)作為參數(shù)傳入New函數(shù)中。我在New函數(shù)中進行了一些的邏輯處理，讓New函數(shù)的返回值為一個實例，正因為New的內(nèi)部邏輯，讓構(gòu)造函數(shù)中的this能夠指向返回的實例。這個例子就是一個“包一層”的案例。如果因為基礎(chǔ)不夠扎實導致你對上面的例子確實理解不了，我們還可以簡單粗暴的把上面的例子分成三個步驟來記憶。

創(chuàng)建一個普通函數(shù)（因為new的存在所以變成構(gòu)造函數(shù)）

創(chuàng)建一個new方法

在new方法中，創(chuàng)建一個中間實例res

對中間實例res經(jīng)過邏輯處理之后返回res

使用new方法創(chuàng)建實例

而恰好，高階組件的創(chuàng)建邏輯與使用，與這里的new方法完全一致。因為new方法其實就是構(gòu)造函數(shù)的”高階組件“。按照這個步驟，我們來嘗試一步一步創(chuàng)建一個高階組件。

第一步，創(chuàng)建一個最簡單的基礎(chǔ)組件。

class Basic extends Component {
    render() {
        return (
            { this.props.children }
        )
    }
}

第二步，根據(jù)上栗new方法的步驟，來創(chuàng)建高階組件。

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

// 基礎(chǔ)組件作為高階組件的參數(shù)傳入
function Addsss(Container) {

    // 創(chuàng)建一個中間組件，該中間組件會在添加了邏輯之后返回
    return class Asss extends React.Component {
        componentDidMount() {}
        render() {
            return (
                // 高階組件往基礎(chǔ)組件中傳入了一個name屬性，這是高階組件賦予基礎(chǔ)組件的新能力，當然，根據(jù)實際需求還可以添加更為復(fù)雜的新能力
                { this.props.children }
            )
        }
    }
}

export default Addsss;

高階組件在基礎(chǔ)組件中調(diào)用，并將高階組件的運行結(jié)果返回給模塊外部。因此基礎(chǔ)組件的代碼調(diào)整如下：

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

class Basic extends Component {
    componentDidMount() {
        // 在基礎(chǔ)組件中試圖訪問高階組件傳入的新參數(shù)
        console.log(this.props.name);
    }
    render() {
        return (
            { this.props.children }
        )
    }
}

// 這里相當于執(zhí)行了一次new操作，返回了一個實例，其實運行結(jié)果真是高階組件中的中間組件
export default Addsss(Basic);

我們看到其實在基礎(chǔ)組件中，對外拋出的接口是Addsss(Basic)，這是高階組件里定義的函數(shù)運行的結(jié)果。也就是說，其實基礎(chǔ)組件中返回的是高階組件中定義的Asss中間組件。這和new的思路幾乎完全一致。

所以我們可以簡單理解為：react組件的高階組件，就是在基礎(chǔ)react組件外面包一層，給該基礎(chǔ)組件賦予新的能力。

當然，想要熟練使用高階組件并不是一件容易的事情，我們還需要更多的思考他。在下面一篇文章中我將會以實際的案例來分析高階組件的使用場景與他到底給我們帶來了哪些便利。

云服務(wù)器 GPU云服務(wù)器高階組件系列一高階函數(shù) 高階

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83689.html

發(fā)表評論

登陸后可評論

0條評論

NervosNetwork

男|高級講師

我要關(guān)注我要私信

TA的文章

Hostodo：2核/3G/30G NVMe/5T/1Gbps/美國多機房/年付$45，多款優(yōu)惠套餐

閱讀 494·2021-10-09 09:57
CSS偽元素（content與counter）

閱讀 508·2019-08-29 18:39
頁面架構(gòu)HTML+CSS ヾ(o???)? 常用居中&多列布局

閱讀 845·2019-08-29 12:27
邊距重疊以及解決方案BFC

閱讀 3058·2019-08-26 11:38
小程序爬坑記

閱讀 2692·2019-08-26 11:37
通過實例學習正則表達式

閱讀 1317·2019-08-26 10:59
Vue——(1)父傳子，子傳父(傳值)

閱讀 1406·2019-08-26 10:58
Vue項目優(yōu)化

閱讀 1009·2019-08-26 10:48

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

react進階系列：高階組件詳解（一）

相關(guān)文章

react進階系列 - 高階組件詳解四：高階組件的嵌套使用

react進階系列：高階組件詳解（三）

react進階系列：高階組件詳解（二）

**新上課程推薦：《React Hooks 案例詳解（React 進階必備）》**

前端文檔收集

發(fā)表評論

0條評論

NervosNetwork

男|高級講師

TA的文章

Hostodo：2核/3G/30G NVMe/5T/1Gbps/美國多機房/年付$45，多款優(yōu)惠套餐

CSS偽元素（content與counter）

頁面架構(gòu)HTML+CSS ヾ(o???)? 常用居中&多列布局

邊距重疊以及解決方案BFC

小程序爬坑記

通過實例學習正則表達式

Vue——(1)父傳子，子傳父(傳值)

Vue項目優(yōu)化

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

react進階系列：高階組件詳解（一）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！