在线示例

先试用，再阅读 API

点击按钮、添加任务或切换偏好，界面会立即更新。示例直接运行 @zhuangtai-js/core、@zhuangtai-js/react 和 @zhuangtai-js/persist，交互行为与实际应用一致。

真实 React 示例

实时操作，观察状态变化

下面是基于 @zhuangtai-js/react 的实时示例，可直接操作并查看关键代码。

计数器任务清单偏好设置

实时预览

计数器

atom 保存值，computed 派生双倍值。

atom + computed

当前值

3

双倍值

6

−重置+

关键实现

import { atom, computed } from "@zhuangtai-js/core";
import { useAtom, useAtomValue } from "@zhuangtai-js/react";

const count = atom(3);
const doubled = computed(() => count.get() * 2);

function CounterValue() {
  const value = useAtomValue(count);
  const doubledValue = useAtomValue(doubled);
  return <output>{value} · doubled {doubledValue}</output>;
}

function CounterControls() {
  const [, setCount] = useAtom(count);
  return (
    <div>
      <button onClick={() => setCount((value) => value - 1)}>−</button>
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={() => setCount((value) => value + 1)}>+</button>
    </div>
  );
}

示例要点

• 状态可以放在组件外部：多个组件读取同一个 atom，不需要额外 Provider。
• React 接入保持熟悉：useAtom 像 useState 一样调用，atom 可以放在组件外部。
• 派生值不需要手写依赖数组：computed 会追踪本次求值实际读取的 atom。
• 对象和数组保持不可变更新：任务清单通过创建新数组和新对象触发更新。
• 能力按需组合：只有偏好设置示例引入 persist，Core 本身仍保持轻量。

开始使用 React

pnpm add @zhuangtai-js/core @zhuangtai-js/react

import { atom } from "@zhuangtai-js/core";
import { useAtom } from "@zhuangtai-js/react";

const count = atom(0);

export function Counter() {
  const [value, setValue] = useAtom(count);
  return <button onClick={() => setValue((n) => n + 1)}>{value}</button>;
}

下一步可以阅读 React 指南 或查看完整示例。