超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

?? 如果還不了解 HTML 、 CSS和JS，可以參考本號下的 HTML21 天入門教程、 CSS 21 天入門教程和JS21天入門教程。

在前面的 組件通信之父子組件 中，講到了父子組件之間的通信是通過 props 實現(xià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，如果你熟悉的話。

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

先定義 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; 

通過導入 MyContext 獲取里面的值 helloMsg 。這個值是父組件放進去的。

再定義組件 SayHelloContainer，它就是這里的組件 A，只是一個殼，用來顯示 SayHelloContainerMsg 。

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

最后看在父組件里的調用。

它同樣導入了 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; 

這樣在頁面上，顯示的內容如下：

?

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

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

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

這類組件適用于大型應用中復雜的狀態(tài)管理。這里暫時不舉示例代碼。

總結

最后來總結一下今天的內容要點：

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