react hook如何通信
React Hook 通信方法
使用 Props 传递数据
父组件通过 props 将数据传递给子组件，子组件通过 props 接收数据。这是 React 中最基础的通信方式。
function Parent() {
const [data, setData] = useState('Hello');
return <Child data={data} />;
}
function Child({ data }) {
return <div>{data}</div>;
}使用 Context API
Context 提供了一种在组件之间共享数据的方法，无需显式地通过 props 逐层传递。
const MyContext = createContext();
function Parent() {
const [data, setData] = useState('Hello');
return (
<MyContext.Provider value={data}>
<Child />
</MyContext.Provider>
);
}
function Child() {
const data = useContext(MyContext);
return <div>{data}</div>;
}使用自定义 Hook
自定义 Hook 可以将逻辑封装起来，多个组件共享同一逻辑。
function useCounter() {
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);
return { count, increment };
}
function ComponentA() {
const { count, increment } = useCounter();
return <button onClick={increment}>A: {count}</button>;
}
function ComponentB() {
const { count, increment } = useCounter();
return <button onClick={increment}>B: {count}</button>;
}使用状态管理库
Redux 或 Zustand 等状态管理库可以全局管理状态，方便组件间通信。
import { create } from 'zustand';
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
function ComponentA() {
const { count, increment } = useStore();
return <button onClick={increment}>A: {count}</button>;
}
function ComponentB() {
const { count, increment } = useStore();
return <button onClick={increment}>B: {count}</button>;
}使用事件总线
通过自定义事件或第三方库（如 mitt）实现组件间通信。
import { useEffect } from 'react';
import mitt from 'mitt';
const emitter = mitt();
function ComponentA() {
const handleClick = () => emitter.emit('increment');
return <button onClick={handleClick}>Increment</button>;
}
function ComponentB() {
const [count, setCount] = useState(0);
useEffect(() => {
emitter.on('increment', () => setCount((c) => c + 1));
return () => emitter.off('increment');
}, []);
return <div>Count: {count}</div>;
}使用 Refs 和回调
通过 ref 和回调函数实现父子组件通信。
function Parent() {
const childRef = useRef();
const handleClick = () => childRef.current.increment();
return (
<>
<button onClick={handleClick}>Trigger Child</button>
<Child ref={childRef} />
</>
);
}
const Child = forwardRef((props, ref) => {
const [count, setCount] = useState(0);
useImperativeHandle(ref, () => ({
increment: () => setCount((c) => c + 1),
}));
return <div>Child Count: {count}</div>;
});这些方法覆盖了 React Hook 中常见的通信场景，可以根据具体需求选择合适的方式。
