React状态管理太复杂？试试这个原子级神器！

掘金前端

程序员_June

2026年1月21日 11:03

每次开始新项目，选择状态管理方案都让人头疼。

Redux模板代码太多，Context性能优化麻烦，MobX学习曲线陡峭……有没有一个既简单又强大的选择？

今天给你推荐一个让我眼前一亮的方案——Jotai。

什么是Jotai？

Jotai是一个原子化状态管理库，核心思想很简单：把应用状态拆成一个个独立的“原子”，每个原子管理自己的数据。

最棒的是，它的API和React自带的useState几乎一样，学习成本接近零。

// 创建一个状态
const countAtom = atom(0)

// 在组件中使用
function Counter() {
  const [count, setCount] = useAtom(countAtom)
  return <button onClick={() => setCount(count + 1)}>点击：{count}</button>
}

就这样，你创建了一个可以在任何组件中直接使用的共享状态，不需要Provider包裹，不需要层层传递props。

为什么选择Jotai？

1. 零学习成本

如果你会用useState，5分钟就能上手Jotai。

2. 自动性能优化

Jotai自动追踪状态依赖，只有真正使用某个状态的组件才会更新：

const userAtom = atom({ name: '张三', age: 25 })
const themeAtom = atom('light')

// 只有这个组件会在用户信息变化时更新
function UserInfo() {
  const [user] = useAtom(userAtom)  // 只订阅userAtom
  return <div>{user.name}</div>
}

// 只有这个组件会在主题变化时更新  
function ThemeButton() {
  const [theme] = useAtom(themeAtom)  // 只订阅themeAtom
  return <button className={theme}>按钮</button>
}

3. 状态组合像搭积木

小状态组合成大状态，逻辑清晰：

const priceAtom = atom(100)    // 单价
const countAtom = atom(2)      // 数量
const totalAtom = atom((get) => get(priceAtom) * get(countAtom))  // 自动计算总价

// 单价或数量变化时，总价自动更新

4. 异步处理变简单

不再需要自己管理loading状态：

const postsAtom = atom(async () => {
  const response = await fetch('/api/posts')
  return response.json()
})

function PostsList() {
  const [posts] = useAtom(postsAtom)
  
  // Jotai自动处理loading状态
  if (!posts) return <div>加载中...</div>
  
  return posts.map(post => <div key={post.id}>{post.title}</div>)
}

实战：登录功能改造

传统Context写法（问题：任何状态变化都会导致所有子组件重渲染）：

// 需要创建Context、Provider，使用useContext
const AuthContext = createContext()
// 一堆模板代码...

Jotai写法（清晰、独立、高效）：

// 定义原子状态
const userAtom = atom(null)
const loadingAtom = atom(false)

// 定义登录action
const loginAtom = atom(null, (get, set, credentials) => {
  set(loadingAtom, true)
  api.login(credentials).then(user => {
    set(userAtom, user)
    set(loadingAtom, false)
  })
})

// 在组件中使用（无需Provider）
function LoginButton() {
  const [, login] = useAtom(loginAtom)
  const [loading] = useAtom(loadingAtom)
  
  return (
    <button onClick={login} disabled={loading}>
      {loading ? '登录中...' : '登录'}
    </button>
  )
}

这些场景特别适合Jotai

✅ 中小型React应用 - 状态不太复杂，但需要共享
✅ 团队协作项目 - 新人能快速上手
✅ 性能敏感应用 - 需要避免不必要的重渲染
✅ 渐进式重构 - 可以部分引入，逐步替换

开始使用吧！

安装Jotai只需要一行命令：

npm install jotai
# 或
yarn add jotai

然后就可以像使用useState一样使用共享状态了。

Jotai不会解决所有问题，但它确实在简单性和功能性之间找到了很好的平衡。对于大多数应用来说，它提供的功能已经足够强大，而学习成本却极低。

有时候，最好的解决方案不是功能最多的，而是让开发者能专注于业务逻辑而不是框架本身的那一个。Jotai就是这样一个工具——简单、直观、高效。

下次当你为状态管理发愁时，不妨试试Jotai。你会发现，状态管理原来可以这么简单愉快！

关注我的公众号" 大前端历险记"，掌握更多前端开发干货姿势！

阅读视图