React中组件之间是如何通信的 react的组件通信方式有哪些

一、是什么

　　通信指的是发送者通过某种媒体 以某种格式来传递信息 到收信者以达到某个目的，广义上，任何信息的传递都是通信

二、如何通信？

组件传递的方式有很多种，根据传送者和接收者可以分为如下：

• 父组件向子组件传递
• 子组件向父组件传递
• 兄弟组件之间的通信
• 父组件向后代组件传递
• 非关系组件传递

1、父组件向子组件传递数据

　　由于React的数据流动为单向的，父组件向子组件传递是最常见的方式

　　父组件在调用子组件的时候，只需在子组件的标签内传递参数，子组件通过props属性就能接收到父组件传递过来的参数

//父组件给子组件数据 
//方法=》通过属性方式
function App(){
   let money = 100
   const changes = ()=>{
        
    }
    return(
        <div>
              父亲
              {/* 父组件给子组件数据通过属性方式 */}
              {/* 本质 =》元素（组件） =》添加属性 
               这个属性会被react 底层自动处理成 这个函数的参数 =》{}类型
              */}
            <Children money={money}  data='5000' change = {changes}></Children>
        </div>
    )
}

//在子组件种通过props 接收
// Children
function Children(props){
        console.log(props);　　//money={money}  data='5000' change = {changes}

return( <div className="children">Children get father {props.money}</div>  ) } export default App

2、子组件向父组件传递数据

　　子组件向父组件通信的基本思路是，父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值

//组件的数据传递
//子组件给父组件数据 
//解决方法 =》通过自定方法
//本质=》函数的声明和函数调用
//实现 =》
//1 父组件给子组件传递数据数据
// 2在子组件中给父组件数据

function App(){
    //1在父组件中声明方法
    const getChildren = (value)=>{
        console.log('获取到子组件的数据',value);  
    }
    return(
        <div>
              父亲
              {/* 2在把这个方法传递给子组件 */}
            <Children getChildren={getChildren}></Children>
        </div>
    )
}

function Children(props){
    const getFather =()=>{
        //3在子组件中调用父组件申明的方式
        props.getChildren(10000)
    }
    return(
        <div className="children">

            <button onClick={()=>getFather()}>给父组件数据</button>
        </div>
    )
}
export default App

//总结子组件给父组件数据
// 本质就是函数的声明和调用

//1 在父组件中声明方法
//2 在子组件中调用这个方法

 3、兄弟组件之间的通信

　　如果是兄弟组件之间的数据传递，则父组件作为中间层来实现数据的互通，通过使用父组件传递

4、父组件向后代组件传递数据

　　父组件向后代组件传递数据是一件最普通的事情，就像全局数据一样

　　使用useContext提供了组件之间通信的一种方式，可以共享数据，其他数据都能读取对应的数据