技術文章 » react高階元件是什麼意思

react高階元件是什麼意思

2022-04-18 13:00:51

在react中，高階元件是一個函數，是用於重用元件邏輯的高階技術；高階元件用於接受一個元件作為引數，返回一個新的元件，這個新的元件會使用傳給它的元件作為子元件，可以用屬性代理和反向繼承兩種方法來實現高階元件。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react高階元件是什麼意思

高階元件是一個函數（而不是元件），它接受一個元件作為引數，返回一個新的元件。這個新的元件會使用你傳給它的元件作為子元件 -參照自React.js小書

高階元件（Higher-Order Components）是 React 中用於重用元件邏輯的高階技術。 HOC 本身不是 React API 的一部分。 它們是從 React 構思本質中浮現出來的一種模式。

在我們專案中使用react-redux框架的時候，有一個connect的概念，這裡的connect其實就是一個高階元件。也包括類似react-router-dom中的withRouter的概念

01.png

構建一個簡單的hoc

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

實現高階元件的方法

實現高階元件的方法有如下兩種：

  • 屬性代理。高階元件通過唄包裹的React元件來操作props

  • 反向繼承。高階元件繼承於被包裹的React元件

接下來我們分別來闡述這兩種方法。

屬性代理

屬性代理是我們react中常見高階元件的實現方法，我們通過一個例子來說明：

import React,{Component} from 'react';
const MyContainer = (WraooedComponent) => 
    class extends Component {
        render(){
            return <WrappedComponent {...this.props} />
        }
    }

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

自然，我們想要使用MyContainer這個高階元件就變得非常容易：

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

這樣元件就可以一層層地作為引數被呼叫，原始元件就具備了高階元件對它的修飾。就這麼簡單，保持單個元件封裝性的同時還保留了易用性。當然，我們也可以用decorator來轉換。

當使用屬性代理構建高階元件時，呼叫順序不同於mixin。上述執行生命週期的過程類似於堆疊呼叫：

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

反向繼承

另一種構建高階元件的方法稱為反向繼承，從字面意思上看，它一定與繼承性相關。我們同樣來看一個簡單的實現。

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

如上程式碼。高階元件返回的元件繼承於 WrappedComponent 。因為被動地繼承了 WrappedComponent，所有的呼叫都會反向，這也是種方法的由來。

這種方法與屬性代理不太一樣。它通過繼承WrappedComponent來實現，方法可以通過super來順序呼叫。因為依賴於繼承機制。HOC的呼叫順序和佇列是一樣的。

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

在反向繼承方法中，高階元件可以使用 WrappedComponent 參照，這意味著它可以使用 WrappedComponent 的state 、props。生命週期和render方法。但它不能保證完整的子元件樹被解析。它有兩個比較大的特點，下面我們展開來講一講。

渲染劫持

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

控制state

高階元件可以讀取、修改或刪除WrappedComponent範例中的state，如果需要的話，也可以增加state。

元件命名

當包裹一個高階元件時，我們失去了原始 WrappedComponent的displayName，而元件名字是方便我們開發與偵錯的重要屬性。

元件引數

有時，我們呼叫高階元件需要傳入一些引數，這可以用非常簡單的方式來實現。

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

當你使用的時候，可以這麼寫：

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

這也是利用了函數語言程式設計的特徵。可見，在React抽象的過程中，處處可見它的影子。

推薦學習：《》

以上就是react高階元件是什麼意思的詳細內容，更多請關注TW511.COM其它相關文章！