react组件通信

一、状态机setState是一个异步操作

setState用来修改state中的初始状态，但是它异步操作，不能在setState之后马上获取到最新的数据。可以使用setState的第二个参数来获取到最新的数据

setState(要修改的数据对象,()=>{...})

在第二个参数（回调函数）中可以获取到state中最新的数据。

示例代码：

import React, { Component } from 'react'
export default class State extends Component {
    state = {
        num :100
    }
    addNum(){
        var n = this.state.num;
        n++;
        this.setState({ num : n },()=>{
            console.log(this.state.num,1111111111)//在回调函数中可以获取到state中最新的数据
        })
        console.log(this.state.num,222222222222)//此时获取到的数据不是最新的
    }
    render() {
        return (
            <div>
                <h2>数量：{ this.state.num }</h2>
                <button onClick={ ()=>this.addNum() }>点击增加</button>
            </div>
        )
    }
}

二、组件通信

1.父子组件

在父组件使用子组件时，通过自定义属性进行数据的传递，在子组件中通过props来接收。

(1)父组件

import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
    state = {
        msg : '天道酬勤'
    }
    render() {
        return (
            <div>
                <h1>这是父组件</h1>
                <hr/>
                <Child data={this.state.msg} />
            </div>
        )
    }
}

(2)子组件

import React, { Component } from 'react'

class Child extends Component {
    render() {
        return (
            <div>
                <h2>这是子组件</h2>
                {/* 通过this.props来获取父组件传递的数据 */}
                <p>父组件的内容：{ this.props.data }</p>
            </div>
        )
    }
}
export default Child;

2.子父组件

使用自定义事件来实现子父组件通信

在父组件使用子组件时，传递一个自定义事件，用来让子组件触发或者进行数据的传递

import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
    state = {
        msg : '天道酬勤',
        str:''
    }
    getStr(e){
        this.setState({ str:e })
    }
    render() {
        return (
            <div>
                <h1>这是父组件</h1>
                <p>子组件：{ this.state.str }</p>
                <hr/>
                <Child data={this.state.msg} sendStr={ (str)=>this.getStr(str) } />
            </div>
        )
    }
}

在子组件中，通过this.props.自定义事件名 来触发父组件的函数并传递参数

import React, { Component } from 'react'
class Child extends Component {
    send(){
        console.log(this)
        //调用父组件传递的函数
        this.props.sendStr('这是子组件的数据');
    }
    render() {
        return (
            <div>
                <h2>这是子组件</h2>
                {/* 通过this.props来获取父组件传递的数据 */}
                <p>父组件的内容：{ this.props.data }</p>
                <button onClick={ ()=>this.send() }>反馈数据</button>
            </div>
        )
    }
}
export default Child;

3.非父子组件

(1)设置一个公用容器

创建/src/bus.js，并引入events类中的EventEmitter事件监听器

const EventEmitter = require('events');
const MyEvent = new EventEmitter();
export default MyEvent;

(2)在项目启动文件中进行Component原型的挂载

/src/index.js

import React,{ Component } from 'react';
import bus from './bus'
Component.prototype.bus = bus;//将容器挂载到Component的原型上

(3)页面组件中使用

①数据发生端

this.bus.emit('事件名称','要传递的数据')

②数据接收端

constructor(){
    super();
    this.bus.on('事件名称',(形参)=>{
    	...
    })
}