React数据传递的六种方式详解

// 父组件
const Parent = () => {
  const [message, setMessage] = useState("Hello from Parent!");

  return <Child greeting={message} />;
};

// 子组件
const Child = ({ greeting }) => {
  return <h1>{greeting}</h1>; // 直接使用父组件传递的 props
};

// 父组件
const Parent = () => {
  const handleChildClick = (data) => {
    console.log("子组件说：", data); // 接收子组件数据
  };

  return <Child onClick={handleChildClick} />;
};

// 子组件
const Child = ({ onClick }) => {
  return <button onClick={() => onClick("I'm Child!")}>点我传数据</button>;
};

// 父组件
const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <>
      <SiblingA count={count} />
      <SiblingB onUpdate={() => setCount(count + 1)} />
    </>
  );
};

// 兄弟组件 A（显示数据）
const SiblingA = ({ count }) => <div>当前计数：{count}</div>;

// 兄弟组件 B（修改数据）
const SiblingB = ({ onUpdate }) => <button onClick={onUpdate}>+1</button>;

// 创建 Context
const ThemeContext = createContext("light");

// 祖父组件
const Grandparent = () => {
  return (
    <ThemeContext.Provider value="dark">
      <Parent />
    </ThemeContext.Provider>
  );
};

// 孙子组件（跳过 Parent）
const Grandchild = () => {
  const theme = useContext(ThemeContext);
  return <div>当前主题：{theme}</div>; // 直接拿到祖父的数据
};

// 事件总线（可以用 mitt 或自定义）
const eventBus = new EventEmitter();

// 组件 A（发布事件）
const ComponentA = () => {
  const emitEvent = () => eventBus.emit("alert", "我是组件A发的消息！");
  return <button onClick={emitEvent}>发布事件</button>;
};

// 组件 B（订阅事件）
const ComponentB = () => {
  const [message, setMessage] = useState("");

  useEffect(() => {
    eventBus.on("alert", setMessage);
    return () => eventBus.off("alert", setMessage);
  }, []);

  return <div>收到消息：{message}</div>;
};

// 以 Zustand 为例
import { create } from "zustand";

// 创建 store
const useStore = create((set) => ({
  user: null,
  login: (name) => set({ user: name }),
}));

// 组件 A（修改状态）
const ComponentA = () => {
  const login = useStore((state) => state.login);
  return <button onClick={() => login("小杨")}>登录</button>;
};

// 组件 B（读取状态）
const ComponentB = () => {
  const user = useStore((state) => state.user);
  return <div>当前用户：{user || "未登录"}</div>;
};