这个 React 状态管理库让我少写一半代码，同事问我是不是开挂了

说来惭愧，作为一个写了 5 年 React 的"老油条"，我以为自己已经见过了所有的状态管理方案。

从最初被 Redux 的样板代码虐得死去活来，到后来遇见 Zustand 时的"真香"时刻，我一直以为这就是 React 状态管理的天花板了。

直到有一天，我遇到了 Vue 的响应式编程，写起来是真的爽！

"为什么 React 的状态管理不能像 Vue 一样丝滑？"

这个问题困扰了我很久，直到某个深夜，我终于忍不住了...

那些让人抓狂的瞬间

痛点一：Redux 的"地狱级"样板代码

还记得第一次用 Redux 时的绝望吗？为了改变一个简单的计数器，我需要写：

javascript 复制代码

// Action Types
const INCREMENT = "INCREMENT";

// Action Creators
const increment = () => ({ type: INCREMENT });

// Reducer
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

// 还要配置Store、Provider...

就为了让一个数字+1，我写了 20 多行代码！ 这简直是对程序员生命的浪费。

痛点二：useState 的"状态地狱"

当项目复杂起来，useState 也变成了噩梦：

javascript 复制代码

const [user, setUser] = useState({});
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [settings, setSettings] = useState({});
const [theme, setTheme] = useState("light");
// ... 还有无数个useState

// 更新嵌套状态？准备好写展开运算符吧！
setUser((prev) => ({
  ...prev,
  profile: {
    ...prev.profile,
    name: newName,
  },
}));

这密密麻麻的展开运算符，简直是代码可读性的杀手！

痛点三：Zustand "几乎完美"

Zustand 确实很棒，但是对 Typescript 的自动类型推导不是很友好：

javascript 复制代码

import { create } from 'zustand'

// 每个 store 都要手写 interface
interface BearState {
  bears: number
  increase: (by: number) => void
}

const useBearStore = create<BearState>()((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
}))

每次修改状态和方法都要改两个地方，维护起来不是很方便，麻烦死了。

Vue 的启发

那是一个雨夜，我坐在电脑前，看着屏幕上密密麻麻的状态管理代码，突然想起了多年前第一次接触 Vue 时的震撼：

ts 复制代码

// Vue的响应式，简直是艺术品
const count = ref(0);
const doubled = computed(() => count.value * 2);

watch(count, (newVal, oldVal) => {
  console.log(`从 ${oldVal} 变成了 ${newVal}`);
});

count.value++; // 就这么简单！

我想："如果能把 Vue 的响应式体验带到 React 中，会是什么样？"

ZenBox 的诞生

就在那个失眠的夜晚，我开始了一场"技术叛逆"：

我要创造一个用起来像 Vue 一样爽的 React 状态管理库！

经过数月的打磨，ZenBox 诞生了！

爽点一：告别样板代码的繁琐

比 Zustand 更简单，比 Redux 更直接。能少写 2 行代码，我绝不多写 1 行。

tsx 复制代码

import { createStore, useStoreValue } from "zenbox";

// 自动类型推导，无需手写 interface
const counterStore = createStore({
  count: 0,
  increment() {
    counterStore.setState((state) => {
      state.count++; // 内置 Immer，直接修改！
    });
  },
});

function Counter() {
  // 状态变化时，自动触发 re-render
  const { count, increment } = useStoreValue(counterStore);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </>
  );
}

爽点二：Vue 般的开发体验

让 React 写起来像 Vue 一样爽，React 的灵活和 Vue 的简单我全都要！

tsx 复制代码

function AdvancedCounter() {
  // 计算值，自动跟踪依赖变化
  const doubled = useComputed(() => counterStore.value.count * 2);

  // 监听变化，还能自动清理副作用
  useWatch(
    () => counterStore.value.count,
    (current, prev) => {
      console.log(`计数从 ${prev} 变为 ${current}`);

      // 像 useEffect 一样返回清理函数，优雅！
      return () => console.log("清理完成！");
    }
  );

  return <div>Double: {doubled}</div>;
}

当我看到计算属性完美工作时，眼泪差点掉下来... 这种优雅，这种自然，就是我要的！

爽点三：TypeScript 体验炸裂

最让我自豪的是 ZenBox 开箱即用的 TypeScript 体验：

tsx 复制代码

// 零配置，全自动类型推导！
const store = createStore({
  user: { name: "Alice", age: 30 },
  getAge: () => store.value.user.age,
  settings: { theme: "dark" as "light" | "dark" },
});

// IDE智能提示完美，类型安全100%
store.value.user.name; // ✅ string
store.value.settings.theme; // ✅ "light" | "dark"

// 连函数返回值都能自动推导，再也不用手写 interface！
store.value.getAge(); // ✅ () => number

没有繁琐的 interface 定义，但类型安全一个不少！ 这就是我梦想中的开发体验。

性能？当然不能妥协！

轻量核心 : 不到 100 行代码，< 3KB gzipped (不含 Immer)
按需更新: 只有当组件订阅的状态发生变化时，组件才会重新渲染
灵活计算: 支持跨 store 联合计算，只有当结果发生变化时才会触发 re-render

社区反馈：超出预期

ZenBox 发布后，也收到了很多开发者的反馈：

"终于可以愉快地写 React 了！我 ❤️ ZenBox" - 某前端新手
"从 Redux 迁移到 ZenBox，代码量减少了 60% 🤯" - 某独立开发者
"感觉 Zustand 已经被 ZenBox 干掉了... 💪 加油国产之光！" - 某 React 大佬
"😘 我宣布从今往后 ZenBox 就是我的首选 React 状态管理库（~~之前是 Zustand~~）" - 某前端同事

争议与思考

当然，也有质疑声：

"又造轮子，真的有必要吗？"

我的回答是：如果轮子不够圆，为什么不能造个更圆的？ 技术的进步从来不是在舒适圈里实现的。

ZenBox 的存在，不是为了否定任何现有方案，而是为了给开发者多一种选择，一种更接近理想状态的选择。

"会不会昙花一现？"

ZenBox 的设计理念是经过深思熟虑的，它不是为了炫技，而是为了解决真实的开发痛点。

我相信好的技术会被时间证明。希望能创造一些让大家每次使用时都感到愉悦的东西。

立即体验 ZenBox

如果你也厌倦了繁琐的状态管理代码，如果你也渴望 Vue 般丝滑的开发体验，那就试试 ZenBox 吧！

bash 复制代码

npm install zenbox

项目链接：

🌟 GitHub : github.com/idootop/Zen...
📚 使用文档 : zenbox.del.wang
💬 交流讨论 : GitHub Discussions
🐛 问题反馈 : GitHub Issues

结语：为了更美好的开发体验

技术不应该是痛苦的，而应该是愉悦的。

代码不应该是负担，而应该是艺术。

ZenBox 不是终点，而是起点。它代表着我们对更美好开发体验的永恒追求。

我相信，每一个用过 ZenBox 的开发者，都会和我一样爱上这种丝滑的开发体验。

你准备好加入这场 React 状态管理的革命了吗？ 🚀

觉得有意思的话，记得点赞 👍 收藏 ⭐ 转发 🔄 让更多前端小伙伴认识 ZenBox！

你的每一个 star 和分享都是对我技术创新的支持，感谢！

作者：Del Wang | 一个热爱技术、追求极致开发体验的程序员