React组件间信息传递方式

组件之间传递信息方式，总体可分为以下5种：

1.（父组件）向（子组件）传递信息

2.（父组件）向更深层的（子组件） 进行传递信息  >>利用（context）

3.（子组件）向（父组件）传递信息

4.没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）

5.利用react-redux进行组件之间的状态信息共享

一.（父组件）向（子组件）传递信息 >>>主要是通过 prop进行传值

来看下面的例子

1. <span style="font-size:18px;">//父组件
2. var MyContainer = React.createClass({
3. getInitialState: function () {
4. return {
5. checked: false
6. };
7. },
8. render: function() {
9. return (
10. <ToggleButton text="Toggle me" checked={this.state.checked} />
11. );
12. }
13. });
14. // 子组件
15. var ToggleButton = React.createClass({
16. render: function () {
17. // 从（父组件）获取的值
18. var checked = this.props.checked,
19. text = this.props.text;
20. return (
21. <label>{text}: <input type="checkbox" checked={checked} /></label>
22. );
23. }
24. });</span>

以上这个例子，子组件通过 prop拿到了text值以及checked的属性值；那么当子组件要拿到祖父级组件的信息，也是可以通过prop进行逐层的获取。来看下下面的例子。

官方文档的示例代码如下:

1. <span style="font-size:18px;">var Button = React.createClass({
2. render: function() {
3. return (
4. <button style={{background: this.props.color}}>
5. {this.props.children}
6. </button>
7. );
8. }
9. });
10. var Message = React.createClass({
11. render: function() {
12. return (
13. <div>
14. {this.props.text} <Button color={this.props.color}>Delete</Button>
15. </div>
16. );
17. }
18. });
19. var MessageList = React.createClass({
20. render: function() {
21. var color = "purple";
22. var children = this.props.messages.map(function(message) {
23. return <Message text={message.text} color={color} />;
24. });
25. return <div>{children}</div>;
26. }
27. });</span>

以上的例子中第一层组件（MessageList）想要将color值传递到第三层组件（Button），通过第二层组件（Message）进行了传递。进而实现了。但是这种方式，并不是很优雅，如果传递的层级更多时，中间的层级都需要来传递，数据的传递变的更加繁琐。所以我们就会想到，是否可以"越级"获取数据。这时候就需要使用context。能帮你 "越级" 传递数据到组件中你想传递到的深层次组件中。

二.（父组件）向更深层的（子组件） 进行传递信息  >>利用（context）

利用context，改进后的代码如下：

1. <span style="font-size:18px;">var Button = React.createClass({
2. // 必须指定context的数据类型
3. contextTypes: {
4. color: React.PropTypes.string
5. },
6. render: function() {
7. return (
8. <button style={{background: this.context.color}}>
9. {this.props.children}
10. </button>
11. );
12. }
13. });
14. var Message = React.createClass({
15. render: function() {
16. return (
17. <div>
18. {this.props.text} <Button>Delete</Button>
19. </div>
20. );
21. }
22. });
23. var MessageList = React.createClass({
24. //父组件要定义 childContextTypes 和 getChildContext()
25. childContextTypes: {
26. color: React.PropTypes.string
27. },
28. getChildContext: function() {
29. return {color: "purple"};
30. },
31. render: function() {
32. var children = this.props.messages.map(function(message) {
33. return <Message text={message.text} />;
34. });
35. return <div>{children}</div>;
36. }
37. });</span>

以上代码中通过添加 childContextTypes 和 getChildContext() 到 第一层组件MessageList （ context 的提供者），React 自动向下传递数据然后在组件中的任意组件（也就是说任意子组件，在此示例代码中也就是 Button ）都能通过定义 contextTypes（必须指定context的数据类型） 访问 context 中的数据。这样就不需要通过第二层组件进行传递了。

指定数据并要将数据传递下去的父组件要定义 childContextTypes 和 getChildContext() ；想要接收到数据的子组件 必须定义 contextTypes 来使用传递过来的 context 。

三.（子组件）向（父组件）传递信息

来看下面的例子

1. <span style="font-size:18px;">// 父组件
2. var MyContainer = React.createClass({
3. getInitialState: function () {
4. return {
5. checked: false
6. };
7. },
8. onChildChanged: function (newState) {
9. this.setState({
10. checked: newState
11. });
12. },
13. render: function() {
14. var isChecked = this.state.checked ? 'yes' : 'no';
15. return (
16. <div>
17. <div>Are you checked: {isChecked}</div>
18. <ToggleButton text="Toggle me"
19. initialChecked={this.state.checked}
20. callbackParent={this.onChildChanged}
21. />
22. </div>
23. );
24. }
25. });
26. // 子组件
27. var ToggleButton = React.createClass({
28. getInitialState: function () {
29. return {
30. checked: this.props.initialChecked
31. };
32. },
33. onTextChange: function () {
34. var newState = !this.state.checked;
35. this.setState({
36. checked: newState
37. });
38. //这里将子组件的信息传递给了父组件
39. this.props.callbackParent(newState);
40. },
41. render: function () {
42. // 从（父组件）获取的值
43. var text = this.props.text;
44. // 组件自身的状态数据
45. var checked = this.state.checked;
46. //onchange 事件用于单选框与复选框改变后触发的事件。
47. return (
48. <label>{text}: <input type="checkbox" checked={checked}                 onChange={this.onTextChange} /></label>
49. );
50. }
51. });</span>

以上例子中，在父组件绑定callbackParent={this.onChildChanged}，在子组件利用this.props.callbackParent(newState),触发了父级的的this.onChildChanged方法，进而将子组件的数据（newState）传递到了父组件。
这样做其实是依赖 props 来传递事件的引用，并通过回调的方式来实现的。

四.没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）

如果组件之间没有任何嵌套关系，组件嵌套层次比较深，我们该怎样去传递信息呢？

下面来看一个例子

这个例子需要引入一个PubSubJS 库，通过这个库你可以订阅的信息，发布消息以及消息退订。
PubSubJS 具体可参考下面的内容http://blog.csdn.net/u011439689/article/details/51955991

1. <span style="font-size:18px;">// 定义一个容器（将ProductSelection和Product组件放在一个容器中）
2. var ProductList = React.createClass({
3. render: function () {
4. return (
5. <div>
6. <ProductSelection />
7. <Product name="product 1" />
8. <Product name="product 2" />
9. <Product name="product 3" />
10. </div>
11. );
12. }
13. });
14. // 用于展示点击的产品信息容器
15. var ProductSelection = React.createClass({
16. getInitialState: function() {
17. return {
18. selection: 'none'
19. };
20. },
21. componentDidMount: function () {
22. //通过PubSub库订阅一个信息
23. this.pubsub_token = PubSub.subscribe('products', function (topic, product) {
24. this.setState({
25. selection: product
26. });
27. }.bind(this));
28. },
29. componentWillUnmount: function () {
30. //当组件将要卸载的时候，退订信息
31. PubSub.unsubscribe(this.pubsub_token);
32. },
33. render: function () {
34. return (
35. <p>You have selected the product : {this.state.selection}</p>
36. );
37. }
38. });
39. var Product = React.createClass({
40. onclick: function () {
41. //通过PubSub库发布信息
42. PubSub.publish('products', this.props.name);
43. },
44. render: function() {
45. return <div onClick={this.onclick}>{this.props.name}</div>;
46. }
47. });</span>

ProductSelection和Product本身是没有嵌套关系的，而是兄弟层级的关系。但通过在ProductSelection组件中订阅一个消息，在Product组件中又发布了这个消息，使得两个组件又产生了联系，进行传递的信息。所以根据我个人的理解，当两个组件没有嵌套关系的时候，也要通过全局的一些事件等，让他们联系到一起，进而达到传递信息的目的。

五.利用react-redux进行组件之间的状态信息共享

如果是比较大型的项目，可以使用react-redux，这方面的资料可以参考阮一峰的网络日志。
地址：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.