React高階組件

cncoder 發(fā)布于2019-08-26 13:35 / 2346人閱讀

摘要：高階組件高階函數(shù)接收函數(shù)作為輸入，或者輸出另一個(gè)函數(shù)的一類(lèi)函數(shù)高階組件接收組件作為輸入，輸出一個(gè)新的組件的組件。包含了一系列實(shí)用的高階組件庫(kù)拖動(dòng)庫(kù)深入理解高階組件其中詳細(xì)介紹了屬性代理和反向繼承的區(qū)別。

React高階組件

高階函數(shù)： 接收函數(shù)作為輸入，或者輸出另一個(gè)函數(shù)的一類(lèi)函數(shù)； 高階組件： 接收React組件作為輸入，輸出一個(gè)新的React組件的組件。

高階組件通過(guò)包裹一個(gè)新傳入的React組件，經(jīng)過(guò)一些邏輯處理，最終返回一個(gè)enchanted的React組件，是其他組件調(diào)用.

一些前提了解知識(shí)點(diǎn)

ReactComponent：定義調(diào)用時(shí)的組件name

    function getDisplayName(component) {
        return component.displayName || component.name || "Component";    
        
    }

    export default function WithHOC(WrapComponent) {
        // 此處未定義名稱(chēng)
        return class extends React.Component {
            // 定義displayName;
            static displayName = `withHOC(${getDisplayName(WrapComponent)})`;
            render() {
                console.log("inside HOC");
                return (
                    return 
                )
            }
        }
    }
    App = WithHOC(App);

如果未定義displayName，那么進(jìn)行調(diào)試的時(shí)候，就會(huì)顯示如下：

    // react自動(dòng)定義名稱(chēng)
    |---_class2
      |---App
        ...

定義displayName后，顯示如下：

    |---withHOC(App)
      |---App
        ...

函數(shù)柯里化

深入理解javascript函數(shù)進(jìn)階系列第二篇——函數(shù)柯里化
koa框架實(shí)踐與中間件原理解析
react事件傳參

柯里化 Curry

只傳遞函數(shù)的一部分參數(shù)來(lái)調(diào)用它，讓它返回一個(gè)函數(shù)去處理剩下的參數(shù)

函數(shù)喬明 func(params)(otherParams);

在react里，通過(guò)函數(shù)柯里化,我們可以通過(guò)傳入不同的參數(shù)來(lái)得到不同的高階組件

基于屬性代理的方式

屬性代理最常見(jiàn)的高階組件的使用方式，上述描述的高階組件就是這種方式。它通過(guò)做一些操作，將被包裹組件的props和新生成的props一起傳遞給此組件，這稱(chēng)之為屬性代理。

import React from "react";
export default function withHeader(WrapperComponent) {
  return class extends React.Component {
    render() {
      const newProps = {
        test: "hoc"
      };
      // 透?jìng)鱬rops，并且傳遞新的newProps
      return (
        
          
        
      )
    }
  }
}

基于反向繼承的方式

這種方式返回的React組件繼承了被傳入的組件，所以它能夠訪(fǎng)問(wèn)到的區(qū)域、權(quán)限更多，相比屬性代理方式，它更像打入組織內(nèi)部，對(duì)其進(jìn)行修改。具體的可以參考附錄里提供的鏈接進(jìn)行深入學(xué)習(xí)。

export default function (WrappedComponent) {
  return class Inheritance extends WrappedComponent {
    componentDidMount() {
      // 可以方便地得到state，做一些更深入的修改。
      console.log(this.state);
    }
    render() {
      return super.render();
    }
  }
}

組合多個(gè)高階組件

上述高階組件為React組件增強(qiáng)了一個(gè)功能，如果需要同時(shí)增加多個(gè)功能需要怎么做？這種場(chǎng)景非常常見(jiàn)，例如我既需要增加一個(gè)組件標(biāo)題，又需要在此組件未加載完成時(shí)顯示Loading.

@withHeader
@withLoading
class Demo extends Component{

}

使用compose可以簡(jiǎn)化上述過(guò)程，也能體現(xiàn)函數(shù)式編程的思想。

    const enhance = compose(withHeader,withLoading);
    @enhance
    class Demo extends Component{
    
    }

組合compose
compose可以幫助我們組合任意個(gè)（包括0個(gè)）高階函數(shù)，例如compose(a,b,c)回一個(gè)新的函數(shù)d，函數(shù)d依然接受一個(gè)函數(shù)作為入?yún)?，只不過(guò)在內(nèi)部會(huì)依次調(diào)用c,b,a，從表現(xiàn)層對(duì)使用者保持透明。
基于這個(gè)特性，我們便可以非常便捷地為某個(gè)組件增強(qiáng)或減弱其特征，只需要去變更c(diǎn)ompose函數(shù)里的參數(shù)個(gè)數(shù)便可。
compose函數(shù)實(shí)現(xiàn)方式有很多種，這里推薦其中一個(gè)recompact.compose，詳情見(jiàn)下方參考類(lèi)庫(kù)。

recompact：包含了一系列實(shí)用的高階組件庫(kù)
React Sortable：React拖動(dòng)庫(kù)
深入理解 React 高階組件：其中詳細(xì)介紹了屬性代理和反向繼承的區(qū)別。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109105.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

cncoder

男|高級(jí)講師

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

TA的文章

tensorflow

閱讀 646·2023-04-26 02:59
tensorflow框架介紹

閱讀 756·2023-04-25 16:02
Sharktech：$129/月-Dual E5-2678v3/64GB/1TB NVMe/1Gbp

閱讀 2228·2021-08-05 09:55
CSS系列之目錄

閱讀 3699·2019-08-30 15:55
如何正確設(shè)置canvas尺寸，以及如何在高分辨率屏幕上清晰顯示canvas圖形

閱讀 4810·2019-08-30 15:44
css 多列等高

閱讀 1850·2019-08-30 13:02
學(xué)習(xí)Stylus

閱讀 2266·2019-08-29 16:57
React高階組件

閱讀 2347·2019-08-26 13:35

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

React高階組件

相關(guān)文章

React 深入系列6：高階組件

**深入淺出React高階組件**