12 React 组件通信 兄弟组件之间通信

12 React 组件通信 兄弟组件之间通信

在React中实现兄弟组件通信相对于父子组件通信来说稍微复杂一些，因为React本身是基于单向数据流的，兄弟组件之间并没有直接的通信途径。不过可以通过以下几种方式实现兄弟组件通信：

1. 通过共同的父组件传递props：
   父组件将需要共享的状态作为props传递给两个兄弟组件。

   // ParentComponent.js
   import React, { useState } from 'react';
   import FirstSibling from './FirstSibling';
   import SecondSibling from './SecondSibling';
   
   function ParentComponent() {
       const [sharedState, setSharedState] = useState("");
   
       return (
           <div>
               <FirstSibling sharedState={sharedState} setSharedState={setSharedState} />
               <SecondSibling sharedState={sharedState} setSharedState={setSharedState} />
           </div>
       );
   }
   

   注意事项：

   • 父组件作为中介，将状态传递给两个兄弟组件。
   • 这种方法适用于兄弟组件之间的简单通信。

2. 使用状态管理库：
   可以使用像Redux、MobX或者Context API这样的状态管理库来管理共享状态，兄弟组件通过这些库来共享状态。

   // store.js (使用Redux举例)
   import { createStore } from 'redux';
   
   const initialState = {
       sharedState: ""
   };
   
   function reducer(state = initialState, action) {
       switch (action.type) {
           case 'UPDATE_SHARED_STATE':
               return { ...state, sharedState: action.payload };
           default:
               return state;
       }
   }
   
   const store = createStore(reducer);
   export default store;
   

   // FirstSibling.js
   import React from 'react';
   import { useDispatch } from 'react-redux';
   
   function FirstSibling() {
       const dispatch = useDispatch();
   
       const handleClick = () => {
           dispatch({ type: 'UPDATE_SHARED_STATE', payload: "Updated from First Sibling" });
       };
   
       return <button onClick={handleClick}>Update Shared State</button>;
   }
   

   // SecondSibling.js
   import React from 'react';
   import { useSelector } from 'react-redux';
   
   function SecondSibling() {
       const sharedState = useSelector(state => state.sharedState);
   
       return <div>{sharedState}</div>;
   }
   

   注意事项：

   • 使用状态管理库可以方便地在任何地方访问共享状态，但可能增加了复杂性。
   • 在Redux中，需要定义action和reducer来更新共享状态。

3. 通过事件总线或自定义Hooks：
   创建一个事件总线或者自定义Hooks，兄弟组件通过事件或者Hooks来通信。

   // EventBus.js
   import { EventEmitter } from 'events';
   
   const eventBus = new EventEmitter();
   export default eventBus;
   

   // FirstSibling.js
   import React from 'react';
   import eventBus from './EventBus';
   
   function FirstSibling() {
       const handleClick = () => {
           eventBus.emit('updateSharedState', "Updated from First Sibling");
       };
   
       return <button onClick={handleClick}>Update Shared State</button>;
   }
   

   // SecondSibling.js
   import React, { useState, useEffect } from 'react';
   import eventBus from './EventBus';
   
   function SecondSibling() {
       const [sharedState, setSharedState] = useState("");
   
       useEffect(() => {
           const updateState = (state) => {
               setSharedState(state);
           };
           eventBus.on('updateSharedState', updateState);
   
           return () => {
               eventBus.off('updateSharedState', updateState);
           };
       }, []);
   
       return <div>{sharedState}</div>;
   }
   

   注意事项：

   • 使用事件总线或自定义Hooks可以实现兄弟组件之间的解耦，但可能会导致全局状态的管理不清晰。

在实现兄弟组件通信时，需要注意以下几点：

• 尽量保持兄弟组件之间的通信简单和直接，避免过度使用中间组件或全局状态。
• 如果需要共享状态，考虑使用适当的状态管理方案，如Context API、Redux等。
• 要注意兄弟组件之间的解耦，尽量避免直接依赖或修改其他组件的内部状态。