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);