pubsub.js消息的發(fā)布訂閱

• 組件間數(shù)據(jù)的傳遞方式
  • props，一層一層傳遞
  • 消息的發(fā)布訂閱，當(dāng)嵌套層數(shù)比較多，可以用此工具庫(kù)
• 下載

  $ npm install pubsub-js --save
  

• 使用

  // 導(dǎo)入
  import PubSub from "pubsub-js"
  
  // 在有數(shù)據(jù)的地方進(jìn)行發(fā)布
  class Data extends React.Component{
    pubmsg = ()=>{
        PubSub.publish("頻道","頻道發(fā)布的消息")
    }
    render() {
        return(
            <button onClick={this.pubmsg}>Data組件,發(fā)布消息</button>
            )
        }
    }
    
    // 訂閱
    class App extends Component {
      // 組件將要被渲染的時(shí)候進(jìn)行訂閱
      componentWillMount() {
        PubSub.subscribe("頻道", (msg,data)=> {
          console.log(msg,data)
        })
      }
    
      render() {
        return (
          <div className="App">
             <Data />
          </div>
        );
      }
    }