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}//展示2580const [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>;
}