Reatom：与您共同成长的状态管理

碎片化问题

现代前端开发有一个熟悉的模式：

• 从简单的useState钩子开始
• 需要共享状态？添加上下文
• 上下文重新渲染过于频繁？添加状态管理器
• 状态管理器处理异步操作不佳？那就添加一个数据获取库吧。
• 需要表格？另一个图书馆
• 路由需要加载数据吗？带加载器的路由器
• 持久化？又一个库
• 日志记录和分析？又来了……

每种工具都有其自身的思维模式、API 特性和捆绑包成本。随着技术栈的扩展，复杂性成倍增长，新团队成员需要数周时间才能完全理解。版本控制和跨多个库的兼容性维护也变成了一场噩梦。

Reatom 采用了一种不同的方法。它是一个统一的系统，可以处理所有这些问题——从最简单的计数器到最复杂的企业数据流。您可以根据需要使用，并与现有系统集成。

如需快速概览，您可以访问我们的网站：https://v1000.reatom.dev/

禅宗

Realom的设计遵循以下四个原则：

• 基本组件优于框架——几个强大的构建模块胜过复杂的框架
• 组合优于配置——堆叠简单的组件，而不是配置庞大的单体架构。
• 明确具体细节，隐含通用概念——明确重点，隐藏样板文字
• 兼容性值得付出复杂性——与你的技术栈协同工作，而不是与之对抗。

这些并非营销口号，而是六年来的生产使用和持续改进的成果，始于 2019 年 12 月的第一个 LTS 版本。

从简单的开始

如果信号熟悉，Reatom 用起来就会感觉很自然：

import { atom, computed } from '@reatom/core'

const counter = atom(0)
const isEven = computed(() => counter() % 2 === 0)

// Read
console.log(counter()) // 0
console.log(isEven()) // true

// Write
counter.set(5)
counter.set((prev) => prev + 1)

无需提供任何服务，无需编写任何样板代码，也无需繁琐的流程。核心代码压缩后不到3KB——比一些“轻量级”的替代方案还要小。

你可以就此打住，但接下来才真正有趣……

无限增长

用于计数器的基本运算方式同样可以处理企业级复杂度：

import { atom, computed, withSearchParams, withAsyncData, wrap, sleep } from '@reatom/core'

// Sync with URL search params automatically
const search = atom('', 'search').extend(withSearchParams('search'))
const page = atom(1, 'page').extend(withSearchParams('page'))

// Async computed with automatic cancellation
const searchResults = computed(async () => {
  const url = `/api/search?q=${search()}&page=${page()}`
  await wrap(sleep(300)) // The wrap provides debouncing here

  const response = await wrap(fetch(url))
  return await wrap(response.json())
}, 'searchResults').extend(withAsyncData({ initState: [] }))

// Now you have:
searchResults.ready() // loading state
searchResults.data() // the results
searchResults.error() // any errors

这里发生了什么：

1. search原子会page自动与 URL 参数同步
2. 只有当依赖项发生变化并且有其他东西订阅它时，计算才会重新运行（偷懒！）
3. 如果用户输入速度超过 API 响应速度，则之前的请求将自动取消。
4. 竞态条件？已处理。内存泄漏？不可能。

atom这与反例相同——只是进行了扩展。

扩展系统

Reatom 没有采用单一框架，而是提供了可组合的扩展，这些扩展可以干净利落地堆叠在一起：

const theme = atom('dark').extend(
  // Persist to localStorage
  withLocalStorage('theme'),
)

const list = atom([]).extend(
  // Memoize an equal changes
  withMemo(),
)

const unreadCount = atom(0).extend(
  // React to state changes
  withChangeHook((count) => {
    document.title = count > 0 ? `(${count}) My App` : 'My App'
  }),
  // Sync across tabs
  withBroadcastChannel('notificationsCounter'),
)

每个扩展程序都专注于做好一件事。只需编写所需内容即可。

超越国家：完整解决方案

Reatom 为常见的前端难题提供完整的解决方案：

表格

类型安全的表单管理，并提供一流的支持：

• 字段级和表单级验证（同步和异步）
• 与标准模式验证器（Zod、Valibot 等）集成
• 具有添加、删除和重新排序操作的动态字段数组
• 焦点跟踪、污渍检测、错误管理
• 没有奇怪的字符串路径——只有对象和原子
• 高度优化且性能卓越

https://v1000.reatom.dev/start/forms/

路由

具有自动生命周期管理的类型安全路由：

• 参数验证和转换
• 导航时自动取消数据加载
• 具有共享布局的嵌套路由
• 搜索参数处理
• 同构跨框架支持
• 工厂模式——路由加载器中创建的状态会在导航时自动进行垃圾回收，从而解决“全局状态清理”问题。

https://v1000.reatom.dev/start/routing/

持久性

大量内置存储适配器，具备多种高级功能：

• localStorage、sessionStorage、BroadcastChannel、IndexedDB、Cookie 和 Cookie Store
• 与标准模式验证器（Zod、Valibot 等）集成
• 数据格式变更的版本迁移
• TTL（生存时间）支持
• 当内存存储不可用时，优雅地回退到内存存储。

https://v1000.reatom.dev/handbook/persist/

深层技术优势

原因追踪

Reatom 模拟了TC39 AsyncContext，并从中获得了大量好处：

• 自动取消并发异步链（类似防抖）：https://v1000.reatom.dev/handbook/async-context/
• 某种形式的 IoC 和 DI 是可能的：https://v1000.reatom.dev/reference/methods/#variable-1
• 异步事务：https://v1000.reatom.dev/reference/methods/#withrollback
• 进程跟踪和日志记录：https://v1000.reatom.dev/start/tooling/

最后一项功能对于复杂的异步流程来说堪称颠覆性的。您可以轻松检查并发操作的原因，并将调试时间从数小时缩短到数分钟。

表现

Reatom 在其功能集范围内拥有最佳性能。应用程序越复杂，Reatom 的运行速度就越快，优于其他同类软件。

针对复杂计算的基准测试表明，在中等规模的依赖关系图中，Reatom 的性能优于 MobX——考虑到 Reatom 使用不可变数据结构并在单独的异步上下文中运行，这令人印象深刻，这些特性带来了显著的好处，但通常会增加开销。

显式响应，无代理

基于代理的响应式在简单场景下很方便，但在大型代码库中难以追踪。使用 Reatom，只需将鼠标悬停在任何属性上即可获得类型提示——响应式属性始终一目了然。

Reatom 提倡原子化——将后端 DTO 转换为应用程序模型，其中可变属性变为原子：

// Backend DTO
type UserDto = { id: string; name: string }

// Application model with explicit reactivity
type User = { id: string; name: Atom<string> }

const userModel = { id: dto.id, name: atom(dto.name) }

// Now it's always clear:
userModel.id // static value — no reactivity
userModel.name() // reactive — tracks changes

这种模式赋予你精细的控制：在需要的地方精确定义响应式元素，避免不受控制地创建观察者，并且永远不需要toJS类似转换来检查或传递数据。

原子化降低了复杂性

在不可变状态管理器中，更新列表中的一个元素需要重新创建整个数组——时间复杂度为 O(n)。Reatom 的原子化模式提供了 O(1) 的更新速度：

// Traditional immutable approach: O(n)
const updateName = (state, idx, name) => ({
  ...state,
  users: state.users.map((u, i) => (i === idx ? { ...u, name } : u)),
})

// Reatom with atomization: O(1)
users()[idx].name.set(newName)

对于包含成千上万项的列表来说，这种差异至关重要。

与框架无关，生态系统友好

目前，Reatom 与 React 的兼容性最佳（https://v1000.reatom.dev/reference/react），但我们已经有了 Vue、Preact、Solid 和 Lit 的草案包，并计划推出 Svelte 和 Angular（信号）版本。您还可以使用reatomObservable绑定任何库。

只需编写一次状态和副作用，即可获得可重用的模型，适用于复杂的测试和任何视图框架。非常适合模块化设计，尤其适用于微前端。

Reatom 并非封闭的生态系统。它能与原生 Web API 和整个 npm 生态系统完美兼容：可以使用 Zod 进行验证，使用任何 HTTP 请求的 fetch 封装库，使用内置的 AbortController，并绑定任何 UI 组件库。在现有项目中逐步采用 Reatom，无需一次性重写所有内容。

试试看

npm install @reatom/core @reatom/react

从原子开始。根据需要添加扩展。可扩展到任何复杂度。

链接：

• 文档
• GitHub
• Discord
• x.com/reatomjs
• llms.txt