React组件通信

父组件向子组件通信

父组件向子组件传递props

子组件向父组件通信

父组件向子组件通过props传递回调函数，子组件在特定时间执行回调函数把数据传给父组件

跨级组件之间通信

跨级组件通信就是指父组件向子组件的子组件通信，方法有两个

• 通过中间组件层层传递props
• 使用context对象

第一种方式如果组件嵌套层次深，那么层层传递props的方法使得代码变得复杂，并且这些props不是中间组件所需要的

使用context要满足两个条件：

• 上级组件要自己声明支持context，并且使用一个方法返回context
• 子组件要声明自己使用context

App组件

import React, { Component } from 'react';
import PropTypes from "prop-types";
import Sub from "./Sub";
export default class App extends Component{
    // 父组件声明自己支持 context
    static childContextTypes = {
        value:PropTypes.string,
        callback:PropTypes.func,
    }
        state = {
        value: "wstreet"
    }
    // 父组件提供一个函数，用来返回相应的 context 对象
    getChildContext = () => {
        return{
            value: this.state.value,
            callback: this.callback
        }
    }
    callback = (msg) => {
        console.log(msg)
    }
    render(){
        return(
            <div>
                  <Other>
                <Sub />
                  </Other>
            </div>
        );
    }
}

Sub组件

import React,{ Component } from "react";
import PropTypes from "prop-types";
export default class Sub extends Component{
    // 子组件声明自己需要使用 context
    static contextTypes = {
        value: PropTypes.string,
        callback: PropTypes.func,
    }
    onClick = () => {
      const { callback, value } = this.context
      callback(`${value}回来了`)
    }
    render(){
        const { value } = this.context
        return(
            <div>
                  {value}
              <button onClick = { this.onClick }>点击我</button>
            </div>
        );
    }
}

非嵌套组件通信

• 利用二者共同父组件的 context 对象进行通信
• 使用自定义事件机制的方式

全局状态管理工具

Redux