這篇文章主要介紹了react高階組件指的是什么的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇react高階組件指的是什么文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

目前創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、南京網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

在react中，高階組件是一個(gè)函數(shù)，是用于重用組件邏輯的高級(jí)技術(shù)；高階組件用于接受一個(gè)組件作為參數(shù)，返回一個(gè)新的組件，這個(gè)新的組件會(huì)使用傳給它的組件作為子組件，可以用屬性代理和反向繼承兩種方法來(lái)實(shí)現(xiàn)高階組件。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react高階組件是什么意思

高階組件是一個(gè)函數(shù)（而不是組件），它接受一個(gè)組件作為參數(shù)，返回一個(gè)新的組件。這個(gè)新的組件會(huì)使用你傳給它的組件作為子組件 -引用自React.js小書(shū)

高階組件（Higher-Order Components）是 React 中用于重用組件邏輯的高級(jí)技術(shù)。 HOC 本身不是 React API 的一部分。 它們是從 React 構(gòu)思本質(zhì)中浮現(xiàn)出來(lái)的一種模式。

在我們項(xiàng)目中使用react-redux框架的時(shí)候，有一個(gè)connect的概念，這里的connect其實(shí)就是一個(gè)高階組件。也包括類(lèi)似react-router-dom中的withRouter的概念

構(gòu)建一個(gè)簡(jiǎn)單的hoc

function hello (){
    console.log("hello i  love react ")
}
function hoc(fn){
    return ()=>{
          console.log("first");
          fn();
          console.log("end");
    }
}
hello = hoc(hello);
hello();

實(shí)現(xiàn)高階組件的方法

實(shí)現(xiàn)高階組件的方法有如下兩種：

• 屬性代理。高階組件通過(guò)唄包裹的React組件來(lái)操作props

• 反向繼承。高階組件繼承于被包裹的React組件

接下來(lái)我們分別來(lái)闡述這兩種方法。

屬性代理

屬性代理是我們r(jià)eact中常見(jiàn)高階組件的實(shí)現(xiàn)方法，我們通過(guò)一個(gè)例子來(lái)說(shuō)明：

import React,{Component} from 'react';
const MyContainer = (WraooedComponent) => 
    class extends Component {
        render(){
            return 
        }
    }

從這里看到最重要部分是render 方法中返回了傳入 WrappedComponent的React組件。這樣，我們就可以通過(guò)高階組件來(lái)傳遞props。這種方法即為屬性代理。

自然，我們想要使用MyContainer這個(gè)高階組件就變得非常容易：

import React,{Component} from 'react';
class MyComponent extends Component{
    //...
}
export default MyContainer(MyComponent);

這樣組件就可以一層層地作為參數(shù)被調(diào)用，原始組件就具備了高階組件對(duì)它的修飾。就這么簡(jiǎn)單，保持單個(gè)組件封裝性的同時(shí)還保留了易用性。當(dāng)然，我們也可以用decorator來(lái)轉(zhuǎn)換。

當(dāng)使用屬性代理構(gòu)建高階組件時(shí)，調(diào)用順序不同于mixin。上述執(zhí)行生命周期的過(guò)程類(lèi)似于堆棧調(diào)用：

didmount ->HOC didmount ->(HOCs didmount)->(HOCs will unmount)->HOC will unmount -> unmount

反向繼承

另一種構(gòu)建高階組件的方法稱(chēng)為反向繼承，從字面意思上看，它一定與繼承性相關(guān)。我們同樣來(lái)看一個(gè)簡(jiǎn)單的實(shí)現(xiàn)。

const MyContainer = (WrappedComponent)=>{
    class extends WrappedComponent {
        render(){
            return super.render();
        }
    }
}

如上代碼。高階組件返回的組件繼承于 WrappedComponent 。因?yàn)楸粍?dòng)地繼承了 WrappedComponent，所有的調(diào)用都會(huì)反向，這也是種方法的由來(lái)。

這種方法與屬性代理不太一樣。它通過(guò)繼承WrappedComponent來(lái)實(shí)現(xiàn)，方法可以通過(guò)super來(lái)順序調(diào)用。因?yàn)橐蕾?lài)于繼承機(jī)制。HOC的調(diào)用順序和隊(duì)列是一樣的。

didmount -> HOC didmount ->(HOCs didmount) -> will unmount ->HOC will unmount ->(HOCs will unmount)

在反向繼承方法中，高階組件可以使用 WrappedComponent 引用，這意味著它可以使用 WrappedComponent 的state 、props。生命周期和render方法。但它不能保證完整的子組件樹(shù)被解析。它有兩個(gè)比較大的特點(diǎn)，下面我們展開(kāi)來(lái)講一講。

渲染劫持

渲染劫持就是指的是高階組件可以控制 WrappedComponent的渲染過(guò)程，并渲染各種各樣的結(jié)果。我們可以在這個(gè)過(guò)程中在任何React元素輸出的結(jié)果中讀取、增加、修改、刪除props，或讀取或修改React元素樹(shù)，或條件顯示。又或者用樣式包裹元素樹(shù)

控制state

高階組件可以讀取、修改或刪除WrappedComponent實(shí)例中的state，如果需要的話，也可以增加state。

組件命名

當(dāng)包裹一個(gè)高階組件時(shí)，我們失去了原始 WrappedComponent的displayName，而組件名字是方便我們開(kāi)發(fā)與調(diào)試的重要屬性。

組件參數(shù)

有時(shí)，我們調(diào)用高階組件需要傳入一些參數(shù)，這可以用非常簡(jiǎn)單的方式來(lái)實(shí)現(xiàn)。

import React from 'react'
function HOCFactoryFactory(...params){
    return function HOCFactory(WrappedComponent){
        return class HOC extends Component{
            render(){
                return 
            }
        }
    }
}

當(dāng)你使用的時(shí)候，可以這么寫(xiě)：

HOCFactoryFactory(params)(WrappedComponent)
//or
@HOCFactoryFactory(params)class WrappedComponent extends React.Component{}

這也是利用了函數(shù)式編程的特征?？梢?jiàn)，在React抽象的過(guò)程中，處處可見(jiàn)它的影子。

關(guān)于“react高階組件指的是什么”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“react高階組件指的是什么”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。