react 子组件如何通信
子组件向父组件通信
子组件通过调用父组件传递的回调函数实现通信。父组件将函数作为prop传递给子组件，子组件在特定事件触发时调用该函数。
// 父组件
function Parent() {
const handleChildEvent = (data) => {
console.log('Received from child:', data);
};
return <Child onEvent={handleChildEvent} />;
}
// 子组件
function Child({ onEvent }) {
const sendData = () => {
onEvent('Hello from child');
};
return <button onClick={sendData}>Send Data</button>;
}兄弟组件间通信
通过状态提升到共同的父组件实现兄弟组件通信。父组件管理共享状态并通过props分发给子组件。
function Parent() {
const [sharedData, setSharedData] = useState('');
return (
<>
<ChildA onUpdate={setSharedData} />
<ChildB data={sharedData} />
</>
);
}
function ChildA({ onUpdate }) {
return <button onClick={() => onUpdate('Updated')}>Update</button>;
}
function ChildB({ data }) {
return <div>Received: {data}</div>;
}Context API跨层级通信
创建Context提供全局数据，避免多层prop drilling。Provider组件包裹需要访问数据的组件树，Consumer组件获取数据。
const DataContext = createContext();
function App() {
const [value, setValue] = useState('default');
return (
<DataContext.Provider value={{ value, setValue }}>
<IntermediateComponent />
</DataContext.Provider>
);
}
function Child() {
const { value, setValue } = useContext(DataContext);
return (
<button onClick={() => setValue('new value')}>
Current: {value}
</button>
);
}事件总线模式
使用自定义事件系统实现任意组件间通信。创建事件发射器实例，组件通过订阅/发布事件交互。
const eventBus = new EventEmitter();
function ComponentA() {
useEffect(() => {
eventBus.emit('event', 'data');
}, []);
}
function ComponentB() {
const [data, setData] = useState('');
useEffect(() => {
eventBus.on('event', setData);
return () => eventBus.off('event', setData);
}, []);
return <div>{data}</div>;
}Redux状态管理
通过集中式store管理应用状态，组件通过dispatch actions和selectors与store交互。适用于大型应用复杂状态管理。
// store.js
const store = configureStore({
reducer: {
data: dataReducer
}
});
// component.js
function Component() {
const data = useSelector(state => state.data);
const dispatch = useDispatch();
const updateData = () => {
dispatch(updateAction('new value'));
};
return <button onClick={updateData}>{data}</button>;
}
