react--组件通信

概念：组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法

父传子：

// 父子通信-父传子
//1.父组件传递数据--在子组件标签上绑定属性
//2.子组件接收数据--子组件在通过props参数接收数据
function Son(props){
  console.log(props);//所谓的props是一个对象，里面包含说要父组件传递的对象
  
  return <div>{props.name}</div>
}
function App(){ 
 const name='this is app name'
  return(
    <div >
      <Son name={name}/>
</div>
)
}
     
export default App

props说明：

1. props可传递任意的数据 数字、字符串、布尔值、数组、对象、函数、JSX

2. props是只读对象 子组件只能读取props中的数据，不能直接进行修改, 父组件的数据只能由父组件修改

子传父：

// 父子通信-子传父
// 核心思路：在子组件中调用父组件中的函数并传递参数
import {useState} from 'react'
function Son({onGetSonMsg}){
 const sonMsg='this is msg'
  
  return <div>this.is Son
    <button onClick={()=>onGetSonMsg(sonMsg)} >sonMsg</button>
  </div>
}
function App(){ 
  const [msg,setMsg]=useState('')
const getMsg=(msg)=>{
  console.log(msg );
  setMsg(msg)

}
  return(
    <div >
    this. is. sonMsg.{msg}
    <Son onGetSonMsg={getMsg}/>
</div>
)
}
     
export default App

兄弟组件：

// -兄弟组件
// 第一步通过子传父把A 传给APP
//第二步再将app父传子给B
import {useState} from 'react'
function A({onGetAName}){
 const name='this is a '
  
  return(
  <div>this.is A compoent
    <button onClick={()=>{onGetAName(name)}} >send</button>
  </div>)
  
}
function B({name}){

   return(
   <div>this.is B compoent
   {name}
   </div>)
   
 }
 

 function App (){
  const [name,setName] =  useState('')
  const getAName=(name)=>
    {
      console.log(name);
      setName(name)
    }
  return (
    <div>
      this is APP
      <A onGetAName={getAName}/>
      <B name={name}/>
    </div>
  )
 }
    
export default App

实现思路：借助“状态提升”机制，通过父组件进行兄弟组件之间的数据传递

跨层通信：

实现步骤：

1. 使用createContext方法创建一个上下文对象Ctx

2. 在顶层组件（App）中通过 Ctx.Provider 组件提供数据

3. 在底层组件（B）中通过 useContext 钩子函数获取消费数据

//跨层通信
import { createContext, useContext } from "react"

// 1. createContext方法创建一个上下文对象

const MsgContext = createContext()
function A () {
  return (
    <div>
      this is A component
      <B />
    </div>
  )
}

function B () {
  // 3. 在底层组件 通过useContext钩子函数使用数据
  const msg = useContext(MsgContext)
  return (
    <div>
      this is B compnent,{msg}
    </div>
  )
}

function App () {
  const msg = 'this is app msg'
  return (
    <div>
      {/* 2. 在顶层组件 通过Provider组件提供数据 */}
      
      <MsgContext.Provider value={msg}>
        this is App
        <A />
        </MsgContext.Provider>
     
    </div>
  )
}

export default App