組件通信

概念：組件通信就是組件之間數據傳遞，根據組件嵌套關系不同，有不同的通信方法

父傳子 ——?基礎實現?

實現步驟

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>;
}