資訊專(zhuān)欄INFORMATION COLUMN
摘要：前面有講到過(guò)很多頁(yè)面會(huì)在初始時(shí)驗(yàn)證登錄狀態(tài)與用戶角色。這個(gè)時(shí)候就涉及到一個(gè)高階組件的嵌套使用。而每一個(gè)高階組件函數(shù)執(zhí)行之后中所返回的組件，剛好可以作為下一個(gè)高階組件的參數(shù)繼續(xù)執(zhí)行，而并不會(huì)影響基礎(chǔ)組件中所獲得的新能力。
前面有講到過(guò)很多頁(yè)面會(huì)在初始時(shí)驗(yàn)證登錄狀態(tài)與用戶角色。我們可以使用高階組件來(lái)封裝這部分驗(yàn)證邏輯。封裝好之后我們?cè)谑褂玫臅r(shí)候就可以如下：
export default withRule(Home);
但是當(dāng)我們的項(xiàng)目中使用了路由組件react-router，那么很有可能這些頁(yè)面在需要嚴(yán)重登錄狀態(tài)的同時(shí)，會(huì)用到withRouter來(lái)獲取路由相關(guān)的信息。這個(gè)時(shí)候就涉及到一個(gè)高階組件的嵌套使用。因?yàn)槊恳粋€(gè)高階組件最終返回的其實(shí)都是一個(gè)組件，而且都是新增基礎(chǔ)組件的能力，因此我們可以簡(jiǎn)單粗暴的直接嵌套。
export default withRule(withRouter(Home));
但是當(dāng)這樣的頁(yè)面變得越來(lái)越多時(shí)，那么處理起來(lái)是非常繁瑣的。因此我們需要將這樣共同的邏輯進(jìn)一步封裝一下，便于統(tǒng)一處理。而這樣的封裝，我們需要借助lodash中的flowRight方法。
老版本的lodash中為compose方法，最新的版本中compose方法更名為flowRight
他的含義借助下面的例子來(lái)簡(jiǎn)單說(shuō)明：
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);
//輸出結(jié)果依次為 20 40 39
首先，這個(gè)方法的第一層含義是第一個(gè)括號(hào)中傳入的方法會(huì)從右到左依次執(zhí)行。
第二層含義是第二個(gè)括號(hào)中的參數(shù)會(huì)作為最先執(zhí)行方法的參數(shù)，然后把運(yùn)行結(jié)果當(dāng)做下一個(gè)方法的參數(shù)這樣依次執(zhí)行。
因此就有了這樣的執(zhí)行結(jié)果。從20，到40，再到39。
而每一個(gè)高階組件函數(shù)執(zhí)行之后中所返回的組件，剛好可以作為下一個(gè)高階組件的參數(shù)繼續(xù)執(zhí)行，而并不會(huì)影響基礎(chǔ)組件中所獲得的新能力。因此我們可以借助lodash的這個(gè)方法來(lái)封裝高階組件的嵌套。
封裝方法如下：
// 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);
}
這樣，我們?cè)诨A(chǔ)組件中使用它時(shí)就很簡(jiǎn)單了。
import withRuleRouter from "utils/withRuleRouter";
class Home extends Component { ... }
export default withRuleRouter(Home);
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83698.html
摘要：創(chuàng)建一個(gè)普通函數(shù)因?yàn)榈拇嬖谒宰兂蓸?gòu)造函數(shù)創(chuàng)建一個(gè)方法在方法中，創(chuàng)建一個(gè)中間實(shí)例對(duì)中間實(shí)例經(jīng)過(guò)邏輯處理之后返回使用方法創(chuàng)建實(shí)例而恰好，高階組件的創(chuàng)建邏輯與使用，與這里的方法完全一致。因?yàn)榉椒ㄆ鋵?shí)就是構(gòu)造函數(shù)的高階組件。 很多人寫(xiě)文章喜歡把問(wèn)題復(fù)雜化，因此當(dāng)我學(xué)習(xí)高階組件的時(shí)候，查閱到的很多文章都給人一種高階組件高深莫測(cè)的感覺(jué)。但是事實(shí)上卻未必。 有一個(gè)詞叫做封裝。相信寫(xiě)代碼這么久了，大...
摘要：在前端基礎(chǔ)進(jìn)階八深入詳解函數(shù)的柯里化一文中，我有分享柯里化相關(guān)的知識(shí)。雖然說(shuō)高階組件與柯里化都屬于比較難以理解的知識(shí)點(diǎn)，但是他們組合在一起使用時(shí)并沒(méi)有新增更多的難點(diǎn)。 可能看過(guò)我以前文章的同學(xué)應(yīng)該會(huì)猜得到當(dāng)我用New的方法來(lái)舉例學(xué)習(xí)高階組件時(shí)，接下來(lái)要分享的就是柯里化了。高階組件與函數(shù)柯里化的運(yùn)用是非常能夠提高代碼逼格的技巧，如果你有剩余的精力，完全可以花點(diǎn)時(shí)間學(xué)習(xí)一下。 在前端基礎(chǔ)進(jìn)...
摘要：高階組件可以封裝公共邏輯，給當(dāng)前組件傳遞方法屬性，添加生命周期鉤子等。二是基礎(chǔ)組件的靜態(tài)方法也會(huì)因?yàn)楦唠A組件的包裹會(huì)丟失。如果在開(kāi)發(fā)中確實(shí)遇到了必須使用它們，就一定要注意高階組件的這個(gè)問(wèn)題并認(rèn)真解決。 高階組件可以封裝公共邏輯，給當(dāng)前組件傳遞方法屬性，添加生命周期鉤子等。 案例： 一個(gè)項(xiàng)目中有的頁(yè)面需要判斷所處環(huán)境，如果在移動(dòng)端則正常顯示頁(yè)面，并向用戶提示當(dāng)前頁(yè)面所處的移動(dòng)端環(huán)境，如果...
摘要：前端日?qǐng)?bào)精選我是如何實(shí)現(xiàn)的在線升級(jí)熱更新功能的張?chǎng)涡聆慰臻g鑫生活翻譯表單的運(yùn)用第期晉升評(píng)審的套路異步編程的四種方式黃博客精選組件設(shè)計(jì)和分解思考掘金中文譯使登錄頁(yè)面變得正確掘金前端從強(qiáng)制開(kāi)啟壓縮探究插件運(yùn)行機(jī)制掘金個(gè)常用的簡(jiǎn) 2017-06-28 前端日?qǐng)?bào) 精選 我是如何實(shí)現(xiàn)electron的在線升級(jí)熱更新功能的？ ? 張?chǎng)涡?鑫空間-鑫生活【翻譯】React 表單： Refs 的運(yùn)用【...
摘要：在項(xiàng)目中用好高階組件，可以顯著提高代碼質(zhì)量。高階組件的定義類(lèi)比于高階函數(shù)的定義。高階函數(shù)接收函數(shù)作為參數(shù)，并且返回值也是一個(gè)函數(shù)。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 1. 基本概念 高階組件是React 中一個(gè)很重要且比較復(fù)雜的概念，高階組件在很多第三方庫(kù)（如Redux）中都...
閱讀 844·2019-08-30 15:55
閱讀 1419·2019-08-30 13:55
閱讀 1996·2019-08-29 17:13
閱讀 2850·2019-08-29 15:42
閱讀 1339·2019-08-26 14:04
閱讀 1027·2019-08-26 13:31
閱讀 3279·2019-08-26 11:34
閱讀 840·2019-08-23 18:25
