当前位置：首页 > React

react如何通信

2026-01-14 08:57:58React

React 组件通信方式

React 组件间的通信方式多样，具体选择取决于组件关系和场景需求。以下是常见方法：

父子组件通信

父组件通过 props 向子组件传递数据，子组件通过回调函数通知父组件。

// 父组件
function Parent() {
  const [data, setData] = useState('initial');
  const handleChildClick = (newData) => setData(newData);
  return <Child data={data} onClick={handleChildClick} />;
}

// 子组件
function Child({ data, onClick }) {
  return <button onClick={() => onClick('updated')}>{data}</button>;
}

兄弟组件通信

通过状态提升（Lifting State Up）到共同的父组件，或使用全局状态管理工具。

// 父组件管理共享状态
function Parent() {
  const [sharedData, setSharedData] = useState('');
  return (
    <>
      <SiblingA data={sharedData} 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 }}>
      <DeepNestedComponent />
    </DataContext.Provider>
  );
}

function DeepNestedComponent() {
  const { value, setValue } = useContext(DataContext);
  return <div onClick={() => setValue('updated')}>{value}</div>;
}

全局状态管理

使用 Redux、MobX 或 Zustand 等库管理复杂应用状态。

// Redux 示例
const store = configureStore({ reducer: yourReducer });

function Component() {
  const data = useSelector((state) => state.data);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch(updateAction())}>{data}</button>;
}

事件总线模式

通过自定义事件系统实现任意组件间通信（慎用，可能破坏 React 数据流）。

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>;
}

Ref 引用通信

使用 useRef 和 forwardRef 直接访问组件实例（适用于命令式操作）。

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    doSomething: () => console.log('child method called')
  }));
  return <div>Child</div>;
});

function Parent() {
  const childRef = useRef();
  return (
    <>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.doSomething()}>Call</button>
    </>
  );
}

URL 参数通信

通过路由参数或查询字符串共享数据（适合页面级组件）。

// React Router v6 示例
<Route path="/detail/:id" element={<DetailPage />} />

function DetailPage() {
  const { id } = useParams();
  return <div>ID: {id}</div>;
}

选择通信方式时应考虑：