By
被删
更新日期:
最近在学习使用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(){
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(){
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
|
import {EventEmitter} from 'events';
EventEmitter.prototype.emit()
EventEmitter.prototype.on()
addEventListener()
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
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢
