当前位置：首页 > React

react如何通信

2026-02-26 01:12:02React

在React中，组件通信是核心功能之一，根据场景和需求的不同，可以采用多种方式实现。以下是常见的通信方法：

父子组件通信

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

// 父组件
function Parent() {
  const [data, setData] = useState('initial');
  const handleUpdate = (newData) => setData(newData);

  return <Child data={data} onUpdate={handleUpdate} />;
}

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

兄弟组件通信

通过状态提升（Lifting State Up）到共同的父组件，利用父组件作为中介传递数据。

function Parent() {
  const [sharedData, setSharedData] = useState(null);

  return (
    <>
      <SiblingA 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 }}>
      <DeepChild />
    </DataContext.Provider>
  );
}

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

全局状态管理

对于复杂应用，可使用状态管理库如Redux、MobX或Zustand集中管理状态。

// Redux示例
import { createSlice, configureStore } from '@reduxjs/toolkit';

const slice = createSlice({
  name: 'data',
  initialState: { value: '' },
  reducers: {
    update: (state, action) => {
      state.value = action.payload;
    }
  }
});

const store = configureStore({ reducer: slice.reducer });
const { update } = slice.actions;

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

事件总线模式

通过自定义事件系统（如EventEmitter）实现任意组件间通信，但需注意避免滥用。

const emitter = new EventEmitter();

function ComponentA() {
  emitter.emit('event', 'data');
}

function ComponentB() {
  const [data, setData] = useState('');
  useEffect(() => {
    emitter.on('event', setData);
    return () => emitter.off('event', setData);
  }, []);
  return <div>{data}</div>;
}