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

前面有講到過不少頁面會在初始時驗證登陸狀態與用戶角色。咱們可使用高階組件來封裝這部分驗證邏輯。封裝好以後咱們在使用的時候就能夠以下：

export default withRule(Home);

可是當咱們的項目中使用了路由組件react-router，那麼頗有可能這些頁面在須要嚴重登陸狀態的同時，會用到withRouter來獲取路由相關的信息。這個時候就涉及到一個高階組件的嵌套使用。由於每個高階組件最終返回的其實都是一個組件，並且都是新增基礎組件的能力，所以咱們能夠簡單粗暴的直接嵌套。

export default withRule(withRouter(Home));

可是當這樣的頁面變得愈來愈多時，那麼處理起來是很是繁瑣的。所以咱們須要將這樣共同的邏輯進一步封裝一下，便於統一處理。而這樣的封裝，咱們須要藉助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

首先，這個方法的第一層含義是第一個括號中傳入的方法會從右到左依次執行。
第二層含義是第二個括號中的參數會做爲最早執行方法的參數，而後把運行結果當作下一個方法的參數這樣依次執行。

所以就有了這樣的執行結果。從20，到40，再到39。

而每個高階組件函數執行以後中所返回的組件，恰好能夠做爲下一個高階組件的參數繼續執行，而並不會影響基礎組件中所得到的新能力。所以咱們能夠藉助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);