react-发布订阅

使用发布订阅需要下载并引入一个库

npm i pubsub-js

import Pubsub from 'pubsub-js'

发布

Pubsub.publish('message',data)

第一个参数是发布的消息的名称，用于与订阅者相匹配，第二个参数可以是数据，也可以是一个回调函数

订阅

Pubsub.subscribe('message',(va1,va2)=>{})

第一个参数是消息的名称，用于与发布者相匹配，第二个参数是一个回调函数，回调函数的参数有两个，第一个参数也是消息的名称，第二个参数是发布者发出的数据

import React, { Component } from 'react'
import './App.css'
import PubSub from 'pubsub-js'

export default class App extends Component {
    state = {
        name: 'wang'
    }

    handleChange = (text) => {
        this.setState({
            name: text
        })
    }
    render() {
        return (
            <div className='app'>
                <Child name={this.state.name} handleChange={this.handleChange} />
                <Child2 />
            </div>
        )
    }
}

class Child extends Component {
    render() {
        return (
            <div>
                <input type='text' value={this.props.name} onChange={(e) => {
                    this.props.handleChange(e.target.value)
                    PubSub.publish('event1', () => { console.log('wang') })
                }} />
            </div>
        )

    }
}
class Child2 extends Component {
    state = {
        text: ''
    }
    componentDidMount() {
        PubSub.subscribe('event1', (eventName, value) => {
            setTimeout(() => {
                value()
            }, 1);
        })
    }
    render() {
        return (
            <div>
                <p>{this.state.text}</p>
            </div>
        )
    }
}