react如何通信
在React中，组件通信是核心功能之一，根据场景和需求的不同，可以采用多种方式实现。以下是常见的通信方法：
父子组件通信
父组件通过props向子组件传递数据或回调函数，子组件通过调用回调函数将数据传回父组件。
// 父组件
function Parent() {
const [data, setData] = useState('initial');
const handleUpdate = (newData) => setData(newData);
return <Child data={data} onUpdate={handleUpdate} />;
}
// 子组件
function Child({ data, onUpdate }) {
return <button onClick={() => onUpdate('updated')}>{data}</button>;
}兄弟组件通信
通过状态提升（Lifting State Up）到共同的父组件，利用父组件作为中介传递数据。
function Parent() {
const [sharedData, setSharedData] = useState(null);
return (
<>
<SiblingA onUpdate={setSharedData} />
<SiblingB data={sharedData} />
</>
);
}跨层级组件通信
使用Context API实现深层嵌套组件间的数据共享，无需逐层传递props。
const DataContext = createContext();
function App() {
const [value, setValue] = useState('context data');
return (
<DataContext.Provider value={{ value, setValue }}>
<DeepChild />
</DataContext.Provider>
);
}
function DeepChild() {
const { value, setValue } = useContext(DataContext);
return <button onClick={() => setValue('updated')}>{value}</button>;
}全局状态管理
对于复杂应用，可使用状态管理库如Redux、MobX或Zustand集中管理状态。
// Redux示例
import { createSlice, configureStore } from '@reduxjs/toolkit';
const slice = createSlice({
name: 'data',
initialState: { value: '' },
reducers: {
update: (state, action) => {
state.value = action.payload;
}
}
});
const store = configureStore({ reducer: slice.reducer });
const { update } = slice.actions;
function Component() {
const value = useSelector(state => state.data.value);
const dispatch = useDispatch();
return <button onClick={() => dispatch(update('new'))}>{value}</button>;
}事件总线模式
通过自定义事件系统（如EventEmitter）实现任意组件间通信，但需注意避免滥用。
const emitter = new EventEmitter();
function ComponentA() {
emitter.emit('event', 'data');
}
function ComponentB() {
const [data, setData] = useState('');
useEffect(() => {
emitter.on('event', setData);
return () => emitter.off('event', setData);
}, []);
return <div>{data}</div>;
}其他方法
- Ref传递：使用
forwardRef和useImperativeHandle暴露子组件方法给父组件。 - 状态库选择：轻量级场景可使用
useReducer或Recoil等替代方案。
根据项目规模和复杂度，选择合适的方式平衡开发效率与可维护性。
