react如何完成组件通信
父子组件通信
父组件通过props向子组件传递数据。子组件通过调用父组件传递的回调函数与父组件通信。
// 父组件
function Parent() {
const [data, setData] = useState('initial data');
const handleChildClick = (newData) => {
setData(newData);
};
return <Child data={data} onClick={handleChildClick} />;
}
// 子组件
function Child({ data, onClick }) {
return (
<button onClick={() => onClick('updated data')}>
{data}
</button>
);
}子父组件通信
子组件通过调用父组件传递的回调函数将数据传递回父组件。父组件可以更新自己的状态或执行其他操作。
兄弟组件通信
通过将共享状态提升到最近的共同父组件中实现兄弟组件间的通信。父组件管理状态并通过props分发给各个子组件。
function Parent() {
const [sharedState, setSharedState] = useState('');
return (
<>
<SiblingA
state={sharedState}
setState={setSharedState}
/>
<SiblingB
state={sharedState}
setState={setSharedState}
/>
</>
);
}Context API
对于跨多级组件的数据共享，使用Context API避免props层层传递。创建Context后，Provider提供数据，Consumer或useContext钩子消费数据。
const MyContext = createContext();
function App() {
return (
<MyContext.Provider value="shared value">
<ComponentA />
</MyContext.Provider>
);
}
function ComponentA() {
const value = useContext(MyContext);
return <div>{value}</div>;
}状态管理库
对于复杂应用状态管理，可使用Redux、MobX等库。这些库提供集中式状态存储和可预测的状态更新机制。
// Redux示例
const store = createStore(reducer);
function Component() {
const state = useSelector(state => state.value);
const dispatch = useDispatch();
return (
<button onClick={() => dispatch({ type: 'INCREMENT' })}>
{state}
</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>;
}Refs与实例方法
通过ref获取组件实例并调用其方法。适用于需要直接访问子组件的情况。
function Parent() {
const childRef = useRef();
const handleClick = () => {
childRef.current.doSomething();
};
return (
<>
<Child ref={childRef} />
<button onClick={handleClick}>Call Child Method</button>
</>
);
}
const Child = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
doSomething: () => console.log('Child method called')
}));
return <div>Child Component</div>;
});
