React 组件间通信 总结

组件间通信

5.1.1. 方式一: 通过props传递

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

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

3)         一般数据-->父组件传递数据给子组件-->子组件读取数据

4)         函数数据-->子组件传递数据给父组件-->子组件调用函数

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

1)         工具库: PubSubJS

2)         下载: npm install pubsub-js --save

3)         使用:

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

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

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

5.1.3. 方式三: redux

后面详细学习

 

发布订阅例子：

// 导入
import PubSub from "pubsub-js"

// 在有数据的地方进行发布
class Data extends React.Component{
  pubmsg = ()=>{
      PubSub.publish("频道","频道发布的消息")
  }
  render() {
      return(
          <button onClick={this.pubmsg}>Data组件,发布消息</button>
          )
      }
  }
  
  // 订阅
  class App extends Component {
    // 组件将要被渲染的时候进行订阅
    componentWillMount() {
      PubSub.subscribe("频道", (msg,data)=> {
        console.log(msg,data)
      })
    }
  
    render() {
      return (
        <div className="App">
           <Data />
        </div>
      );
    }
  }