React中實現(xiàn)組件通信的幾種方式小結
前言
下面我們認識react組件通信的幾種方式。
在構建復雜的React應用時，組件之間的通信是至關重要的。從簡單的父子組件通信到跨組件狀態(tài)同步，不同組件之間的通信方式多種多樣。
1. 父子組件通信
父子組件通信是 React 中最基本的通信方式之一。在這種模式下，數(shù)據(jù)是從父組件通過 props 傳遞給子組件的，子組件接收到 props 后進行渲染或其他操作。
特點：
單向數(shù)據(jù)流：數(shù)據(jù)從父組件流向子組件，子組件無法直接修改父組件傳遞過來的 props。
簡單明了：適用于父子組件之間的簡單數(shù)據(jù)傳遞和交互。
可維護性高：因為數(shù)據(jù)流清晰，易于追蹤和調試。
父組件：
// 父組件
import React, { Component } from 'react'
import CChild from "./components/C-Child"
export default class CApp extends Component {
state = {
msg: '這是父組件的數(shù)據(jù)'
}
render() {
return (
<div>
<h2>父組件</h2>
<CChild msg={this.state.msg} />
</div>
)
}
}
子組件：
// 子組件
import React, { Component } from 'react'
export default class CChild extends Component {
render() {
return (
<div>
<h4>子組件</h4>
<p>{this.props.msg}</p>
</div>
)
}
}
2. 子父組件通信
子父組件通信是指子組件向父組件傳遞數(shù)據(jù)或事件的過程。通常通過在子組件中定義回調函數(shù)，并將其作為 props 傳遞給子組件來實現(xiàn)。
特點：
子組件向父組件傳遞數(shù)據(jù)或事件：子組件通過調用父組件傳遞的回調函數(shù)，向父組件傳遞數(shù)據(jù)或觸發(fā)事件。
靈活性高：可以在需要的時候向父組件傳遞數(shù)據(jù)，實現(xiàn)靈活的交互。
PApp組件定義了一個callback方法，這個方法用于接收子組件傳遞的數(shù)據(jù)。
父組件 PApp：
在 render 方法中，PApp 渲染一個 PChild 子組件，并將 callback 方法作為 cb 屬性傳遞給子組件。
//父組件PApp
import React, { Component } from 'react'
import PChild from './components/PChild'
export default class PApp extends Component {
state = {
msg: ''
}
callback = (newMsg) => {
console.log('拿到子組件的數(shù)據(jù): ' + newMsg);
this.setState({
msg: newMsg
})
}
render() {
return (
<div>
<h2>父組件 --- {this.state.msg}</h2>
// 將回調函數(shù)傳遞給子組件
<PChild cb={this.callback} />
</div>
)
}
}
子組件 PChild:
PChild組件包含了一個狀態(tài)msg，代表子組件的數(shù)據(jù)。PChild組件有一個按鈕，當按鈕被點擊時，觸發(fā)handler方法。handler方法調用了父組件傳遞的回調函數(shù)cb，并將子組件的狀態(tài)數(shù)據(jù)msg作為參數(shù)傳遞給父組件。
//子組件PChild
import React, { Component } from 'react'
export default class PChild extends Component {
state = {
msg: '來自子組件的數(shù)據(jù)'
}
// 處理按鈕點擊事件，調用父組件傳遞的回調函數(shù)
handler = () => {
this.props.cb(this.state.msg)// 將子組件的數(shù)據(jù)傳遞給父組件
}
render() {
return (
<div>
<h4>子組件</h4>
<button onClick={this.handler}>傳遞</button>
</div>
)
}
}
使用示例
點擊傳遞按鈕前：
點擊傳遞按鈕后：
3. 兄弟組件通信
兄弟組件通信是指不具有直接父子關系的兩個組件之間進行數(shù)據(jù)傳遞和交互的過程。在 React 中，通常需要通過共享父組件來實現(xiàn)兄弟組件之間的通信。
注意：兄弟組件使用共同的父類作為橋梁，本質是父子之間通信。
BApp 組件：
BApp組件是整個應用的父組件，它維護著一個狀態(tài)message，初始值為'hello'。在
render方法中，BApp返回了一個包含標題、BrotherA和BrotherB組件的 JSX 結構。將
message狀態(tài)作為BrotherB組件的 props 傳遞給它。
import React, { Component } from 'react';
import BrotherA from "./components/BrotherA";
import BrotherB from "./components/BrotherB";
class BApp extends Component {
state = {
message: 'hello'
}
// 回調函數(shù)，用于更新 message 狀態(tài)
// 注意：React 中狀態(tài)更新通常使用 setState 方法
fn = (newMsg) => {
console.log('父組件收到：' + newMsg);
this.setState({
message: newMsg
})
}
render() {
return (
<div>
<h1>父組件</h1>
{/* 將 fn 方法作為 props 傳遞給 BrotherA 組件 */}
<BrotherA cb={this.fn} />
{/* 將 message 狀態(tài)作為 props 傳遞給 BrotherB 組件 */}
<BrotherB message={this.state.message} />
</div>
);
}
}
export default BApp;
- BrotherA 組件：
- 定義了一個局部變量
msg，它的值是字符串 '來自子組件A的數(shù)據(jù)'。 - 定義了一個函數(shù)
handle，用于處理點擊事件。當組件標題被點擊時，會調用props中傳遞的cb函數(shù)，并傳遞msg變量作為參數(shù)。 - 返回一個包含標題的 JSX 結構，在標題上設置了點擊事件處理函數(shù)為
handle。
import React from 'react';
const BrotherA = props => {
const msg = '來自子組件A的數(shù)據(jù)'
const handle = () => {
props.cb(msg)
}
return (
<div>
<h4 onClick={handle}>子組件A</h4>
</div>
);
};
export default BrotherA;
BrotherB 組件：
BrotherB組件接收一個名為message的 prop，它來自于BApp的狀態(tài)。- 在組件中顯示了一個標題和
message的值。
import React from 'react';
const BrotherB = props => {
return (
<div>
<h4>子組件B -- {props.message}</h4>
</div>
);
};
export default BrotherB;
接下來我們驗證一下：點擊子組件A
點擊之后如圖結果：
4. 使用Context進行跨層級組件通信
當組件層級較深或通信的組件距離較遠時，可以使用React的Context API進行跨層級通信。Context允許我們在組件樹中傳遞數(shù)據(jù)，而不必手動通過Props一層層傳遞。
創(chuàng)建：
- 使用
React.createContext()創(chuàng)建上下文對象 - 并在組件中使用
Provider提供數(shù)據(jù)， - 子組件通過
Consumer或useContext獲取數(shù)據(jù)。
context.js
import React from 'react';
// 創(chuàng)建一個上下文對象
const { Provider, Consumer } = React.createContext();
// 導出 Provider 和 Consumer 組件，以便在其他地方使用
export {
Provider,
Consumer
}
BApp
BApp組件是一個類組件，它作為數(shù)據(jù)的提供者，使用Provider組件將數(shù)據(jù)傳遞給它的子組件。在
BApp組件的render方法中，通過Provider組件的value屬性傳遞了一個名為message的狀態(tài)值
// BApp.jsx
import React, { Component } from 'react';
import BrotherB from "./components/BrotherB";
import { Provider } from "./context.js";
class BApp extends Component {
state = {
message: 'hello react', // 初始化狀態(tài)值
}
render() {
return (
// 使用 Provider 組件提供數(shù)據(jù)
<Provider value={this.state.message}>
<div>
<h1>父組件</h1>
{/* 渲染子組件 */}
<BrotherB />
</div>
</Provider>
);
}
}
export default BApp;
BrotherB
BrotherB組件是一個函數(shù)組件，它作為數(shù)據(jù)的消費者，使用Consumer組件從上層組件（BApp）獲取數(shù)據(jù)并進行渲染。在
BrotherB組件中，通過Consumer組件的子組件函數(shù)來接收從Provider傳遞下來的值，并進行相應的渲染。
// BrotherB.jsx
import React from 'react';
import { Consumer } from '../provider.js';
const BrotherB = props => {
return (
// 使用 Consumer 組件消費數(shù)據(jù)
<Consumer>
{value => (
<div>
{/* 使用從 Provider 傳遞下來的值進行渲染 */}
<h4>子組件B -- {value}</h4>
</div>
)}
</Consumer>
);
};
export default BrotherB;
補充
在 Consumer 組件內部，我們可以使用函數(shù)作為子組件
- 使用函數(shù)作為子組件：
<Consumer>
{value => (
// 在這里可以直接使用 value 進行渲染或處理
<div>
<h4>子組件B -- {value}</h4>
</div>
)}
</Consumer>
在這個示例中，<Consumer> 組件的子元素是一個函數(shù)，該函數(shù)接收 value 參數(shù)，這個 value 參數(shù)就是從 Provider 傳遞下來的值。在函數(shù)內部，可以直接使用 value 進行渲染或處理。
這種方式適用于在 JSX 內部直接定義渲染邏輯，通常更易讀，因為它直接放在了 <Consumer> 標簽內部。
效果圖：
這樣，就實現(xiàn)了 BApp 組件向 BrotherB 組件傳遞數(shù)據(jù)的功能。 Context API 的優(yōu)點之一就是可以讓組件之間直接傳遞數(shù)據(jù)，而無需通過 props 一層層地傳遞，從而簡化了組件之間的關系。
到此這篇關于React中實現(xiàn)組件通信的幾種方式小結的文章就介紹到這了,更多相關React組件通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了react使用節(jié)流函數(shù)防止重復點擊問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了react 父子組件之間通訊props，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
深入React?18源碼useMemo?useCallback?memo用法及區(qū)別分析
這篇文章主要為大家介紹了React?18源碼深入分析useMemo?useCallback?memo用法及區(qū)別，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家介紹了TypeScript在React中的應用技術實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了React 元素渲染的相關資料，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
在當前的Web開發(fā)中,使用React構建單頁面應用（SPA）已經成為一種常見的做法,然而,當應用程序遇到錯誤時,有可能會導致整個頁面崩潰,給用戶帶來不好的體驗,本文將介紹如何在React單頁面應用中捕獲錯誤,以防止整個頁面的崩潰,需要的朋友可以參考下2023-09-09
React?createRef循環(huán)動態(tài)賦值ref問題
這篇文章主要介紹了React?createRef循環(huán)動態(tài)賦值ref問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了React Native仿美團下拉菜單的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
本文主要介紹了react-router-dom?V6的配置使用實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細介紹了的React?Refs屬性，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03