Jotai 在 React Native 中使用 atomWithStorage 的注意事项

在 React Native 应用开发中，状态管理是一个关键环节。Jotai 作为一个轻量级的状态管理库，提供了 atomWithStorage 工具来简化状态持久化操作。然而，在实际应用中，开发者可能会遇到一些意料之外的行为。

问题现象

当在 React Native 中使用 atomWithStorage 时，开发者可能会发现：

• 应用内导航时状态能够正确保存和恢复
• 但当应用完全刷新后，存储的状态会恢复默认值
• 控制台日志显示原子状态似乎被重置

根本原因

这个问题的核心在于 atomWithStorage 的初始化行为。默认情况下，atomWithStorage 不会在初始化时立即从存储中读取数据。这意味着：

1. 原子首先使用默认值初始化
2. 异步读取存储的操作随后发生
3. 在 React Native 环境中，这种延迟可能导致组件在存储值加载前就完成渲染

解决方案

通过为 atomWithStorage 设置 getOnInit: true 选项，可以确保原子在初始化时立即从存储中读取数据：

export const lastAccessedTab = atomWithStorage(
  'last-tab',
  {value: 'Tab 1'},
  {
    ...storage,
    getOnInit: true  // 关键配置
  }
);

实现原理

getOnInit: true 改变了原子的初始化流程：

1. 原子创建时立即发起异步读取
2. 在数据返回前，原子保持未定义状态
3. 一旦数据加载完成，原子更新为存储中的值
4. 所有订阅组件将收到更新通知

最佳实践

对于 React Native 应用中的持久化状态管理，建议：

1. 始终启用 getOnInit：确保状态在应用启动时正确恢复
2. 处理加载状态：为原子添加加载状态指示，避免渲染问题
3. 考虑错误处理：存储操作可能失败，添加适当的错误处理逻辑
4. 性能优化：对于大型数据，考虑分块加载策略

扩展思考

这种异步初始化行为实际上是 React Native 异步特性的体现。与 web 环境不同，React Native 的 AsyncStorage 访问总是异步的，这就要求我们在状态管理层面做出相应调整。理解这一点有助于开发者更好地处理 React Native 中的各种异步场景。

通过正确配置 atomWithStorage，开发者可以构建出既保持响应性又能持久化状态的 React Native 应用，大大提升用户体验。