自己写的一个React事件流处理框架
这个框架是在开始学习React的时候写的,当时主要是觉得Redux的事件流过于复杂,以及考虑到在多层的props的传递中的代码复杂度的问题,尝试着完成了这样一个框架,通过维护一个全局的数据管理器管理storage来部分替代Redux的使用,将storage中的数据直接映射到组件的state中。具体代码和示例可以见我的GitHub:https://github.com/alexxyzeng/easy-react-router-4
本框架主要解决ReactJS View层事件逻辑过多和多层组件之间父-子数据传递的嵌套问题
主要作用
1.通过创建数据管理器DataComm的单例,管理全局storage,实现基于ReactJS框架下任意组件之间的数据传递;
2.抽出具体的处理逻辑到Action中,避免在组件中直接处理太多的事件逻辑
1.引入自定义的basecomp.js,创建继承自BaseComp的的自定义组件,让它拥有BaseComp基类中定义的方法;
2.编写自定义Action,并调用DataComm单例注册该Action;
3.在自定义组件中调用exec(),调用指定的Action;
4.在自定义组件中通过bindData(),将获取到的数据绑定到组件的state中
主要组件方法
/*
* 本方法实现对指定Action的调用,并传递参数给Action中的对应方法进行处理
* Action.actionType: 第一个参数,必选,包括指定的方法集名称(Action)和方法名称(actionType),以"."分隔
* arg1, arg2, ...: 传递给指定方法的参数,可选
this.exec(Action.actionType, arg1, arg2,....) {
#####/*
* 实现全局storage中的指定数据和组件state中指定数据的绑定
* stateProperty : 组件state中要绑定的数据的名称
#####*/
this.bindData(property, stateProperty) {
#####}