React之组件之间的通讯

父子通讯

代码

import {Component} from 'react'

export default class Parent extends Component{
    state = {
        childMsg:"child msg before"
    }
    changeChildMsg = () => {
        this.setState({childMsg:"child msg after"})
    }
    render(){
        return (
            <>
            <h2>父组件</h2>
            <button onClick={this.changeChildMsg}>修改传值</button>
            <Child childMsg={this.state.childMsg}/>
            </>
        )
    }
}


class Child extends Component{
    render(){
        const {childMsg} = this.props
        return (
            <>
            <h2>子组件</h2>
            <div>{childMsg}</div>
            </>
        )
    }
}

效果

知识点

• 子组件想要拿到父组件的数据，一般通过props进行传值
• 如果想要对传入的值进行控制，请点击看props属性

子父通讯

代码

import {Component} from 'react'

export default class Parent extends Component{
    state = {
        childMsg:"will receive child msg"
    }


    getChildMsg = (childMsg) => {
        this.setState({childMsg:childMsg})
    }
    render(){
        return (
            <>
            <h2>父组件</h2>
            <div>{this.state.childMsg}</div>
            <Child toParentMsg={this.getChildMsg}/>
            </>
        )
    }
}


class Child extends Component{
    state = {
        toParentMsg:"child to parnet msg"
    }
    giveParentMsg = () => {
        // 尽量不要在render方法中调用props等，可能直接改变状态的方法
        this.props.toParentMsg(this.state.toParentMsg)
    }

    render(){
        return (
            <>
            <h2>子组件</h2>
            <button onClick={this.giveParentMsg}>给父组件信息</button>
            </>
        )
    }
}

效果

当我们点击给父组件信息的按钮的时候，就会发现在父组件可以显示子组件的信息了

知识点

1. 父组件想要拿到子组件的信息，就必须向子组件传递一个回调函数
2. 函数的参数为父组件想要拿到的信息
3. 函数体为setState用于改变父组件的状态

兄弟通讯

第一种方式

• 父子通讯和子父通讯相结合，

发布订阅模式

pubsub

官网

• 在组件加载完毕的时候(componentDidMount)挂载订阅事件
• 在组件将要卸载(componentWillUnmount)的时候，取消订阅

下载

npm install pubsub-js

使用

import {Component} from 'react'
import PubSub from "pubsub-js"

export default class Parent extends Component{

    render(){
        return (
            <>
            <h2>父组件</h2>
            <Child1 />
            <Child2 />
            </>
        )
    }
}


class Child1 extends Component{
    toChild2Msg = () => {
        // 发布
        PubSub.publish("receive","hello child1")
    }

    render(){
        return (
            <>
            <h2>子组件1</h2>
            <button onClick={this.toChild2Msg}>修改传值</button>
            </>
        )
    }
}

class Child2 extends Component{
    state = {
        receiveMsg:"空"
    }
    componentDidMount(){
        // 订阅
        PubSub.subscribe("receive",(msg,data) => {
            console.log(data);
            this.setState({
                receiveMsg:data
            })
        })
    }

    componentWillUnmount(){
        // 提升性能，卸载监听
        PubSub.unsubscribe("receive")
    }
    render(){
        const {receiveMsg} = this.state
        return (
            <>
            <h2>子组件2</h2>
            <div>接收到组件1的消息{receiveMsg}</div>
            </>
        )
    }
}

注意事项

在官网中有说明，我们尽量用定义常量的方法，来管理订阅和发布事件

// event-types.js
export const MY_TOPIC = Symbol('MY_TOPIC')

// somefile.js
import { MY_TOPIC } from './event-types.js'
PubSub.subscribe(MY_TOPIC, function (msg, data) {
	console.log(data)
});

PubSub.publish(MY_TOPIC, 'world');

除了PubSubJS库等还有Event库都可可以实现相同的效果

context 传值

这里的使用与hooks中的传值相同，详情点击，也可以参照官网 点击，他一般应用于对整个组件树进行传值

也可参照这个博客

路由

• 当跳转页面的时候，我们也可以通过路由进行传参，在接下来的文章总会进行说明

第三方状态管理

• 第三方的状态管理，如redux等，也会在接下来的文章中进行说明