// 父組件
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); // 接收子組件數(shù)據(jù)
  };

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

// 子組件
const Child = ({ onClick }) => {
  return <button onClick={() => onClick("I'm Child!")}>點我傳數(shù)據(jù)</button>;
};

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

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

// 兄弟組件 A（顯示數(shù)據(jù)）
const SiblingA = ({ count }) => <div>當前計數(shù)：{count}</div>;

// 兄弟組件 B（修改數(shù)據(jù)）
const SiblingB = ({ onUpdate }) => <button onClick={onUpdate}>+1</button>;

// 創(chuàng)建 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>; // 直接拿到祖父的數(shù)據(jù)
};

// 事件總線（可以用 mitt 或自定義）
const eventBus = new EventEmitter();

// 組件 A（發(fā)布事件）
const ComponentA = () => {
  const emitEvent = () => eventBus.emit("alert", "我是組件A發(fā)的消息！");
  return <button onClick={emitEvent}>發(fā)布事件</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";

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

// 組件 A（修改狀態(tài)）
const ComponentA = () => {
  const login = useStore((state) => state.login);
  return <button onClick={() => login("小楊")}>登錄</button>;
};

// 組件 B（讀取狀態(tài)）
const ComponentB = () => {
  const user = useStore((state) => state.user);
  return <div>當前用戶：{user || "未登錄"}</div>;
};