从 源码 谈谈 redux compose
compose,英文意思 组成,构成。
它的作用也是通过一系列的骚操作,实现任意的、多种的、不同的功能模块的组合,用来加强组件。
看看源码
https://github.com/reactjs/redux/blob/v3.7.2/src/compose.js
function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
} if (funcs.length === 1) {
return funcs[0]
} return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
是不是感觉很简单,关键就这一句嘛,结果也就是一层套一层的函数调用
funcs.reduce((a, b) => (...args) => a(b(...args))) 如果
const funcs = [a, b, c, d];
那么
compose(...funcs)(...args) = a(b(c(d(...args))));
其实就是func中的方法,倒着一个一个调用,前一个调用返回的结果作为后一个的参数,第一个方法的参数是...args;
来来来,看看个例子:
git代码:https://github.com/wayaha/react-demos-compose(如果对您有帮助,请您帮我点颗star)
import React, { Component } from 'react';
import { compose, bindActionCreators } from 'redux';
import {connect} from 'react-redux'
import { AddStaff, ChangeStaffData, DeleteStaff, ShowStaffMsg } from '../HOC';
import AddPanel from './AddPanel';
// import { list } from 'postcss';
import { addAction, deleteAction, changeAction, showAction } from '../../redux/company';
import './index.scss'; const Enhancer = compose(AddStaff, ChangeStaffData, DeleteStaff, ShowStaffMsg); class Manage extends Component { /*
*some code
*/
export default connect(state => ({
staffData: state.company.staffData,
name: state.company.name
}), dispatch => ({
dispatch,
actions: bindActionCreators({
addAction,
deleteAction,
changeAction,
showAction
}, dispatch)
}))(Enhancer(Manage));
上边蓝色的部分可以看作是,compose(AddStaff, ChangeStaffData, DeleteStaff, ShowStaffMsg) (Manage)
compose 组合了四个模块,模块相似,代码结构如下,高阶组件的反向继承:
const AddStaff = WrapperComponent => {
return class Enhancer extends WrapperComponent { addStaff = () => {
const { name, staffId, department, work } = this.state;
const { actions: { addAction } } = this.props;
addAction({ name, staffId, department, work })
this.handleCancel();
}; render () {
return super.render();
};
};
}; export default AddStaff;
高阶组件可以看作是,一个方法,返回的包装后的组件,它也只是为传入组件的props添加一个方法,然后返回。
WrapperComponent => {
addStaff = () => {
// do something
};
return <WrapperComponent {...this.props, addStaff: addStaff}/>
};
同样,
compose(AddStaff, ChangeStaffData, DeleteStaff, ShowStaffMsg) (Manage) 的结果就可以是:
compose( AddStaff ( ChangeStaddData ( DeleteStaff ( ShowStaddMsg ( Manage ) ) ) ) )
ShowStaddMsg ( Manage ) 返回一个拥有ShowStaddMsg的Manage组件;
DeleteStaff ( ShowStaddMsg ( Manage ) )返回一个拥有DeleteStaff 、ShowStaddMsg的Manage组件;
ChangeStaddData ( DeleteStaff ( ShowStaddMsg ( Manage ) ) ) 返回一个拥有ChangeStaddData 、DeleteStaff 、ShowStaddMsg的Manage组件;
最终返回一个拥有添加、修改、删除、展示四大功能的加强组件;
用途:
这样的操作很容易实现功能的组合拼装、代码复用;可以根据需要组合不同的功能;看过中间件源码的大牛,应该都看到compose在处理中间的中的强大作用。
从 源码 谈谈 redux compose的更多相关文章
- Redux源码分析之compose
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- redux源码阅读之compose,applyMiddleware
我的观点是,看别人的源码,不追求一定要能原样造轮子,单纯就是学习知识,对于程序员的提高就足够了.在阅读redux的compose源码之前,我们先学一些前置的知识. redux源码阅读之compose, ...
- redux源码解析-redux的架构
redux很小的一个框架,是从flux演变过来的,尽管只有775行,但是它的功能很重要.react要应用于生成环境必须要用flux或者redux,redux是flux的进化产物,优于flux. 而且r ...
- React深入源码--了解Redux用法之Provider
在Redux中最核心的自然是组件,以及组件相关的事件与数据流方式.但是我们在Redux中并没有采用传统的方式在getInitialState()中去初始化数据,而是采用Provider统一处理,省去了 ...
- 结合源码谈谈ThreadLocal!
目录 ThreadLocal的作用 ThreadLocal 1.对象初始化 2.获取变量 3.设置变量 4.移除变量 ThreadLocalMap 1.Entry 2.初始化 3.获取Entry 4. ...
- Redux源码分析之createStore
接着前面的,我们继续,打开createStore.js, 直接看最后, createStore返回的就是一个带着5个方法的对象. return { dispatch, subscribe, getSt ...
- Redux源码分析之applyMiddleware
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Redux源码分析之基本概念
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Redux源码分析之bindActionCreators
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
随机推荐
- Linux Shell脚本攻略学习总结:一
终端打印 终端打印的常用命令有两个:echo和print 首先,我先介绍echo 1.echo echo这个命令接受三种形式的参数,实例如下: echo "Hello World" ...
- Linux0.11小结
第一部分 基础内容 1.操作系统基础 操作系统是计算机硬件系统与用户程序间重要环节,理解操作系统的原理是编写优秀代码的基础.教课书中阐述的操作系统一般由5部分组成. 一个最简单的操作系统,可以 ...
- android 如何添加第3方lib库到kernel中
注意:只能将lib库放在kernel编译到的地方,如下: alps/kernel/ alps/mediatek/custom/common/kernel/ alps/mediatek/custom/$ ...
- 更改EBS服务器域名/IP
more: 341322.1 : How to change the hostname of an Applications Tier using AutoConfig 338003.1 : How ...
- Oracle E-Business Suite Maintenance Guide Release 12.2(Patching Utilities)
更多内容参考: http://docs.oracle.com/cd/E51111_01/current/acrobat/122ebsmt.zip Oracle Patch Application As ...
- VS2010中使用Jquery调用Wcf服务读取数据库记录
VS2010中使用Jquery调用Wcf服务读取数据库记录 开发环境:Window Servere 2008 +SQL SERVE 2008 R2+ IIS7 +VS2010+Jquery1.3.2 ...
- redis注册成window服务
注册服务 redis-server.exe –service-install redis.windows.conf 删除服务 redis-server –service-uninstall 开启服务 ...
- 安卓TV开发(前言)— AndroidTV模拟器初识与搭建
原文:http://blog.csdn.net/sk719887916/article/details/39612577skay 前言:移动智能设备的发展,推动了安卓另一个领域,包括智能电视和智能家居 ...
- mybatis --- 以接口的方式进行编程
); 我们来学习下接口方式的编程. 接口类IBookDao.java package com.mybatis.dao; import com.mybatis.model.Book; public i ...
- LeetCode(53)-Binary Tree Paths
题目: Given a binary tree, return all root-to-leaf paths. For example, given the following binary tree ...