React高階組件

cncoder 發布于2019-08-26 13:35 / 2287人閱讀

摘要：高階組件高階函數接收函數作為輸入，或者輸出另一個函數的一類函數高階組件接收組件作為輸入，輸出一個新的組件的組件。包含了一系列實用的高階組件庫拖動庫深入理解高階組件其中詳細介紹了屬性代理和反向繼承的區別。

React高階組件

高階函數： 接收函數作為輸入，或者輸出另一個函數的一類函數； 高階組件： 接收React組件作為輸入，輸出一個新的React組件的組件。

高階組件通過包裹一個新傳入的React組件，經過一些邏輯處理，最終返回一個enchanted的React組件，是其他組件調用.

一些前提了解知識點

ReactComponent：定義調用時的組件name

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

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

如果未定義displayName，那么進行調試的時候，就會顯示如下：

    // react自動定義名稱
    |---_class2
      |---App
        ...

定義displayName后，顯示如下：

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

函數柯里化

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

柯里化 Curry

只傳遞函數的一部分參數來調用它，讓它返回一個函數去處理剩下的參數

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

在react里，通過函數柯里化,我們可以通過傳入不同的參數來得到不同的高階組件

基于屬性代理的方式

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

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

基于反向繼承的方式

這種方式返回的React組件繼承了被傳入的組件，所以它能夠訪問到的區域、權限更多，相比屬性代理方式，它更像打入組織內部，對其進行修改。具體的可以參考附錄里提供的鏈接進行深入學習。

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

組合多個高階組件

上述高階組件為React組件增強了一個功能，如果需要同時增加多個功能需要怎么做？這種場景非常常見，例如我既需要增加一個組件標題，又需要在此組件未加載完成時顯示Loading.

@withHeader
@withLoading
class Demo extends Component{

}

使用compose可以簡化上述過程，也能體現函數式編程的思想。

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

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

recompact：包含了一系列實用的高階組件庫
React Sortable：React拖動庫
深入理解 React 高階組件：其中詳細介紹了屬性代理和反向繼承的區別。

GPU云服務器云服務器高階組件高階函數高階 php高階

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109105.html

React 深入系列6：高階組件

摘要：在項目中用好高階組件，可以顯著提高代碼質量。高階組件的定義類比于高階函數的定義。高階函數接收函數作為參數，并且返回值也是一個函數。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 1. 基本概念高階組件是React 中一個很重要且比較復雜的概念，高階組件在很多第三方庫（如Redux）中都...

2shou 2019-08-22 17:28 評論0 收藏0
深入淺出React高階組件

摘要：博客地址背景知識在開始講述高階組件前，我們先來回顧高階函數的定義接收函數作為輸入，或者輸出另一個函數的一類函數，被稱作高階函數。博客地址：http://www.luckyjing.com/post... 背景知識在開始講述高階組件前，我們先來回顧高階函數的定義：接收函數作為輸入，或者輸出另一個函數的一類函數，被稱作高階函數。對于高階組件，它描述的便是接受React組件作為輸入，輸出...

yuanzhanghu 2019-08-20 18:20 評論0 收藏0
React高階組件

摘要：結語高階函數對于初學者來說可能不太好理解，但當你深入其中，了解其中的原理之后，我們可以使用高階函數來完成很多的工作。前段時間在工作中寫Hybrid頁面時遇到了這樣的一個場景，公司需要一系列的活動組件，在每個組件注冊的時候都需要調用App端提供的一個接口。一開始也考慮了幾種方式，包括mixin、組件繼承以及react高階組件。但經過了種種衡量，最后選擇使用了高階組件的做法。 1、Mix...

ThinkSNS 2019-08-22 15:47 評論0 收藏0
從零開始學習 React 高階組件

01、介紹 React 高階組件也叫做 React HOC(High Order Component), 它是react中的高級技術, 用來重用組件邏輯。但高階組件本身并不是React API。它只是一種模式，這種模式是由react自身的組合性質必然產生的。那么在學習高階組件之前有一個概念我們必須清楚，就是高階函數。 02、高階函數概念：高階函數是一個函數，它接收函數作為參數或將函數作...

_Dreams 2019-08-23 16:19 評論0 收藏0
七進七出React高階組件

摘要：為了提高代碼的復用性和可維護性，高階函數應運而生。使用過的同學，不知道有沒有使用過，高階函數的作用和它是一樣的。高階函數在編程中扮演的角色就是火鍋鍋底的角色，它有公用的方法和屬性，而各種組件就是肉和蔬菜。為什么要使用高階組件？想想以前用原生和jQuery的項目，上千行的code映入眼簾，瞬間有種昏死過去的沖動。代碼難以維護，改一個bug可能出現N個bug，真的是很痛苦。于是乎組件化...

miguel.jiang 2019-08-21 17:21 評論0 收藏0