React -- 组件间通信
分为三种类型的通信关系: 1、父组件向子组件通信 2、子组件向父组件通信 3、没有嵌套关系的组件之间的通信
父组件向子组件通信
父组件通过子组件的props向子组件传递需要的信息。
子组件向父组件通信
两种方法: 1、利用回调函数 2、利用自定义事件机制
一个栗子:
ListItem类:
class ListItem extends Component {
static defaultProps = {
text: '',
checked: false,
}
render() {
return (
<li>
<input type="checkbox" checked={this.props.checked}
onChange={this.props.onChange} /> <span>{this.props.value}</span>
</li>
);
}
}
List类:
class List extends Component {
static defaultProps = { list: [],
handleItemChange: () => {},
};
constructor(props) {
super(props);
this.state = { list: this.props.list.map(entry => ({
text: entry.text,
checked: entry.checked,
})),
};
}
onItemChange(entry) { const { list } = this.state;
this.setState({ list: list.map(prevEntry => ({
text: prevEntry.text,
checked: prevEntry.text === entry.text ?
!prevEntry.checked : prevEntry.checked,
})),
});
this.props.handleItemChange(entry);
}
render() {
return (
<div>
<ul>
{this.state.list.map((entry, index) => (
<ListItem
key={`list-${index}`}
value={entry.text}
checked={entry.checked}
onChange={this.onItemChange.bind(this, entry)}
/>
))}
</ul>
</div>
);
}
}
在这个栗子中,用的是回调函数的方法:在List组件中写入了handleItemChange方法,当ListItem发生变化的时候,我们就可以通过这个方法拿到数据了。
跨级组件通信
可以像前文那样,使用层层传递的props,但是这样代码会十分冗余。除了这个方法之外,我们可以使用context来实现跨级通信。
示例代码:
ListItem:
class ListItem extends Component {
static contextTypes = {
color: PropTypes.string,
};
render() {
const { value } = this.props; return (
<li style={{background: this.context.color}}>
<span>{value}</span>
</li>
);
}
}
List:
class List extends Component {
static childContextTypes = {
color: PropTypes.string,
};
getChildContext() {
return {
color: 'red',
};
}
render() { const { list } = this.props; return (
<div>
<ListTitle title={title} />
<ul>
{list.map((entry, index) => (
<ListItem key={`list-${index}`} value={entry.text} />
))}
</ul>
</div>
);
}
}
在这个栗子中,我们并没有给ListItem传递props,而是在父组件中定义了ChildContext,这样,从这一层开始的子组件都能拿到定义的context,例如本例中的color。
实际上,context一直存在于React源码中,但是,React官方并不建议大量使用context,因为尽管它可以减少逐层传递,但是,当组件结构复杂的时候,我们就并不知道context是从哪一层里传过来的。
大部分情况下,我们并不推荐使用context。使用context比较好的场景是真正意义上的全局信息且不会被更改:比如界面主题和用户信息等。
如果我们真的需要它,那么建议写成高阶组件来实现。有关高阶组件的内容,将会在后面的章节中进行介绍。
没有嵌套关系的组件通信
没有嵌套关系的组件,那只能通过一种可以影响全局的方式来考虑。 比如,刚才提到的自定义事件机制。
我们在处理时间的时候需要注意,在componentDidMount事件中,如果组件挂载完成,再订阅事件;当组件卸载的时候,需要在componentWillUnmount中取消事件的订阅。
栗子:
组件1:
class App extends Component {
componentDidMount() { this.itemChange = emitter.on('ItemChange', (data) => {
console.log(data);
});
} componentWillUnmount() {
emitter.removeListener(this.itemChange);
} render() {
return (
<List list={[{text: 1}, {text: 2}]} />
);
}
}
组件2的onItemChange方法:
onItemChange(entry) {
const { list } = this.state;
this.setState({
list: list.map(prevEntry => ({ text: prevEntry.text,
checked: prevEntry.text === entry.text ?
!prevEntry.checked : prevEntry.checked,
}))
}); emitter.emit('ItemChange', entry);
}
本例采用的是发布/订阅的方式。借用Node.js Events模块的浏览器版实现,在代码中需要加入:
import { EventEmitter } from 'events';
export default new EventEmitter();/**********把EventEmitter输出到组件中使用************/import ReactDOM from 'react-dom';import React, { Component, PropTypes } from 'react'; import emitter from './events';
总结:一般情况下,组件之间的通信应该尽可能的保持简洁,如果说出现了多级传递活着跨级传递时,一般需要首先重新审视下是否有更合理的方式。
上面这个栗子利用全局对象来保存事件,用广播的方式来处理事件,这样的设计方法很常见,但是也容易带来逻辑的混乱。
- Go语言中Select语句用法实例
- 从Mysql备份中恢复单个表
- spark编译:构建基于hadoop的spark安装包及遇到问题总结
- Mysql忘记root密码的恢复方法
- 深入剖析Go语言编程中switch语句的使用
- MySQL中DDL、DML、DCL的那些语句
- 如何查看spark与hadoop、kafka、Scala、flume、hive等兼容版本【适用于任何版本】
- golang实现简单的udp协议服务端与客户端示例
- Oracle 12c系列(三)|存储资源隔离 Flex Diskgroup
- Scala的map实现key和value排序及各种排序比较等知识讨论
- crontab执行后发送邮件到指定邮箱
- PHP-魔术变量
- 日志分析实战之清洗日志小实例7:查看样本数据,保存统计数据到文件
- hdu----(1671)Phone List(Trie带标签)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- tp5框架使用composer实现日志记录功能示例
- python 图像插值 最近邻、双线性、双三次实例
- tp5(thinkPHP5)框架实现多数据库查询的方法
- Python-openCV开运算实例
- php curl获取https页面内容,不直接输出返回结果的设置方法
- 详解php中curl返回false的解决办法
- Pytorch mask-rcnn 实现细节分享
- pytorch中的weight-initilzation用法
- python安装读取grib库总结(推荐)
- PHP5.5新特性之yield理解与用法实例分析
- php如何利用pecl安装mongodb扩展详解
- PHP微信支付结果通知与回调策略分析
- PHP标准库(PHP SPL)详解
- php成功操作redis cluster集群的实例教程
- 在pytorch中动态调整优化器的学习率方式