文章目录
  1. 1. 父组件与子组件
    1. 1.1. 父-子 通信
    2. 1.2. 子-父 通信
  2. 2. 通用组件之间传值
    1. 2.1. Event
    2. 2.2. Pub/Sub
    3. 2.3. 单向数据流
    4. 2.4. Events in React
    5. 2.5. 参考
  3. 3. 结束语

最近在学习使用React作为前端的框架,《React使用笔记》系列用于记录过程中的一些使用和解决方法。
本文结合前面出现过的一些方法,简单介绍组件间的通信。

父组件与子组件


父-子 通信

  • 利用props属性
    父组件利用props向子组件传值,在使用React开发的过程中经常会使用到。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//父组件
var Parent = React.createClass({
getInitialState: function () {
return {
parent: 'from parent'
};
},
render: function() {
return (
<Child parent={this.state.parent} />
);
}
});
// 子组件
var Child = React.createClass({
render: function () {
// 从父组件获取的值
var parent = this.props.parent;
return (
<p>{parent}</p>
);
}
});

如果组件嵌套层次太深,那么从外到内组件的交流成本就变得很高,通过props传递值的优势就不那么明显了。

  • 利用refs属性
    refs属性可获取子组件,当然父组件可以通过调用子组件的方法来给子组件传值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//父组件
var Parent = React.createClass({
changeChild: function(){
// 通过refs属性调用子组件方法改变子组件的值
this.refs.child.setState({child: 'now from parent'});
},
render: function() {
return (
<div>
//子组件绑定ref属性
<Child ref="child" />
<button onClick={this.changeChild} />
</div>
);
}
});
// 子组件
var Child = React.createClass({
getInitialState: function () {
return {
child: 'from child',
};
},
render: function () {
return (
<p>{this.state.child}</p>
);
}
});

子-父 通信

  • 利用props属性
    既然父组件可以通过props属性向子组件传值,子组件可用父组件的方法反向给父组件传值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//父组件
var Parent = React.createClass({
getInitialState: function () {
return {
parent: 'from parent',
child: '',
};
},
getFromChild: function(value){
//子组件调用该方法返回值
this.setState({child: value});
},
render: function() {
return (
<div>
<p>child: {this.state.child}</p>
<Child parent={this.state.parent} getFromChild={this.getFromChild} />
</div>
);
}
});
// 子组件
var Child = React.createClass({
render: function () {
// 从父组件获取的值
var parent = this.props.parent;
return (
<p>{parent}</p>
// 从父组件获取的方法返回值
<button onClick={this.props.getFromChild.bind(null,'form child')} />
);
}
});
  • 利用refs属性
    refs属性允许你引用render()返回的相应的支撑实例。该属性多用于获取子组件的真实DOM元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//父组件
var Parent = React.createClass({
getInitialState: function () {
return {
parent: 'from parent',
child: '',
};
},
getFromChild: function(){
// 通过refs属性从子组件获取state状态
this.setState({child: this.refs.child.state.child});
},
render: function() {
return (
<div>
<p>child: {this.state.child}</p>
//子组件绑定ref属性
<Child ref="child" parent={this.state.parent} getFromChild={this.getFromChild} />
</div>
);
}
});
// 子组件
var Child = React.createClass({
getInitialState: function () {
return {
child: 'from child',
};
},
render: function () {
// 从父组件获取的值
var parent = this.props.parent;
return (
<p>{parent}</p>
<button onClick={this.props.getFromChild} />
);
}
});

通用组件之间传值


如果组件之间没有任何关系,组件嵌套层次比较深,或者你为了一些组件能够订阅、写入一些信号,不想让组件之间插入一个组件,让两个组件处于独立的关系时,我们可以使用下面的方法。

Event

1
2
3
4
5
6
7
8
//使用EventEmitter
import {EventEmitter} from 'events';
EventEmitter.prototype.emit() //发送事件
EventEmitter.prototype.on() //捕获事件
//使用EventListener
addEventListener() //捕获change事件
var event = Document.createEvent(); //创建事件
dispatchEvent(event) //发送事件

Pub/Sub

全局广播的方式来处理事件,可参考Redux。

单向数据流

可以创建单向数据流,使用一个数据中心管理,可参考Flux。

Events in React

使用 React 事件的时候,必须关注下面两个方法:

1
2
componentDidMount
componentWillUnmount

在componentDidMount事件中,如果组件挂载(mounted)完成,再订阅事件。
当组件卸载(unmounted)的时候,在componentWillUnmount事件中取消事件的订阅。

参考

《React 组件之间如何交流》

结束语


React中没有像Angular中服务的概念,这也是因为React只是View层的原因吧。数据的流动和共享方面我们需要自己想办法,又或者是借助Flux、Redux等的模式来管理数据。

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. 父组件与子组件
    1. 1.1. 父-子 通信
    2. 1.2. 子-父 通信
  2. 2. 通用组件之间传值
    1. 2.1. Event
    2. 2.2. Pub/Sub
    3. 2.3. 单向数据流
    4. 2.4. Events in React
    5. 2.5. 参考
  3. 3. 结束语