• 自己写的一个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) {

    ... ...

    #####}

  • 相关阅读:
    ArrayList集合 、特殊集合
    二维数组 、多维数组
    一维数组
    类:String,Math,DateTime,Random
    while做法1.兔子生兔子 2.求100以内质数的和3.洗发水15元 牙膏5元 香皂2元 150元的算法
    博客迁移
    [WC2008]游览计划 「斯坦那树模板」
    [SDOI2009]HH去散步 「矩阵乘法计数」
    [HNOI2007]梦幻岛宝珠 「套路:分层 $DP$」
    多项式求逆
  • 原文地址:https://www.cnblogs.com/xiayao/p/9329427.html
Copyright © 2020-2023  润新知