React中實現(xiàn)組件通信的幾種方式小結(jié)

更新時間：2024年04月17日 08:44:36 作者：好好吃飯e

在構(gòu)建復(fù)雜的React應(yīng)用時,組件之間的通信是至關(guān)重要的,從簡單的父子組件通信到跨組件狀態(tài)同步,不同組件之間的通信方式多種多樣,下面我們認識react組件通信的幾種方式,需要的朋友可以參考下

前言

下面我們認識react組件通信的幾種方式。

在構(gòu)建復(fù)雜的React應(yīng)用時，組件之間的通信是至關(guān)重要的。從簡單的父子組件通信到跨組件狀態(tài)同步，不同組件之間的通信方式多種多樣。

1. 父子組件通信

父子組件通信是 React 中最基本的通信方式之一。在這種模式下，數(shù)據(jù)是從父組件通過 props 傳遞給子組件的，子組件接收到 props 后進行渲染或其他操作。

特點：

單向數(shù)據(jù)流：數(shù)據(jù)從父組件流向子組件，子組件無法直接修改父組件傳遞過來的 props。
簡單明了：適用于父子組件之間的簡單數(shù)據(jù)傳遞和交互。
可維護性高：因為數(shù)據(jù)流清晰，易于追蹤和調(diào)試。

父組件：

// 父組件

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ù)或事件的過程。通常通過在子組件中定義回調(diào)函數(shù)，并將其作為 props 傳遞給子組件來實現(xiàn)。

特點：

子組件向父組件傳遞數(shù)據(jù)或事件：子組件通過調(diào)用父組件傳遞的回調(diào)函數(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>
                // 將回調(diào)函數(shù)傳遞給子組件 
                <PChild cb={this.callback} />
            </div>
        )
    }
}

子組件 PChild:

PChild 組件包含了一個狀態(tài) msg，代表子組件的數(shù)據(jù)。
PChild 組件有一個按鈕，當(dāng)按鈕被點擊時，觸發(fā) handler 方法。
handler 方法調(diào)用了父組件傳遞的回調(diào)函數(shù) cb，并將子組件的狀態(tài)數(shù)據(jù) msg 作為參數(shù)傳遞給父組件。

 //子組件PChild
import React, { Component } from 'react'

export default class PChild extends Component {
    state = {
        msg: '來自子組件的數(shù)據(jù)'
    }
    
    // 處理按鈕點擊事件，調(diào)用父組件傳遞的回調(diào)函數(shù)
    handler = () => {
        this.props.cb(this.state.msg)// 將子組件的數(shù)據(jù)傳遞給父組件
    }

    render() {
        return (
            <div>
                <h4>子組件</h4>
                <button onClick={this.handler}>傳遞</button>
            </div>
        )
    }
}

使用示例

點擊傳遞按鈕前：

點擊傳遞按鈕后：

3. 兄弟組件通信

兄弟組件通信是指不具有直接父子關(guān)系的兩個組件之間進行數(shù)據(jù)傳遞和交互的過程。在 React 中，通常需要通過共享父組件來實現(xiàn)兄弟組件之間的通信。

注意：兄弟組件使用共同的父類作為橋梁，本質(zhì)是父子之間通信。

BApp 組件：
- BApp 組件是整個應(yīng)用的父組件，它維護著一個狀態(tài) message，初始值為 'hello'。
- 在 render 方法中，BApp 返回了一個包含標題、BrotherA 和 BrotherB 組件的 JSX 結(jié)構(gòu)。
- 將 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'
    }
    
    // 回調(diào)函數(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，用于處理點擊事件。當(dāng)組件標題被點擊時，會調(diào)用 props 中傳遞的 cb 函數(shù)，并傳遞 msg 變量作為參數(shù)。
返回一個包含標題的 JSX 結(jié)構(gòu)，在標題上設(shè)置了點擊事件處理函數(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

點擊之后如圖結(jié)果：

4. 使用Context進行跨層級組件通信

當(dāng)組件層級較深或通信的組件距離較遠時，可以使用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();

// 導(dǎo)出 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 傳遞下來的值，并進行相應(yīng)的渲染。

// 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 組件內(nèi)部，我們可以使用函數(shù)作為子組件

使用函數(shù)作為子組件：

<Consumer>
  {value => (
    // 在這里可以直接使用 value 進行渲染或處理
    <div>
      <h4>子組件B -- {value}</h4>
    </div>
  )}
</Consumer>

在這個示例中，<Consumer> 組件的子元素是一個函數(shù)，該函數(shù)接收 value 參數(shù)，這個 value 參數(shù)就是從 Provider 傳遞下來的值。在函數(shù)內(nèi)部，可以直接使用 value 進行渲染或處理。

這種方式適用于在 JSX 內(nèi)部直接定義渲染邏輯，通常更易讀，因為它直接放在了 <Consumer> 標簽內(nèi)部。

效果圖：

這樣，就實現(xiàn)了 BApp 組件向 BrotherB 組件傳遞數(shù)據(jù)的功能。 Context API 的優(yōu)點之一就是可以讓組件之間直接傳遞數(shù)據(jù)，而無需通過 props 一層層地傳遞，從而簡化了組件之間的關(guān)系。

到此這篇關(guān)于React中實現(xiàn)組件通信的幾種方式小結(jié)的文章就介紹到這了,更多相關(guān)React組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

React中實現(xiàn)組件通信的幾種方式小結(jié)

目錄

前言

1. 父子組件通信

特點：

2. 子父組件通信

特點：

父組件 PApp：

子組件 PChild:

使用示例

3. 兄弟組件通信

4. 使用Context進行跨層級組件通信

創(chuàng)建：

補充

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具