react(二):组件的通信
对于组件来说,通信无非两种,父子组件通信,和非父子组件通信
一、父子父子组件通信
1、父组件给子组件传值
对于父组件来说,props是他们之间的媒介
class Parent extends Component{
state = {
msg: 'start'
}; componentDidMount() {
setTimeout(() => {
this.setState({
msg: 'end'
});
}, 1000);
} render() {
return <Child_1 msg={this.state.msg} />;
}
} class Child_1 extends Component{
render() {
return <p>{this.props.msg}</p>
}
}
子组件通过接受父组件的props来获取父组件中的数据
2、子组件给父组件传值
途径是先在父组件中注册一个回调函数,子组件通过props获取到这一回调函数并执行
class Parent extends Component{
state = {
msg: 'start'
}; transferMsg(msg) {
this.setState({
msg
});
} render() {
return <div>
<p>child msg: {this.state.msg}</p>
<Child_1 transferMsg = {msg => this.transferMsg(msg)} />
</div>;
}
} class Child_1 extends Component{
componentDidMount() {
setTimeout(() => {
this.props.transferMsg('end')
}, 1000);
} render() {
return <div>
<p>child_1 component</p>
</div>
}
}
这样在子组件中用传参的方式,获取到子组件中的数据,进而改变了父组件的状态
3、祖先组件给后代组件(就是组件之间的嵌套已经超过一层)
这样的话也还可以通过props来传值,但是一层一层的传有点麻烦,我们可以使用... 运算符(三个点是es6里面的剩余展开属性),以更简洁的方式传递给更深层级的子组件。通过这种方式,不用考虑性能的问题,通过 babel 转义后的 ... 运算符
性能和原生的一致
class Child_1 extends Component{
render() {
return <div>
<p>{this.props.msg}</p>
<Child_1_1 {...this.props}/>
</div>
}
} class Child_1_1 extends Component{
render() {
return <p>{this.props.msg}</p>
}
}
二、非父子组件之间的传值
对于非父子组件来说缺少连接的纽带,很难通过props联系到一起(要是不是很远的话也能用,但是要是过深就特别麻烦),但是我们可以使用全局的一些机制来实现,比如react提供了一种上下文机制
class Brother1 extends React.Component{
constructor(props){
super(props);
this.state = {}
} render(){ return (
<div>
<button onClick={this.context.refresh}>
更新兄弟组件
</button>
</div>
)
}
}
Brother1.contextTypes = {
refresh: React.PropTypes.any
}
class Brother2 extends React.Component{
constructor(props){
super(props);
this.state = {}
} render(){
return (
<div>
{this.context.text || "兄弟组件未更新"}
</div>
)
}
}
Brother2.contextTypes = {
text: React.PropTypes.any
}
class Parent extends React.Component{
constructor(props){
super(props);
this.state = {}
} getChildContext(){
return {
refresh: this.refresh(),
text: this.state.text,
}
} refresh(){
return (e)=>{
this.setState({
text: "兄弟组件沟通成功",
})
}
}
render(){
return (
<div>
<h2>兄弟组件沟通</h2>
<Brother1 />
<Brother2 text={this.state.text}/>
</div>
)
}
}
Parent.childContextTypes = {
refresh: React.PropTypes.any,
text: React.PropTypes.any,
}
使用方法
使用getChildContext
方法将属性传递给子组件,并使用childContextTypes
声明传递数据类型,子组件中需要显式地使用contextTypes
声明需要用到的属性的数据类型。
需要传递进context参数才可以在constructor方法中使用context,要不然React将会报错。
在组件中,通过this.context访问context中的属性或方法。
未完待续。。。
关于组件之间的通信还有更好的方式,比如说用redux来管理数据流,之后单独整理关于redux的部分。
react(二):组件的通信的更多相关文章
- React的组件间通信
一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...
- React Native组件间通信
React Native组件间通信 React Native组件的关系有:父子关系.无直接关系.组件间通信主要针对这两类来讨论. 一.父组件和子组件之间通信 父组件向子组件传递消息.数据通过对子组件的 ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- React 精要面试题讲解(二) 组件间通信详解
单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...
- React中组件之间通信的方式
一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同 ...
- React独立组件间通信联动
React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
- React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通 ...
- react 嵌套组件的通信
在react中经常会用到的组件嵌套,如下: 图中 parent本身是一个自定义的组件,然后内部又加入了 child的自定义组件,那么这种情况,父子之间如何通信 react中在父组件里面有一个 this ...
- react 父子组件互相通信
1,父组件向子组件传递 在引用子组件的时候传递,相当于一个属性,例如: class Parent extends Component{ state = { msg: 'start' }; render ...
随机推荐
- 利用Intent.ACTION_SEND进行分享
安卓系统本身可以很简便的实现分享功能,因为我们只需向startActivity传递一个ACTION_SEND的Intent,系统就为我们弹出一个应用程序列表.其实在系统的文件管理器中,这应该是我们常用 ...
- (转)python学习链接
原文:http://www.cnblogs.com/spykids/category/782491.html http://www.cnblogs.com/alex3714/category/7707 ...
- JavaScript比较运算符——"== != === !=="区别
JavaScript的比较和逻辑运算符用于测试 true 或 false. 比较运算符在逻辑语句中使用,以测定变量或值是否相等. 例如给定 x=5,下面的表格解释了比较运算符: 1. == 和===的 ...
- Flyweight_pattern--reference
http://en.wikipedia.org/wiki/Flyweight_pattern In computer programming, flyweight is a software desi ...
- pacman usage
pacman使用 安装了系统时候, 应该立马使用pacman-mirrors -c China更新源, 再使用pacman -Syyn更新系统 编辑/etc/pacman.conf添加 [archli ...
- Entity Framework中IQueryable, IEnumerable, IList的区别[转]
使用工具追踪EF生成的SQL 使用Entity Framework等ORM框架的时候,SQL对于使用者来说是透明的,往往很多人也不关心ORM所生成的SQL,然而系统出现性能问题的时候就必须关注生成的S ...
- 对于ESP、EBP寄存器的理解
原文:http://blog.csdn.net/yeruby/article/details/39780943 esp是栈指针,是cpu机制决定的,push.pop指令会自动调整esp的值: ebp只 ...
- 微信小程序实战篇:商品属性联动选择(案例)
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- < ...
- Yesterday is history, tomorrow is a mystery, but today is a gift.
Yesterday is history, tomorrow is a mystery, but today is a gift.昨天已成历史,明天太过神秘,而今天是一份礼物.
- GitHub webstorm 及 README.md 姿势
README.md 语法格式: 规范的README文件开头都写上一个标题,这被称为大标题. 标题: #一级标题 ##二级标题 ###三级标题 ####四级标题 #####五级标题 ######六级标题 ...