组件间通信

方式一: 通过 props 传递

1) 共同的数据放在父组件上, 特有的数据放在自己组件内部(state)

2) 通过 props 可以传递一般数据和函数数据, 只能一层一层传递

3) 一般数据–>父to子–>子组件读取数据

新的数据以props出现, 因此在componentWillReceiveProps中编写ajax请求代码

4) 函数数据–>子to父–>子组件调用函数

存在的问题:

• 孙子组件需要逐层传递
• cousin组件需要以父组件作为媒介

• props属性只能通过外部接口赋值, state属性只能通过this.setState设置

方式二: 使用消息订阅(subscribe)-发布(publish)机制

很好解决props上述两个问题

订阅相当于绑定, 发布相当于触发.

1) 工具库:PubSubJS

2) 下载:npm install pubsub-js –save (该机制对多种语言都有效, 下载js版本

3) 使用:

import PubSub from'pubsub-js'//引入 

PubSub.subscribe('delete',function(data){});//订阅

 PubSub.publish('delete',data)//发布消息

• 回调函数最好使用箭头函数 比如在回调函数中使用this.setState报错

• 利用PubSub可以很方便地实现cousin通信

• sub&pub的判断: 在触发事件的地方pub消息

• 订阅一般发生在componentDidMount中

  (对于函数数据, 表面上父to子, 其实是子to父. 因此pubsub可能与直觉相违背)

  如父元素中的数据, 由子元素的事件导致改变. 则父元素将会把自身的update函数传给子元素, 由子元素调用. 然而在pubsub中, 应该改写为子元素将事件信息pub, 父元素sub监听, 利用子元素的信息调用update

方式三:redux

后面专门讲解