在开发项目的时候 我们基本上是按照模块组件来划分的 也就是一个个模块单独开发然后再合并 最后打包成为一个独立的作品。既然一个项目里面包含N个组件 那么这些组件是如何互通数据呢？
其实这个很简单this.props嘛 搞定。。是的 这确实可以搞定 但只能说是搞定部分情况 别忘了这种方法只适于父子级关系 如果两个不相干的组件呢 没有任何继承关系的呢 这就头痛了
说到这里我们也不妨来看看一般情况下父子级关系的组件是如何通讯的
父-子
// A(父级组件):
render(){
return(
<View>
<B value={this.props.value}></B>
</View>
)
};
子-父
// A(父级组件):
changeValue(flag){
console.log(flag); //true
};
render(){
return(
<View>
<B callback={this.changeValue}></B>
</View>
)
};
// B(子级组件):
press(){
this.props.callback(true)
};
render(){
return(
<View onPress={this.press}></View>
)
};
上面代码就是常见的 有"关系"组件之间的通讯了 主要是通过this.props 和 callback的方式来实现的
那如何实现那些没有关系组件之间的通讯呢 这就是下面要讲的内容了
利用自定义事件机制来通讯？
步入正题
为了更好的理解事件的通讯机制 让我来举个栗子 看图
这个结构图很简单 一看就懂 但是还是让我在这里啰嗦一下
主要的思想: ManagerEvent作为一个中介 任何要通讯的组件都先和它来通讯 然后再由ManagerEvent去和你想要"发生关系"的组件去通讯。
上代码先：managerEvent.js
var ManagerEvent = function() {
this.handlers = {};
this.BROADCAST = "broadcast";
}
ManagerEvent.prototype = {
constructor: ManagerEvent,
addEvent: function(handler) {
if (typeof this.handlers[ManagerEvent.BROADCAST] == "undefined") {
this.handlers[ManagerEvent.BROADCAST] = [];
}
this.handlers[ManagerEvent.BROADCAST].push(handler);
},
dispatchEvent: function(event) {
if (!event.target) {
event.target = this;
}
if (this.handlers[event.type] instanceof Array) {
var handlers = this.handlers[event.type];
for (var i = 0, len = handlers.length; i < len; i++) {
handlers[i](event);
}
}
},
removeEvent: function(type, handler) {
if (this.handlers[type] instanceof Array) {
var handlers = this.handlers[type];
for (var i = 0, len = handlers.length; i < len; i++) {
if (handlers[i] === handler) {
break;
}
}
handlers.splice(i, 1);
}
}
}
module.exports = new ManagerEvent();
使用
step1：在你需要通讯的模块里引用 如：import OS from 'ManagerEvent';
step2：
如果当前模块需要去影响其他模块 用dispatchEvent
OS.dispatchEvent({
action:'XXX_XXX_XXX', //动作类型 （找谁通讯）
data:{ //动作参数 （告诉它这个是数据）
id:2,
name:'zkey'
}
});
//提醒：在模块里任何一个地方都可以调用dispatchEvent来发送事件
如果当前模块需要被其他模块影响 比如当前模块想关心XXX_XXX_XXX类型的事件 只需在模块当中 用 addEvent来监听就可以
OS.addEvent(function(e){
if(e.action === 'XXX_XXX_XXX'){
console.log(e.data); //{id:2,name:'zkey'}
}
})
//提醒：代码一般放在模块构造函数里 初始化就让执行
为了更好的管理action 我这里通常的做法会把所有action都统一放在一个模块里 然后谁用谁来调 这样：action.js
module.exports = {
SWITCH_TAB:'切换路由',
API_LOAD_SUCCESS:'数据加载完成',
....
}
简单的示例
A模块Amod.js
import React from 'react';
import {
Text,
View
} from 'react-native';
//引入事件管理模块
import OS from 'managerEvent';
//引入事件类型（动作）
import ACT from 'action';
export default class Amod extends React.Component {
constructor(props) {
super(props);
}
sendInfo(){
OS.dispatchEvent({
action:ACT.GET_INFO,
data:{name:'zkey',age:'30','type':'帅'}
})
}
render() {
return (
<View>
<Text onPress={this.sendInfo}>点击把数据给到Bmod里</Text>
</View>
);
}
}
B模块 Bmod.js
import React from 'react';
import {
Text,
View
} from 'react-native';
//引入事件管理模块
import OS from 'managerEvent';
//引入事件类型（动作）
import ACT from 'action';
export default class Bmod extends React.Component {
constructor(props) {
super(props);
this.init();
}
init(){
OS.addEvent(function(e){
if(e.action === ACT.GET_INFO){
console.log(e.data); //{name:'zkey',age:'30','type':'帅'}
}
})
}
}
action.js
module.exports = {
GET_INFO:'获取信息',
}
总结
1.当任何模块之间需要通讯的时候 首先在action.js创建一个动作标示 然后在需要发出动作的地方调用dispatchEvent发送你的需求到managerEvent.js里 然后由managerEvent通知项目里所有监听的模块 最后各个模块通过if(e.action === ACT.XXX_XXX_XXX)的方式来判断该通知是否与我有关 如果是我关注的通知 我就做相应更新 通过e.data来获取更新数据 反之则什么都不做。
2.一个模块里面可以监听多个事件动作如
OS.addEvent(function(e){
if(e.action === ACT.GET_INFO){
//...
}
if(e.action === ACT.LOAD_SUCCESS){
//...
}
})
3.同一个模块里可以是发送事件也可以监听事件
4.发送事件的时候可以带data或者不带
5.参与通讯的模块要确保已经被渲染完成
下面是managerEvent来做的一个 路由和导航之间的互相同步例子（图片）
