当前位置：首页 > React

react hook如何通信

2026-03-31 02:51:38React

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 和回调函数实现父子组件通信。

react hook如何通信

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 中常见的通信场景，可以根据具体需求选择合适的方式。