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

... ...

#####}

原文地址:https://www.cnblogs.com/xiayao/p/9329427.html

时间: 2024-08-04 04:14:20

自己写的一个React事件流处理框架的相关文章

自己写了一个react项目用的文本编辑器

1.支持 拖拽 截图 点击上传图片 2.支持 粘贴 excel表格 3.字体背景颜色自定义 4.上传代码 5.支持点击图片放大功能 6.添加链接地址 7.支持 props 里存在 disabled  不可编辑 用法 :先安装  npm install  react-contenteditable  将代码保存为单独js  在父组件用即可 通过antd的form组件 获取编辑后的值 {getFieldDecorator('description', { initialValue:'', rules

dva+antd写的一个react例子--服务器nginx 的配置

location ^~ /crm { rewrite ^/crm/(.*)(\.js|\.css|\.png|\.jpg|\.jpeg|\.gif|index\.php|robots\.txt)$ /$1$2 break; rewrite .* /index.html break; root /etc/nginx/static2/CIF_crm-frontend/dist/crm/; } 以上是nginx的配置 { "entry": "src/index.js",

粗浅的总结下事件流

什么是事件流?以及为什么要有事件流? 简单的说,事件流就是,确认触发条件满足时,事件对应函数的调用顺序.举个例子,鼠标光标在某个按钮上点击了,按钮又绑定了mousedown事件,那么其对应的函数就会调用.而其实,光标落下的位置也在document.window的范围内,或许还可能在其他元素的和模型内.如果这些元素也都绑定了mousedown事件,那么哪个元素的mousedown事件对应的函数先调用呢?这就需要确认一个发生的顺序问题. 具体的说,事件流分为三个阶段,即捕获阶段.目标(处理)阶段.冒

JavaScript事件流原理解析

一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国庆的这段时间来补一补这个不足,也为了国庆后能够更好的完成公司的业务打下基础 二.大致了解什么是JavaScript事件流 首先这里先来举一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta chars

React事件机制-事件分发

事件分发 之前讲述了事件如何绑定在document上,那么具体事件触发的时候是如何分发到具体的监听者呢?我们接着上次注册的事件代理看.当我点击update counter按钮时,触发注册的click事件代理. function dispatchInteractiveEvent(topLevelType, nativeEvent) { interactiveUpdates(dispatchEvent, topLevelType, nativeEvent); } function interacti

三言两语之js事件、事件流以及target、currentTarget、this那些事

厉害了我的哥——你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不巧.正要运用了,吾才发现吾压根就没记住...其实要讲清楚target.currentTarget,我们就不得不说一下事件流这个概念,而要言明事件流,我们也要晓得一下神马是事件以及一些周边生态概念,这三个概念是必须放在一块说,我们才能对能对这部分的知识有很好的理解滴,网上信息太零散,于是乎就有了这篇算

DOM事件探秘之事件流与事件处理程序

1.事件流:描述的是从页面中接受事件的顺序 ①.事件冒泡流:即时间最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档).      栗子:若<body><div><input type="button"/></div></body>次结构,点击按钮时,默认点了按钮的容器 默认点了body,默认点了html,默认点了document. ②.事件捕获:不太具体的节点应该更早接收到事

DOM事件流

“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段 事件捕获:不太具体的节点应该更早的接收到事件,而最具体的节点应该最后接收到事件:(DOM2规范要求从document开始传播,但是浏览器从window对象开始传播) 事件冒泡:最具体的节点先接收到事件,然后逐级向上传播到较为不具体的节点 接下来我用一个代码给大家演示一下DOM流的事件传递流程: 1 <body> 2 <div id="test1"> 3 1 4 <div

关于DOM 事件流的三个阶段

一丶 流 什么是流? 比如 react 中的单项数据流,Node.js 中的流,或者本文中的 DOM 事件流,都是流的具体体现.专业地讲,流是程序输入或输出的一个连续的字节序列:通俗地讲,流是有方向的数据. 二丶 事件流 什么是事件流? 假想一下,现在有一组同心圆,你把手指在最里面的圆心上,与此同时,你也正在指着外层的其他同心圆.假设最里面的圆是 DOM 中的一个按钮,那就是说,你点击按钮这个元素的同时,也点击了他的所有父级元素.那么这个点击事件 DOM 要怎么处理呢?事实上,这个点击事件并非只