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

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

MySQL进阶系列：一文详解explain各字段含义
explain有何用处呢:为了知道优化SQL语句的执行,需要查看SQL语句的具体执行过程,以加快SQL语句的执行效率. 可以使用explain+SQL语句来模拟优化器执行SQL查询语句,从而知道mys ...
vue组件详解（一）——组件与复用
一.什么是组件组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法组件需要注册后才可以使用,注册有全局注册和局部注册两种 ...
Kotlin_高阶函数详解
Kotlin_高阶函数详解定义高阶函数高阶函数用法高阶函数模仿实现apply 内联函数的作用高阶函数的实现原理内联函数 noinline和crossinline noinline 非内联函数 ...
Android应用开发—Intent组件详解
转载自:Android中Intent组件详解 Intent是不同组件之间相互通讯的纽带,封装了不同组件之间通讯的条件. Intent本身是定义为一个类别(Class),一个Intent对象表达一个目的 ...
Streamsets组件详解
Streamsets优化详解一.Origin类组件详解二.Processor类组件详解三.Destination类组件详解四.Executor类组件使用详解一.Origin类组件详解 Ama ...
React Native 手势触摸事件机制详解（进阶篇）
源码已开源到Github,详细代码可以查看:<React Native 触摸事件代码实践>. 在基础篇,对RN中的触摸事件做了详细的介绍.相信大家对于触摸事件流程机制有了更为清晰的认识.没 ...
【Unity3D-UGUI系列】（一）Canvas 画布组件详解
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉 ...
【Unity3D-UGUI系列】（十二）ScrollView 滚动视图组件详解
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有 ...
Java高并发编程详解系列-Java线程入门
根据自己学的知识加上从各个网站上收集的资料分享一下关于java高并发编程的知识点.对于代码示例会以Maven工程的形式分享到个人的GitHub上面. 首先介绍一下这个系列的东西是什么,这个系列自己 ...

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

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

最新文章

热门文章