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>
      );
    }
  }