React - 组件通信

组件通信

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

父传子 ------ 基础实现

实现步骤

1. 父组件传递数据 - 在子组件标签上绑定属性
2. 子组件接收数据 - 子组件通过props参数接收数据

声明子组件并使用

//声明子组件      首字母大写
const Headerzujian = ()=>{
  return <div>子组件</div>
}

//使用子组件
 <Headerzujian></Headerzujian>

父组件传递数据 - 在子组件标签上绑定属性

<Headerzujian name={'传递的数据'}></Headerzujian>      //name是传递的数据

子组件接收数据 - 子组件通过props参数接收数据

const Headerzujian = (props)=>{
  console.log(props); //props对象里包含了父组件传递过来的所有数据
  return <div>子组件 传递的数据={props.name}</div>
}

父传子 ------ prpos说明

1. props可传任意的数据：数字，字符串，布尔值，数组，对象，函数，JSX
2. props是只读对象：props只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改

传递多种类型

<Headerzujian name={'传递了数据'} age={12} boolean={false} arr={[1,2,3]} obj={{school:"第一中学"} } fun={()=>{return '11'}} jsx ={<span>span元素</span>} ></Headerzujian>

接收到的数据

父传子 ------ 特殊的prop children

场景：当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容

使用 把内容嵌套在子组件标签中

 <Headerzujian> 1111</Headerzujian>

父组件会自动在名为children的prop属性中接收该内

子传父 ------ 基础实现

核心思路：在子组件中调用父组件中的函数并传递参数
当子组件需要向父组件传递数据时，父组件可以向子组件传递一个回调函数作为 props。子组件在特定的事件触发时（如按钮点击、表单提交等）调用这个回调函数，并将需要传递的数据作为参数传递给该回调函数。这样父组件就能接收到子组件传来的数据，实现反向的数据流动。

父组件向子组件传递一个回调函数

  <Headerzujian onmessage={getmessage}> 1111</Headerzujian>
  {zidata}//展示2580

const [zidata,setzidata] = useState('')
const getmessage =(data)=>{
  console.log(data);  //结果为2580 
  //要在父组件使用需要使用useState接收
   setzidata(data)
   
}

子组件在特定的事件触发时（如按钮点击、表单提交等）调用这个回调函数

//声明组件
const Headerzujian = ({onmessage})=>{
  return <div onClick={()=>{onmessage(2580)}}>子组件</div>   //调用并传递参数
}

兄弟组件通信 使用状态提升实现

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

1. A组件先通过子传父方式把数据传递给父组件App
2. APP在通过父传子方式把数据传递给组件B

声明两个兄弟组件并使用

const Mainzujian = ({onBrother})=>{
  return <div >兄弟组件1</div>
}
const Bottomzujian = (props)=>{
  return <div>兄弟组件2</div>
}

 <Mainzujian></Mainzujian>
 <Bottomzujian></Bottomzujian>

兄弟组件1先通过子传父方式把数据传递给父组件App

<Mainzujian onBrother={Brothermeg}></Mainzujian>

//接收子组件传递的数据
const [msg,setmsg] = useState('')
const Brothermeg = (data)=>{
  console.log(data);
  setmsg(data) 
}

//向父组件传值
const Mainzujian = ({onBrother})=>{
  return <div onClick={()=>{onBrother('兄弟你好')}}>兄弟组件1</div>
}

APP在通过父传子方式把数据传递给组件B

  <Bottomzujian data={msg}></Bottomzujian>  //向子组件传值

//子组件接受并使用
const Bottomzujian = (props)=>{
  return <div onClick={()=>{}}>兄弟组件2 兄弟传递的数据 {props.data}</div>
}

使用Context机制跨层级组件通信

实现步骤

1. 使用createContext方法创建一个上下文对象Ctx
2. 在顶级组件( APP )中通过Ctx.Provider 组件提供数据
3. 在底层组件( B )中通过useContext钩子函数获取数据

声明组件并使用组件

const Zizujian = ()=>{
  return <div>
    子组件
    <Sunzujian></Sunzujian>
  </div>
}

const Sunzujian = ()=>{
  return <div>孙组件</div>;
}

 <Zizujian />

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

import { useState ,useRef, createContext,useContext} from "react"; //导入

const MyContext = createContext()

在顶级组件( APP )中通过Ctx.Provider 组件提供数据

  <MyContext.Provider value={msgfu}>       //value值为要传递的数据
      <div>
        父组件
        <Zizujian />
      </div>
    </MyContext.Provider>

在底层组件( B )中通过useContext钩子函数获取数据

const Sunzujian = ()=>{
  const msg = useContext(MyContext);
  return <div>孙组件接收到的数据: {msg}</div>;
}