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

LMou 發(fā)布于2019-08-20 17:35 / 608人閱讀

摘要：前面有講到過很多頁面會在初始時驗證登錄狀態(tài)與用戶角色。這個時候就涉及到一個高階組件的嵌套使用。而每一個高階組件函數(shù)執(zhí)行之后中所返回的組件，剛好可以作為下一個高階組件的參數(shù)繼續(xù)執(zhí)行，而并不會影響基礎組件中所獲得的新能力。

前面有講到過很多頁面會在初始時驗證登錄狀態(tài)與用戶角色。我們可以使用高階組件來封裝這部分驗證邏輯。封裝好之后我們在使用的時候就可以如下：

export default withRule(Home);

但是當我們的項目中使用了路由組件react-router，那么很有可能這些頁面在需要嚴重登錄狀態(tài)的同時，會用到withRouter來獲取路由相關的信息。這個時候就涉及到一個高階組件的嵌套使用。因為每一個高階組件最終返回的其實都是一個組件，而且都是新增基礎組件的能力，因此我們可以簡單粗暴的直接嵌套。

export default withRule(withRouter(Home));

但是當這樣的頁面變得越來越多時，那么處理起來是非常繁瑣的。因此我們需要將這樣共同的邏輯進一步封裝一下，便于統(tǒng)一處理。而這樣的封裝，我們需要借助lodash中的flowRight方法。

老版本的lodash中為compose方法，最新的版本中compose方法更名為flowRight

他的含義借助下面的例子來簡單說明：

function fn3(a) { 
    console.log(a);
    return a + 20; 
}

function fn2(a) { 
    console.log(a);
    return a - 1 ;
}

function fn1(a) { 
    console.log(a) 
}

_.flowRight(fn1, fn2, fn3)(20);

//輸出結果依次為 20 40 39

首先，這個方法的第一層含義是第一個括號中傳入的方法會從右到左依次執(zhí)行。
第二層含義是第二個括號中的參數(shù)會作為最先執(zhí)行方法的參數(shù)，然后把運行結果當做下一個方法的參數(shù)這樣依次執(zhí)行。

因此就有了這樣的執(zhí)行結果。從20，到40，再到39。

而每一個高階組件函數(shù)執(zhí)行之后中所返回的組件，剛好可以作為下一個高階組件的參數(shù)繼續(xù)執(zhí)行，而并不會影響基礎組件中所獲得的新能力。因此我們可以借助lodash的這個方法來封裝高階組件的嵌套。

封裝方法如下：

// utils/withRuleRouter.js
import withRule from "utils/withRule";
import flowRight from "lodash/flowRight";
import { withRouter } from "react-router";

export default function withRuleRouter(WrappedComponent) {
    return flowRight(withRule, withRouter)(WrappedComponent);
}

這樣，我們在基礎組件中使用它時就很簡單了。

import withRuleRouter from "utils/withRuleRouter";

class Home extends Component { ... }

export default withRuleRouter(Home);

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

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

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

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

摘要：創(chuàng)建一個普通函數(shù)因為的存在所以變成構造函數(shù)創(chuàng)建一個方法在方法中，創(chuàng)建一個中間實例對中間實例經(jīng)過邏輯處理之后返回使用方法創(chuàng)建實例而恰好，高階組件的創(chuàng)建邏輯與使用，與這里的方法完全一致。因為方法其實就是構造函數(shù)的高階組件。很多人寫文章喜歡把問題復雜化，因此當我學習高階組件的時候，查閱到的很多文章都給人一種高階組件高深莫測的感覺。但是事實上卻未必。有一個詞叫做封裝。相信寫代碼這么久了，大...

NervosNetwork 2019-08-20 17:34 評論0 收藏0
react進階系列：高階組件詳解（三）

摘要：在前端基礎進階八深入詳解函數(shù)的柯里化一文中，我有分享柯里化相關的知識。雖然說高階組件與柯里化都屬于比較難以理解的知識點，但是他們組合在一起使用時并沒有新增更多的難點。可能看過我以前文章的同學應該會猜得到當我用New的方法來舉例學習高階組件時，接下來要分享的就是柯里化了。高階組件與函數(shù)柯里化的運用是非常能夠提高代碼逼格的技巧，如果你有剩余的精力，完全可以花點時間學習一下。在前端基礎進...

zhangxiangliang 2019-08-20 17:35 評論0 收藏0
react進階系列：高階組件詳解（二）

摘要：高階組件可以封裝公共邏輯，給當前組件傳遞方法屬性，添加生命周期鉤子等。二是基礎組件的靜態(tài)方法也會因為高階組件的包裹會丟失。如果在開發(fā)中確實遇到了必須使用它們，就一定要注意高階組件的這個問題并認真解決。高階組件可以封裝公共邏輯，給當前組件傳遞方法屬性，添加生命周期鉤子等。案例：一個項目中有的頁面需要判斷所處環(huán)境，如果在移動端則正常顯示頁面，并向用戶提示當前頁面所處的移動端環(huán)境，如果...

JouyPub 2019-08-20 17:35 評論0 收藏0
2017-06-28 前端日報

摘要：前端日報精選我是如何實現(xiàn)的在線升級熱更新功能的張鑫旭鑫空間鑫生活翻譯表單的運用第期晉升評審的套路異步編程的四種方式黃博客精選組件設計和分解思考掘金中文譯使登錄頁面變得正確掘金前端從強制開啟壓縮探究插件運行機制掘金個常用的簡 2017-06-28 前端日報精選我是如何實現(xiàn)electron的在線升級熱更新功能的？ ? 張鑫旭-鑫空間-鑫生活【翻譯】React 表單： Refs 的運用【...

QLQ 2019-08-20 17:36 評論0 收藏0
React 深入系列6：高階組件

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

2shou 2019-08-22 17:28 評論0 收藏0