react组件如何通讯

父子组件通讯

父组件通过 props 向子组件传递数据或方法，子组件通过调用父组件传递的回调函数实现通讯。

// 父组件
function Parent() {
  const [data, setData] = useState("Hello");
  const handleUpdate = (newData) => setData(newData);
  return <Child data={data} onUpdate={handleUpdate} />;
}

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

子父组件通讯

子组件通过调用父组件传递的回调函数，将数据传递回父组件。如上例中，子组件通过 onUpdate 触发父组件的状态更新。

兄弟组件通讯

通过状态提升（Lifting State Up），将共享状态定义在共同的父组件中，通过 props 传递给兄弟组件。

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

跨层级组件通讯

使用 Context API 或状态管理库（如 Redux）实现跨层级数据共享。

// 创建 Context
const DataContext = createContext();

// 提供者组件
function App() {
  const [data, setData] = useState("Initial");
  return (
    <DataContext.Provider value={{ data, setData }}>
      <ComponentA />
    </DataContext.Provider>
  );
}

// 消费者组件
function ComponentA() {
  const { data, setData } = useContext(DataContext);
  return <button onClick={() => setData("Updated")}>{data}</button>;
}

全局状态管理

使用 Redux 或 Zustand 等库管理全局状态，通过 dispatch 和 selector 实现组件间通讯。

// Redux 示例
import { useSelector, useDispatch } from "react-redux";

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

事件总线（Event Bus）

通过自定义事件或第三方库（如 EventEmitter）实现组件间松耦合通讯。

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

// 组件A触发事件
eventBus.emit("update", "New Data");

// 组件B监听事件
eventBus.on("update", (data) => console.log(data));

Refs 通讯

通过 useRef 或 forwardRef 直接访问组件实例或 DOM 节点，调用其方法或属性。

// 父组件通过 ref 调用子组件方法
function Parent() {
  const childRef = useRef();
  return (
    <>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.updateData("New Data")}>Update</button>
    </>
  );
}

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