当前位置：首页 > React

react如何完成组件通信

2026-01-25 10:46:35React

父子组件通信

父组件通过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>;
});

react如何完成组件通信