?? 如果還不了解 HTML 、 CSS和JS，可以參考本號下的 HTML21 天入門教程、 CSS 21 天入門教程和JS21天入門教程。
在前面的 組件通信之父子組件 中，講到了父子組件之間的通信是通過 props 實現(xiàn)的。
今天來說一下兄弟組件和跨級組件之間的通信方式。
什么是兄弟組件
如上圖，組件 A 和組件 B 就是兄弟組件，它們存在于同一個父組件中。
那么，它們是如何通信的呢？
兄弟組件之間的通信
兄弟組件之間無法直接通信，它們需要借助于父組件進(jìn)行通信。
前面講父子組件之間通信的時候講了父到子和子到父兩種通信。
借助于這兩種通信就能實現(xiàn)兩步通信：子組件 A 到父組件，父組件到子組件 B。
前面實現(xiàn)了 SayHello 組件傳遞消息到父組件，現(xiàn)在來實現(xiàn)另一個組件 SayHelloMsg 。
import React from 'react'; function SayHelloMsg(props) { return ( <div> <p>SayHelloMsg子組件</p> {props.message} <hr /> </div> ); } export default SayHelloMsg;
這個組件非常簡單，就是接收到自父組件的 message 并顯示。
在父組件中，import 這個組件，然后修改之前的顯示。
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;
這樣修改完之后效果如下：
什么是跨級組件
如下圖所示，父組件與組件 A1 就屬于跨級組件，他們中間了一層組件 A。
跨級組件通信
按前面講過的如果想要父組件與組件 A1 之間實現(xiàn)通信，通過 props 一級一級傳遞是可以實現(xiàn)的。
但這樣有點兒麻煩是不是，有沒有更好的方法呢？
有。
實現(xiàn)它的基本原理是一樣的，就是把數(shù)據(jù)放在某個地方存起來，組件都能訪問到。
使用 React Context API
React Context 類似于 Session，如果你熟悉的話。
不同的是它提供了訂閱機(jī)制，只要有更新，訂閱了它的組件都會收到通知。
先定義 MyContext 組件，它會被組件和組件 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;
通過導(dǎo)入 MyContext 獲取里面的值 helloMsg 。這個值是父組件放進(jìn)去的。
再定義組件 SayHelloContainer，它就是這里的組件 A，只是一個殼，用來顯示 SayHelloContainerMsg 。
import SayHelloContainerMsg from './SayHelloContainerMsg'; function SayHelloContainer() { return ( <div> <SayHelloContainerMsg /> </div> ); } export default SayHelloContainer;
最后看在父組件里的調(diào)用。
它同樣導(dǎo)入了 MyContext，然后通過 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;
這樣在頁面上，顯示的內(nèi)容如下：
?
使用狀態(tài)管理庫
除了上述使用 Context，React 里有很多狀態(tài)管理庫，比如 Redux。
它們通過把數(shù)據(jù)存儲在 store 中，同樣采用訂閱的方式通知更新。
這類組件適用于大型應(yīng)用中復(fù)雜的狀態(tài)管理。這里暫時不舉示例代碼。
總結(jié)
最后來總結(jié)一下今天的內(nèi)容要點：
- ?? 兄弟組件之間的通信通過父組件的 props 實現(xiàn)。
- ?? 跨級組件可以一級一級傳遞，但可以使用 Context 簡化操作。
- ?? 第三方狀態(tài)管理庫比如 Redux 提示了完善的狀態(tài)管理，適用于大型應(yīng)用的狀態(tài)管理。
該文章在 2024/12/16 10:10:16 編輯過
400 186 1886
