react兄弟组件之间如何通信
兄弟组件通信方法
在React中，兄弟组件之间无法直接通信，需要通过共同的父组件作为中介。以下是几种常见方法：
使用状态提升（Lifting State Up） 将共享状态提升到最近的共同父组件中，通过props传递给子组件。父组件管理状态，子组件通过回调函数修改状态。
// 父组件
function Parent() {
const [sharedState, setSharedState] = useState('');
return (
<>
<ChildA state={sharedState} />
<ChildB onStateChange={setSharedState} />
</>
);
}使用Context API 创建Context提供共享状态，兄弟组件通过useContext hook或Consumer访问数据。
const SharedContext = createContext();
function Parent() {
const [value, setValue] = useState('');
return (
<SharedContext.Provider value={{ value, setValue }}>
<ChildA />
<ChildB />
</SharedContext.Provider>
);
}
function ChildA() {
const { value } = useContext(SharedContext);
return <div>{value}</div>;
}
function ChildB() {
const { setValue } = useContext(SharedContext);
return <button onClick={() => setValue('new')}>Update</button>;
}使用状态管理库（Redux/MobX） 对于复杂应用，可使用Redux等库集中管理状态。组件通过dispatch actions和selector访问store。
// 使用Redux Toolkit示例
const store = configureStore({ reducer: counterReducer });
function Parent() {
return (
<Provider store={store}>
<ChildA />
<ChildB />
</Provider>
);
}
function ChildA() {
const count = useSelector(state => state.value);
return <div>{count}</div>;
}
function ChildB() {
const dispatch = useDispatch();
return <button onClick={() => dispatch(increment())}>+</button>;
}使用自定义事件（Event Emitter） 通过事件总线实现发布-订阅模式，适合解耦组件。
const emitter = new EventEmitter();
function ChildA() {
const [msg, setMsg] = useState('');
useEffect(() => {
emitter.on('event', setMsg);
return () => emitter.off('event', setMsg);
}, []);
return <div>{msg}</div>;
}
function ChildB() {
return (
<button onClick={() => emitter.emit('event', 'Hello')}>
Send
</button>
);
}使用Refs转发 通过父组件转发ref，允许兄弟组件直接调用对方方法（慎用，通常不推荐）。
const ChildA = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
method: () => console.log('Called')
}));
return <div>ChildA</div>;
});
function Parent() {
const childARef = useRef();
return (
<>
<ChildA ref={childARef} />
<ChildB onAction={() => childARef.current.method()} />
</>
);
}选择方法时应考虑组件层级深度、通信频率和项目复杂度。简单场景推荐状态提升或Context，大型应用适合状态管理库。
