欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2024年04月17日 08:44:36   作者：好好吃飯e  
在構(gòu)建復雜的React應用時,組件之間的通信是至關(guān)重要的,從簡單的父子組件通信到跨組件狀態(tài)同步,不同組件之間的通信方式多種多樣,下面我們認識react組件通信的幾種方式,需要的朋友可以參考下

前言

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

在構(gòu)建復雜的React應用時，組件之間的通信是至關(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 組件有一個按鈕，當按鈕被點擊時，觸發(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 組件是整個應用的父組件，它維護著一個狀態(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，用于處理點擊事件。當組件標題被點擊時，會調(diào)用 props 中傳遞的 cb 函數(shù)，并傳遞 msg 變量作為參數(shù)。
  • 返回一個包含標題的 JSX 結(jié)構(gòu)，在標題上設置了點擊事件處理函數(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進行跨層級組件通信

當組件層級較深或通信的組件距離較遠時，可以使用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 組件內(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)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 使用react完成點擊返回頂部操作

    使用react完成點擊返回頂部操作

    本文主要介紹了使用react完成點擊返回頂部操作，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2023-02-02
  • 使用Webpack打包React項目的流程步驟

    使用Webpack打包React項目的流程步驟

    隨著React應用日益復雜,開發(fā)者需要借助模塊打包工具來管理項目依賴、轉(zhuǎn)換代碼和優(yōu)化性能,Webpack是一款功能強大的模塊打包器,它可以將React項目中的JavaScript、CSS、圖片等資源打包成瀏覽器友好的文件,本文將全面介紹如何使用Webpack打包React項目
    2025-03-03
  • 示例詳解react中useState的用法

    示例詳解react中useState的用法

    useState 通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部 state，React 會在重復渲染時保留這個 state，接下來通過一個示例來看看怎么使用 useState吧
    2021-06-06
  • 一文教你如何避免React中常見的8個錯誤

    一文教你如何避免React中常見的8個錯誤

    這篇文章主要來和大家一起分享在?React?開發(fā)中常見的一些錯誤,以及如何避免這些錯誤,理解這些問題背后的細節(jié),防止犯下類似的錯誤,需要的可以參考下
    2023-12-12
  • React?Native系列之Recyclerlistview使用詳解

    React?Native系列之Recyclerlistview使用詳解

    這篇文章主要為大家介紹了React?Native系列之Recyclerlistview使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-10-10
  • React?正確使用useCallback?useMemo的方式

    React?正確使用useCallback?useMemo的方式

    這篇文章主要介紹了React?正確使用useCallback?useMemo的方式，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下
    2022-08-08
  • 如何在React中通過URL預覽Excel文件

    如何在React中通過URL預覽Excel文件

    這篇文章主要為大家詳細介紹了如何在React中通過URL預覽Excel文件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2025-03-03
  • React?數(shù)據(jù)共享useContext的實現(xiàn)

    React?數(shù)據(jù)共享useContext的實現(xiàn)

    本文主要介紹了React?數(shù)據(jù)共享useContext的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-04-04
  • react路由v6版本NavLink的兩個小坑及解決

    react路由v6版本NavLink的兩個小坑及解決

    這篇文章主要介紹了react路由v6版本NavLink的兩個小坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • React BootStrap用戶體驗框架快速上手

    React BootStrap用戶體驗框架快速上手

    這篇文章主要介紹了React BootStrap用戶體驗框架快速上手的相關(guān)知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
    2018-03-03

最新評論