R5.React组件通信详解-CSDN博客

ps:让几个好友看了前几篇文章，提了几个建议，主要就是说文章需要在提炼，需要精简。这一章介绍组件通信，组件与组件之间如何传递数据。概览：

1.父子通信

如图，父子组件之间通信：子组件可通过props接收父组件传递的数据；父组件通过函数回调接收子组件数据。父子对话简单实现如下：

class SimpleFather extends Component{

receptionData = (data) => {
    console.log(`son say:${data}`);// 打印出子组件传回的信息
}

render(){
    return (
        <div>
            <SimpleSon say={'hello son'} whatSaySon={this.receptionData}/>
            {/*通过say属性给子组件传递数据，可传递任何类型，这里是字符串*/}
        </div>
    )
}
}
复制代码

子组件

class SimpleSon extends Component{

ToResponse = () => {
    const { whatSaySon } = this.props;// 通过props拿到父组件的回调函数
    whatSaySon('hello father');// 执行父组件的回调函数
}

render(){
    // 子组件通过props拿到父组件的值
    const { say } = this.props;
    return (
        <div>
            <p>{say}</p>
            <button onClick={this.ToResponse}>回复</button>
        </div>
    )
}
}
复制代码

2.跨组件通信

1）.context和函数回调的跨级通信实例

import React,{ Component } from 'react';
const cont = React.createContext('hello everyone');

class SimpleContext1 extends Component{

constructor(props){
    super(props);
    this.state = {
        options:{
            say:'hello',
            callBack:this.receptionData,
        }
    }
}

receptionData = (data) => {
    console.log(`son say:${data}`);// 打印出子组件传回的信息
}

render(){
    const { options } = this.state;
    return (
        <cont.Provider value={options}>
            {/*信息提供者必须被包裹在Provider中，提供的值放在value中*/}
            <div>
                <SimpleContext2/>
            </div>
        </cont.Provider>
    )
}
}
复制代码

一级子组件

 class SimpleContext2 extends Component{

render(){
    return (
        <div>
            <p>simpleContext2</p>
            <SimpleContext3 />
            {/*组件SimpleContext3没有通过属性传任何值*/}
        </div>
    )
}
}
复制代码

二级子组件

class SimpleContext3 extends Component{

ToResponse = (value) => {
    const { callBack } = value;// 通过value拿到父组件的回调函数
    callBack('hello father');// 执行父组件的回调函数
}

render(){
    return (
        <cont.Consumer>
            {/*接收信息的组件必须包裹在consumer中，注意下面的书写的格式*/}
            {
                (value) => (
                    <div>
                        <p>{value.say}</p>
                        <button onClick={()=>this.ToResponse(value)}>回复</button>
                    </div>
                )
            }
        </cont.Consumer>
    )
}
}
复制代码

2）.自定义事件通信

自定义事件通信主要用到就是发布订阅模式。这里使用events包来完成。把上面的代码改一哈。

import React,{ Component } from 'react';
import { EventEmitter } from 'events';
const emitter = new EventEmitter();// 负责订阅和发布

class SimpleEvent1 extends Component{

constructor(props){
    super(props);
    this.state = {
        response:'',
    }
}

componentDidMount(){
    // 组件渲染完毕添加事件监听即订阅
    this.response = emitter.on('sayHello',words => {
        this.setState({response: words});
    })
}

componentWillUnmount(){
    emitter.removeListener(this.response);// 组件卸载时清除监听即取消订阅
}

render(){
    const { response } = this.state;
    return (
        <div>
            <p>{response}</p>
            <SimpleEvent2/>
        </div>
    )
}
}
复制代码

一级子组件

class SimpleEvent2 extends Component{

render(){
    return (
        <div>
            <p>simpleEvent2</p>
            <SimpleEvent3 />
            {/*组件SimpleEvent3没有通过属性传任何值*/}
        </div>
    )
}
}
复制代码

二级子组件

class SimpleEvent3 extends Component{

ToResponse = () => {
    emitter.emit('sayHello','你好？');// 发布信息，第一个参数一定要与订阅者的一致。
}

render(){
    return (
        <div>
            <p>{}</p>
            <button onClick={this.ToResponse}>回复</button>
        </div>
    )
}
}
复制代码