精品秘无码一区二区三区老师-精品秘一区二三区免费雷安-精品蜜桃秘一区二区三区-精品蜜桃秘一区二区三区粉嫩-精品蜜桃一区二区三区-精品蜜臀国产aⅴ一区二区三区

?? 如果還不了解 HTML 、 CSS和JS，可以參考本號(hào)下的 HTML21 天入門(mén)教程、 CSS 21 天入門(mén)教程和JS21天入門(mén)教程。

在前面的 組件通信之父子組件 中，講到了父子組件之間的通信是通過(guò) props 實(shí)現(xiàn)的。

今天來(lái)說(shuō)一下兄弟組件和跨級(jí)組件之間的通信方式。

什么是兄弟組件

那么，它們是如何通信的呢？

兄弟組件之間的通信

兄弟組件之間無(wú)法直接通信，它們需要借助于父組件進(jìn)行通信。

前面講父子組件之間通信的時(shí)候講了父到子和子到父兩種通信。

借助于這兩種通信就能實(shí)現(xiàn)兩步通信：子組件 A 到父組件，父組件到子組件 B。

前面實(shí)現(xiàn)了 SayHello 組件傳遞消息到父組件，現(xiàn)在來(lái)實(shí)現(xiàn)另一個(gè)組件 SayHelloMsg 。

import React from 'react';  function SayHelloMsg(props) {   return (     <div>       <p>SayHelloMsg子組件</p>       {props.message}       <hr />     </div>   ); }  export default SayHelloMsg; 

這個(gè)組件非常簡(jiǎn)單，就是接收到自父組件的 message 并顯示。

在父組件中，import 這個(gè)組件，然后修改之前的顯示。

import './App.css'; import SayHello from './SayHello'; import { useState } from 'react'; import SayHelloMsg from './SayHelloMsg';  function App() {   const [msg, setMsg] = useState('');    const handleChildMessage = (message) => {     setMsg(message);     console.log('Received message from child:', message);   };   return (     <div>       {/* <div>{msg}</div> */}       <SayHelloMsg message={msg} />       <SayHello name="World" onMessage={handleChildMessage} />     </div>   ); }  export default App; 

這樣修改完之后效果如下：

什么是跨級(jí)組件

如下圖所示，父組件與組件 A1 就屬于跨級(jí)組件，他們中間了一層組件 A。

跨級(jí)組件通信

按前面講過(guò)的如果想要父組件與組件 A1 之間實(shí)現(xiàn)通信，通過(guò) props 一級(jí)一級(jí)傳遞是可以實(shí)現(xiàn)的。

但這樣有點(diǎn)兒麻煩是不是，有沒(méi)有更好的方法呢？

有。

實(shí)現(xiàn)它的基本原理是一樣的，就是把數(shù)據(jù)放在某個(gè)地方存起來(lái)，組件都能訪(fǎng)問(wèn)到。

使用 React Context API

React Context 類(lèi)似于 Session，如果你熟悉的話(huà)。

不同的是它提供了訂閱機(jī)制，只要有更新，訂閱了它的組件都會(huì)收到通知。

先定義 MyContext 組件，它會(huì)被組件和組件 A1 用到。

import React from 'react';  export const MyContext = React.createContext(); 

定義組件 A1，這里是 SayHelloContainerMsg 。

import React, { useContext } from 'react'; import { MyContext } from './MyContext';  function SayHelloContainerMsg() {   const helloMsg = useContext(MyContext);   return (     <div>       <p>Testing info: </p> {helloMsg} <hr />     </div>   ); }  export default SayHelloContainerMsg; 

通過(guò)導(dǎo)入 MyContext 獲取里面的值 helloMsg 。這個(gè)值是父組件放進(jìn)去的。

再定義組件 SayHelloContainer，它就是這里的組件 A，只是一個(gè)殼，用來(lái)顯示 SayHelloContainerMsg 。

import SayHelloContainerMsg from './SayHelloContainerMsg';  function SayHelloContainer() {   return (     <div>       <SayHelloContainerMsg />     </div>   ); }  export default SayHelloContainer; 

最后看在父組件里的調(diào)用。

它同樣導(dǎo)入了 MyContext，然后通過(guò) Provider 傳入 value 值 。

import SayHelloContainer from './SayHelloContainer'; import { MyContext } from './MyContext';  function App() {   const helloMsg = 'Hello From App';   return (     <MyContext.Provider value={helloMsg}>       <SayHelloContainer />     </MyContext.Provider>   ); }  export default App; 

這樣在頁(yè)面上，顯示的內(nèi)容如下：

?

使用狀態(tài)管理庫(kù)

除了上述使用 Context，React 里有很多狀態(tài)管理庫(kù)，比如 Redux。

它們通過(guò)把數(shù)據(jù)存儲(chǔ)在 store 中，同樣采用訂閱的方式通知更新。

這類(lèi)組件適用于大型應(yīng)用中復(fù)雜的狀態(tài)管理。這里暫時(shí)不舉示例代碼。

總結(jié)

最后來(lái)總結(jié)一下今天的內(nèi)容要點(diǎn)：

• ?? 兄弟組件之間的通信通過(guò)父組件的 props 實(shí)現(xiàn)。
• ?? 跨級(jí)組件可以一級(jí)一級(jí)傳遞，但可以使用 Context 簡(jiǎn)化操作。
• ?? 第三方狀態(tài)管理庫(kù)比如 Redux 提示了完善的狀態(tài)管理，適用于大型應(yīng)用的狀態(tài)管理。