zoukankan      html  css  js  c++  java
  • 自己写的一个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中

    主要组件方法

    1.事件执行方法

    /*

    * 本方法实现对指定Action的调用,并传递参数给Action中的对应方法进行处理

    * Action.actionType: 第一个参数,必选,包括指定的方法集名称(Action)和方法名称(actionType),以"."分隔

    * arg1, arg2, ...: 传递给指定方法的参数,可选

    */

    this.exec(Action.actionType, arg1, arg2,....) {

    ... ...

    }

    2.数据绑定方法

    #####/*

    * 实现全局storage中的指定数据和组件state中指定数据的绑定

    * property : 要获取的数据的名称

    * stateProperty : 组件state中要绑定的数据的名称

    #####*/

    this.bindData(property, stateProperty) {

    ... ...

    #####}

  • 相关阅读:
    Spring学习8- SSH需要的jar包
    Spring学习8-SSH+Log4j黄金整合
    Spring学习8-Spring事务管理(注解式声明事务管理)
    dbvisualizer客户端执行创建存储过程或自定义函数语句的方法
    jvm的组成入门
    java的反射机制
    oracle排序子句的特殊写法与ORA-01785错误
    javascript的数据类型检测
    jsp的el表达式
    javascript模块化编程的cmd规范(sea.js)
  • 原文地址:https://www.cnblogs.com/xiayao/p/9329427.html
Copyright © 2011-2022 走看看