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

LMou 发布于2019-08-20 17:35 / 549人阅读

摘要：前面有讲到过很多页面会在初始时验证登录状态与用户角色。这个时候就涉及到一个高阶组件的嵌套使用。而每一个高阶组件函数执行之后中所返回的组件，刚好可以作为下一个高阶组件的参数继续执行，而并不会影响基础组件中所获得的新能力。

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

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

云服务器 GPU云服务器高阶组件高阶函数高阶 php高阶

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83698.html

react进阶系列：高阶组件详解（一）

摘要：创建一个普通函数因为的存在所以变成构造函数创建一个方法在方法中，创建一个中间实例对中间实例经过逻辑处理之后返回使用方法创建实例而恰好，高阶组件的创建逻辑与使用，与这里的方法完全一致。因为方法其实就是构造函数的高阶组件。很多人写文章喜欢把问题复杂化，因此当我学习高阶组件的时候，查阅到的很多文章都给人一种高阶组件高深莫测的感觉。但是事实上却未必。有一个词叫做封装。相信写代码这么久了，大...

NervosNetwork 2019-08-20 17:34 评论0 收藏0
react进阶系列：高阶组件详解（三）

摘要：在前端基础进阶八深入详解函数的柯里化一文中，我有分享柯里化相关的知识。虽然说高阶组件与柯里化都属于比较难以理解的知识点，但是他们组合在一起使用时并没有新增更多的难点。可能看过我以前文章的同学应该会猜得到当我用New的方法来举例学习高阶组件时，接下来要分享的就是柯里化了。高阶组件与函数柯里化的运用是非常能够提高代码逼格的技巧，如果你有剩余的精力，完全可以花点时间学习一下。在前端基础进...

zhangxiangliang 2019-08-20 17:35 评论0 收藏0
react进阶系列：高阶组件详解（二）

摘要：高阶组件可以封装公共逻辑，给当前组件传递方法属性，添加生命周期钩子等。二是基础组件的静态方法也会因为高阶组件的包裹会丢失。如果在开发中确实遇到了必须使用它们，就一定要注意高阶组件的这个问题并认真解决。高阶组件可以封装公共逻辑，给当前组件传递方法属性，添加生命周期钩子等。案例：一个项目中有的页面需要判断所处环境，如果在移动端则正常显示页面，并向用户提示当前页面所处的移动端环境，如果...

JouyPub 2019-08-20 17:35 评论0 收藏0
2017-06-28 前端日报

摘要：前端日报精选我是如何实现的在线升级热更新功能的张鑫旭鑫空间鑫生活翻译表单的运用第期晋升评审的套路异步编程的四种方式黄博客精选组件设计和分解思考掘金中文译使登录页面变得正确掘金前端从强制开启压缩探究插件运行机制掘金个常用的简 2017-06-28 前端日报精选我是如何实现electron的在线升级热更新功能的？ « 张鑫旭-鑫空间-鑫生活【翻译】React 表单： Refs 的运用【...

QLQ 2019-08-20 17:36 评论0 收藏0
React 深入系列6：高阶组件

摘要：在项目中用好高阶组件，可以显著提高代码质量。高阶组件的定义类比于高阶函数的定义。高阶函数接收函数作为参数，并且返回值也是一个函数。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 1. 基本概念高阶组件是React 中一个很重要且比较复杂的概念，高阶组件在很多第三方库（如Redux）中都...

2shou 2019-08-22 17:28 评论0 收藏0