react的跨组件通信

react的跨组件通信

react的跨组件通信，主要靠的就是Context，可以直接跨过中间层的组件，减少性能消耗

代码

    
    //我们需要把爷爷组件的数组传给儿子组件，如果通过传统的方法，需要使用props一级级往内传，会导致性能的消耗。而且很慢，所以有了跨组件通信
    
import React,{ Component,Fragment } from 'react';

const mony = React.createContext() //先定义一个常量，主要依靠的就是 React.createContext()，方法内可以传入一个默认值

//这是爷爷组件
class Grandpa extends Component{
    constructor () {
        super()
        this.state = {
            obj : {
                id: 1,
                name: '阿斯蒂芬'
            }
        }
    }
    render() {
        return (
            <Fragment>
                <p> Graddpa </p>
                <mony.Provider value = "50000">  //如果是想把数据传给儿子组件，就需要使用  常量点Provider 的形式将儿子组件的父组件包裹起来，注意Provider首字母大写，这里的value就是下面儿子组件需要的数据，可以在爷爷组件中定义 value = "this.state.obj"
                <Father></Father>
                </mony.Provider>
            </Fragment>
        )
    }
}

//这是父亲组件
class Father extends Component{
    render() {
        return (
        <Fragment>
            <p> Father </p>
            <Son></Son>
        </Fragment>
        )
    }
}

//这是儿子组件
class Son extends Component{

    static contextType = mony  //这里通过  static contextType = 你上面定义的那个常量，前面是写死的，后面的变量是上面定义的
    
    render() {
        return (
            <Fragment>
                <p> Son </p>
                <p>
                     { this.context }//儿子组件就可以直接使用context的数据了,数据是爷爷组件中传过来的
                </p>
            </Fragment>
        )
    }
}
export default Grandpa