react-hot-toast为何仅导出toast即可实现跨组件状态修改？

你可能会好奇，用react-hot-toast时，既不用全局状态、属性透传，也不用Context API，就能在任意组件里调用toast.success()这类方法，让页面上的Toaster组件显示提示。核心原因其实是它内部用了这几个小技巧：

• 自带独立的状态仓库：导出的toast不是普通函数，它内部自己维护了一个状态容器，所有toast消息都存在这里。这个状态和React组件自身的状态完全分开，不需要依赖React的状态管理机制。
• 发布订阅的联动逻辑：当<Toaster />组件挂载到页面后，会自动订阅这个内部状态的变化。你调用toast.success()时，其实是往这个状态容器里加了一条新消息，同时触发状态更新的通知。Toaster组件接到通知后，就会重新渲染，把新的toast消息展示出来。
• 单例模式保证全局一致：你在任何组件里import的toast都是同一个实例，不管在哪调用它的方法，操作的都是同一个状态容器，所以Toaster组件总能同步到最新的消息。

示例代码 #

Layout.tsx

import { Toaster } from "react-hot-toast";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <body>
      {children}
      <Toaster />
    </body>
  );
}

page.tsx

import { toast } from "react-hot-toast";

export default function Home() {
  return (
    <button
      onClick={() => {
        toast.success("Toast Success");
      }}
    >
      显示提示
    </button>
  );
}

内容的提问来源于stack exchange，提问作者n4djib