詳解React中多種組件通信方式的實現(xiàn)

更新時間：2023年11月27日 09:54:17 作者：南城FE

在React中,組件之間的通信是一個非常重要的話題,React提供了幾種方式來實現(xiàn)跨組件通信,下面小編將詳細講講其中幾種通信方式,并提供實際的代碼示例,需要的可以參考下

在React中，組件之間的通信是一個非常重要的話題。當我們構(gòu)建復(fù)雜的應(yīng)用程序時，經(jīng)常需要不同的組件之間共享數(shù)據(jù)或者進行相互協(xié)作。React提供了幾種方式來實現(xiàn)跨組件通信，下面我將詳細其中幾種通信方式，并提供實際的代碼示例。

使用 React Context

基于 React Context 實現(xiàn)跨組件通信的一個常見用例是創(chuàng)建一個能夠在不同組件間共享和觸發(fā)行為的上下文。以下是一個簡化的例子，展示了如何在 app.tsx 中觸發(fā)其他組件（例如，一個彈窗組件）中的方法。

1. 創(chuàng)建一個 Context

首先，我們創(chuàng)建一個新的 Context。這個 Context 將包含我們想要在應(yīng)用中共享的方法。

import React, { createContext, useContext } from 'react';

// 創(chuàng)建 Context
const MyContext = createContext({
  togglePopup: () => {}, // 這是一個示例方法
});

2. 創(chuàng)建一個 Context Provider

接下來，創(chuàng)建一個提供者組件，它將使得在應(yīng)用的不同部分都能夠訪問到 Context 中的值。

export const MyProvider = ({ children }) => {
  const togglePopup = () => {
    // 這里實現(xiàn)彈窗的顯示隱藏邏輯
    console.log("Toggle Popup called");
  };

  return (
    <MyContext.Provider value={{ togglePopup }}>
      {children}
    </MyContext.Provider>
  );
};

3. 在 app.tsx 中使用 Provider

在 app.tsx 中，用 MyProvider 包裹整個應(yīng)用，使得任何子組件都能夠訪問 Context 中的值。

import React from 'react';
import { MyProvider } from './MyProvider'; // 引入剛才創(chuàng)建的 Provider

function App() {
  return (
    <MyProvider>
      {/* 應(yīng)用的其余部分 */}
    </MyProvider>
  );
}

export default App;

4. 在子組件中使用 Context

最后，在需要的組件中使用這個 Context。例如，如果你有一個彈窗組件，你可以在其中使用這個 Context。

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

const Popup = () => {
  const { togglePopup } = useContext(MyContext);

  return (
    <div>
      {/* 彈窗的內(nèi)容 */}
      <button onClick={togglePopup}>關(guān)閉彈窗</button>
    </div>
  );
};

export default Popup;

在這個例子中我們創(chuàng)建了一個可以在整個應(yīng)用中共享的 Context。我們定義了一個 togglePopup 方法，并在需要的組件中通過 Context 使用它。這種方式使得跨組件通信變得簡單和模塊化。

使用自定義事件

使用自定義事件進行組件間通信是一種非常靈活的方法。在 React 中，我們可以使用第三方庫，如 mitt 或 eventemitter3 來實現(xiàn)這一機制。下面是一個基于此思想的實現(xiàn)示例。以下是使用 mitt 的示例。mitt 是一個輕量級的事件發(fā)射器/監(jiān)聽器庫。

1.安裝 mitt

使用 npm install mitt 安裝事件監(jiān)聽器，然后創(chuàng)建一個 Event 實例，這個實例將在整個應(yīng)用中共享。

import mitt from 'mitt';

const emitter = mitt();

export default emitter;

2.在app.tsx中觸發(fā)事件

在 app.tsx 中，你可以觸發(fā)一個自定義事件，這個事件將被其他組件監(jiān)聽和響應(yīng)。

import React from 'react';
import emitter from './emitter';

function App() {
  const openPopup = () => {
    emitter.emit('togglePopup', true);
  };

  return (
    <div>
      <button onClick={openPopup}>打開彈窗</button>
      {/* 其他組件 */}
    </div>
  );
}

export default App;

3.在其他組件中監(jiān)聽事件

在你的公共組件（例如一個彈窗組件）中，監(jiān)聽之前在 app.tsx 中觸發(fā)的事件。

import React, { useEffect, useState } from 'react';
import emitter from './emitter';

const Popup = () => {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const toggleListener = (state) => {
      setIsOpen(state);
    };

    emitter.on('togglePopup', toggleListener);

    return () => {
      emitter.off('togglePopup', toggleListener);
    };
  }, []);

  if (!isOpen) return null;

  return (
    <div>
      {/* 彈窗內(nèi)容 */}
      <button onClick={() => setIsOpen(false)}>關(guān)閉彈窗</button>
    </div>
  );
};

export default Popup;

這個例子展示了如何使用 mitt 來實現(xiàn)跨組件通信。這種方法對于那些不便于通過 props 或 state 進行傳遞的復(fù)雜交互特別有用。它還可以幫助你減少對全局狀態(tài)管理解決方案的依賴，從而使組件保持更加解耦和可重用。

使用 React Ref

使用 React Ref 實現(xiàn)組件間的方法調(diào)用是一種直接且有效的方式，尤其適用于父組件需要直接調(diào)用子組件中的方法的場景。以下是一個使用 React Ref 實現(xiàn)的示例。

1.創(chuàng)建子組件并暴露方法

首先，創(chuàng)建一個子組件并使用 useImperativeHandle 與 forwardRef 來暴露特定的方法。

import React, { useImperativeHandle, forwardRef } from 'react';

const Popup = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    openPopup: () => {
      console.log("彈窗打開");
      // 彈窗打開的邏輯
    },
    closePopup: () => {
      console.log("彈窗關(guān)閉");
      // 彈窗關(guān)閉的邏輯
    }
  }));

  return (
    <div>這里是彈窗的內(nèi)容</div>
  );
});

export default Popup;

2.在父組件中使用 Ref 調(diào)用方法

接下來，在父組件中創(chuàng)建一個 ref，并將其傳遞給子組件。然后，使用這個 ref 來調(diào)用子組件中的方法。

import React, { useRef } from 'react';
import Popup from './Popup';

function App() {
  const popupRef = useRef();

  const openPopup = () => {
    popupRef.current.openPopup();
  };

  const closePopup = () => {
    popupRef.current.closePopup();
  };

  return (
    <div>
      <button onClick={openPopup}>打開彈窗</button>
      <button onClick={closePopup}>關(guān)閉彈窗</button>
      <Popup ref={popupRef} />
    </div>
  );
}

export default App;

使用 React Ref 來調(diào)用子組件的方法是一個非常直觀和簡單的方法，特別適合于需要直接從父組件控制子組件行為的場景。它允許父組件通過 ref 直接訪問子組件的實例

使用 Redux 實現(xiàn)組件間通信

Redux 是一種流行的狀態(tài)管理庫，適用于大型 React 應(yīng)用。通過 Redux，你可以在應(yīng)用的不同部分共享狀態(tài)和邏輯。以下是一個簡化的例子，展示如何使用 Redux 來更新和訪問應(yīng)用狀態(tài)。

1.設(shè)置 Redux

首先，你需要設(shè)置 Redux 的基本元素：store、reducers 和 actions。

// actions.js
export const togglePopup = () => ({
  type: 'TOGGLE_POPUP'
});

// reducer.js
const initialState = {
  isPopupOpen: false
};

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'TOGGLE_POPUP':
      return { ...state, isPopupOpen: !state.isPopupOpen };
    default:
      return state;
  }
};

// store.js
import { createStore } from 'redux';
import { reducer } from './reducer';

export const store = createStore(reducer);

2.在 app.tsx 中使用 Redux

使用 Redux 的 Provider 來包裹你的應(yīng)用，并在需要的地方通過 dispatch 觸發(fā) action。

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import { togglePopup } from './actions';
import Popup from './Popup';

function App() {
  return (
    <Provider store={store}>
      <button onClick={() => store.dispatch(togglePopup())}>
        切換彈窗狀態(tài)
      </button>
      <Popup />
    </Provider>
  );
}

export default App;

3.在其他組件中連接 Redux

在需要的組件中使用 connect 函數(shù)（或 useSelector 和 useDispatch 鉤子）來訪問和更新 Redux 的狀態(tài)。

import React from 'react';
import { connect } from 'react-redux';

const Popup = ({ isPopupOpen }) => {
  if (!isPopupOpen) return null;

  return (
    <div>彈窗內(nèi)容</div>
  );
};

const mapStateToProps = state => ({
  isPopupOpen: state.isPopupOpen
});

export default connect(mapStateToProps)(Popup);

Redux 提供一個集中的存儲，用于管理整個應(yīng)用的狀態(tài)。這對于大型應(yīng)用來說是非常有用的，因為它可以避免狀態(tài)在多個組件之間的重復(fù)傳遞。Redux 通過將邏輯集中和模塊化，提高了代碼的維護性和擴展性。且擁有廣泛的中間件和生態(tài)系統(tǒng)，支持異步操作、日志記錄、持久化等高級功能。

使用 Callbacks 實現(xiàn)組件間通信

通過 props 向子組件傳遞回調(diào)函數(shù)是 React 中最基本的通信方式之一。

1.在父組件中定義和傳遞 Callback

import React, { useState } from 'react';
import Popup from './Popup';

function App() {
  const [isPopupOpen, setIsPopupOpen] = useState(false);

  const togglePopup = () => {
    setIsPopupOpen(!isPopupOpen);
  };

  return (
    <div>
      <button onClick={togglePopup}>切換彈窗狀態(tài)</button>
      <Popup isOpen={isPopupOpen} onClose={togglePopup} />
    </div>
  );
}

export default App;

2.在子組件中使用 Callback

import React from 'react';

const Popup = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <div>
      彈窗內(nèi)容
      <button onClick={onClose}>關(guān)閉</button>
    </div>
  );
};

export default Popup;

對于簡單的父子組件通信，使用回調(diào)函數(shù)是直接且簡單的，它避免了引入額外的庫或復(fù)雜的架構(gòu)。以保持組件的獨立性和可重用性，因為子組件不需要關(guān)心狀態(tài)是如何被管理的，只需關(guān)注它如何響應(yīng)這些回調(diào)。

回調(diào)方法不需要任何額外的狀態(tài)管理庫或上下文，這使得應(yīng)用更輕量，減少了依賴和引入的復(fù)雜性。對于小型或不太復(fù)雜的應(yīng)用，使用回調(diào)進行狀態(tài)管理通常足夠，并且可以避免過度設(shè)計。