成都大型网站设计公司网站seo置顶 乐云践新专家

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