react如何实现组件通信

父子组件通信

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

// 父组件
function Parent() {
  const [data, setData] = useState('初始数据');
  const handleChildData = (childData) => {
    setData(childData);
  };
  return <Child onDataUpdate={handleChildData} />;
}

// 子组件
function Child({ onDataUpdate }) {
  const sendData = () => {
    onDataUpdate('子组件数据');
  };
  return <button onClick={sendData}>传递数据</button>;
}

兄弟组件通信

通过状态提升（Lifting State Up）将共享状态提升到最近的共同父组件中，父组件通过props分发数据给子组件。

function Parent() {
  const [sharedData, setSharedData] = useState('');
  return (
    <>
      <SiblingA onDataUpdate={setSharedData} />
      <SiblingB data={sharedData} />
    </>
  );
}

function SiblingA({ onDataUpdate }) {
  return <button onClick={() => onDataUpdate('A的数据')}>更新数据</button>;
}

function SiblingB({ data }) {
  return <div>接收到的数据: {data}</div>;
}

跨层级组件通信

使用Context API实现跨层级数据传递，适用于深层嵌套组件或全局状态管理。

const DataContext = createContext();

function App() {
  const [data, setData] = useState('全局数据');
  return (
    <DataContext.Provider value={{ data, setData }}>
      <ComponentA />
    </DataContext.Provider>
  );
}

function ComponentA() {
  return <ComponentB />;
}

function ComponentB() {
  const { data, setData } = useContext(DataContext);
  return <button onClick={() => setData('新数据')}>{data}</button>;
}

事件总线（Event Bus）

通过自定义事件实现任意组件间通信，适用于非父子关系的复杂场景。

// 事件总线实现
const eventBus = {
  listeners: {},
  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(cb => cb(data));
    }
  },
  on(event, callback) {
    if (!this.listeners[event]) this.listeners[event] = [];
    this.listeners[event].push(callback);
  }
};

// 组件A触发事件
function ComponentA() {
  const emitData = () => {
    eventBus.emit('dataEvent', '来自A的数据');
  };
  return <button onClick={emitData}>发送事件</button>;
}

// 组件B监听事件
function ComponentB() {
  const [data, setData] = useState('');
  useEffect(() => {
    eventBus.on('dataEvent', setData);
    return () => eventBus.off('dataEvent'); // 清理
  }, []);
  return <div>接收事件数据: {data}</div>;
}

状态管理库（Redux/Zustand）

使用Redux或Zustand等库集中管理状态，实现高效跨组件通信。

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

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

const store = configureStore({ reducer: dataSlice.reducer });

function ComponentA() {
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(dataSlice.actions.updateData('A的数据'))}>
      更新Redux状态
    </button>
  );
}

function ComponentB() {
  const data = useSelector(state => state.data.value);
  return <div>Redux数据: {data}</div>;
}

使用Refs

通过ref直接访问组件实例或DOM节点，适用于命令式操作。

function Parent() {
  const childRef = useRef();
  const callChildMethod = () => {
    childRef.current.updateData('父组件调用');
  };
  return (
    <>
      <Child ref={childRef} />
      <button onClick={callChildMethod}>触发子组件方法</button>
    </>
  );
}

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    updateData: (data) => console.log(data)
  }));
  return <div>子组件</div>;
});