react进阶系列 - 高阶组件详解四：高阶组件的嵌套使用

2019年9月18日 121次阅读 来源: 这波能反杀

前面有讲到过很多页面会在初始时验证登录状态与用户角色。我们可以使用高阶组件来封装这部分验证逻辑。封装好之后我们在使用的时候就可以如下：

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

《react进阶系列 - 高阶组件详解四：高阶组件的嵌套使用》

    原文作者：这波能反杀
    原文地址: https://segmentfault.com/a/1190000009952010
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞