React 共享状态：告别“祖传”Props，拥抱“真香”体验！

React 共享状态：告别“祖传”Props，拥抱“真香”体验！?

各位掘友，请脑补这个经典剧情：

你正在快乐地写着 React 组件，突然发现：卧槽！这个 state 居然要在另一个组件里用到？！?

于是你开始了传统艺能三选一：

• Context → 为了一根香肠买回整头猪，用 Provider 把 App 裹成木乃伊
• Redux → 恭喜你！为了一个变量，成功解锁 100 行模板代码的成就
• Zustand/Jotai → 挺好，但总感觉为了点醋包了顿饺子

是不是已经开始 emo 了？别急，今天我就要安利一个让你直呼"真香"的解决方案！

隆重介绍：react-shared-states ?（此处应有掌声）

GitHub 指路：react-shared-states

来看个效果炸裂的 demo：

import { useSharedState } from "react-shared-states";

function ComponentA() {
  const [count, setCount] = useSharedState("counter", 0);
  return <button onClick={() => setCount(count + 1)}>A: {count}</button>;
}

function ComponentB() {
  const [count, setCount] = useSharedState("counter", 0);
  return <button onClick={() => setCount(count + 1)}>B: {count}</button>;
}

// No provider needed!
function App() {
  return (
    <>
      <ComponentA />
      <ComponentB />
    </>
  );
}

点击 A，B 自动更新！就问你神不神奇？只需要一个相同的 key，世界大同！

这波操作堪称：一行代码，全球同步 ?

吃瓜时间：这个库是怎么来的？?

某天，我基友兴冲冲地用起了 useBetween 这个库，代码写得飞起：

const userData = useBetween(useUserData);  // 一次请求，随处使用

效果拔群！堪称 Firebase 好搭档！

然后......React 19 发布了，他的项目炸了！?

为什么？因为他发现了这段让人瞳孔地震的代码：

const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
// 注意：这是危险操作，请勿模仿！

好家伙！作者直接用了 React 的私密接口，现在 React 19 删了这接口，库就原地爆炸了！

于是我基友只能含泪回归 Redux，从"真香"变成"真伤"?

技术揭秘：官方认证的解决方案 ?

React 其实早就给了我们正经方案：useSyncExternalStore！

看这个炫酷的示例：

let counter = 0;
let listeners = [];

const subscribe = (listener) => {
  listeners.push(listener);
  return () => listeners = listeners.filter(l => l !== listener);
};

const getSnapshot = () => counter;

const setCounter = (value) => {
  counter = value;
  listeners.forEach(listener => listener());
};

function CounterComponent() {
  const value = useSyncExternalStore(subscribe, getSnapshot);
  return <button onClick={() => setCounter(value + 1)}>{value}</button>;
}

这才是官方认证的优雅姿势！从此告别 hack，走向人生巅峰！

高级玩法：不是所有状态都要全球飞 ?

有时候你只想在小圈子里共享状态？安排！

<SharedStatesProvider>
  <YourComponent />
</SharedStatesProvider>

想来点更骚的操作？多个组件树共享同一状态？

<SharedStatesProvider scopeName="modal">
  <ModalContent />
</SharedStatesProvider>

<Portal>
  <SharedStatesProvider scopeName="modal">
    <FloatingToolbar />
  </SharedStatesProvider>
</Portal>

即使在不同 React 树中，也能同步状态，就问你6不6！

异步操作：一键搞定数据请求 ⚡

const fetchUser = () => fetch("/api/me").then(r => r.json());

function Profile() {
  const { state, trigger } = useSharedFunction("current-user", fetchUser);

  useEffect(() => { trigger(); }, []);

  if (state.isLoading && !state.results) return <p>Loading...</p>;
  if (state.error) return <p>Error!</p>;

  return <h1>{state.results.name}</h1>;
}

一次请求，全家享用！自动缓存+去重，性能优化直接拉满！

实时数据：Firebase/WebSocket 一键接入 ?

const { state, trigger } = useSharedSubscription(
  "user-123",
  (update, onError, onComplete) => {
    const unsubscribe = firebase.onSnapshot(doc(db, "users", "123"), (snapshot) => {
      update(snapshot.data());
    }, onError, onComplete);
    return unsubscribe;
  }
);

第一个组件建立连接，其他组件白嫖数据！用完自动断开，绝不内存泄漏！

彩蛋功能：在 React 外部操控状态 ?

import { sharedStatesApi } from "react-shared-states";

sharedStatesApi.set("theme", "dark");  // 随时随地修改状态
console.log(sharedStatesApi.get("theme"));

SSR、调试、非 React 代码都能用，就问你贴不贴心！

总结时刻 ?

• 我基友用了 useBetween → React 19 发布 → 项目爆炸 → 含泪回归 Redux
• 我灵机一动 → 用 useSyncExternalStore 重写 → react-shared-states 诞生！
• 现在你可以：共享状态、作用域隔离、异步操作、实时订阅、外部API...要啥有啥！

如果你也：

• 受够了 Context 的层层包裹
• 不想再写 Redux 的模板代码
• 想要轻量又强大的状态管理

那么......还不快去给个 Star！⭐️

GitHub 传送门：react-shared-states

因为说真的......React 状态管理从未如此简单，如此有趣！?

（小声说：用了这个，你可能就再也回不去了......）