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

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

通过共同的父组件传递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>);
}

注意事项：

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

使用状态管理库：
可以使用像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来更新共享状态。

通过事件总线或自定义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>;
}