当前位置：首页 > news >正文

Jotai进阶：原子化状态管理的新范式

news 2026/5/11 11:21:14

Jotai进阶：原子化状态管理的新范式

前言

大家好，我是cannonmonster01！今天我们来探讨Jotai这个新兴的状态管理库。

想象一下，你正在搭积木。每个积木都是一个独立的单元，可以组合成各种复杂的结构。Jotai就是这样的一个库，它将状态拆分成一个个独立的"原子"，让状态管理变得更加灵活和高效。

如果你喜欢React的hooks风格，又想要更好的状态管理方案，Jotai绝对值得一试！

Jotai核心概念

Atom - 原子状态

Atom是Jotai中最小的状态单元：

import { atom } from 'jotai'; const countAtom = atom(0); const nameAtom = atom(''); const todosAtom = atom([]);

使用Atom

在组件中使用Atom非常简单：

import { useAtom } from 'jotai'; function Counter() { const [count, setCount] = useAtom(countAtom); return ( <div> <span>{count}</span> <button onClick={() => setCount(c => c + 1)}>+</button> </div> ); }

派生Atom

可以基于其他Atom创建派生Atom：

import { atom } from 'jotai'; const countAtom = atom(0); const doubledCountAtom = atom((get) => get(countAtom) * 2); const tripledCountAtom = atom((get) => get(countAtom) * 3);

Jotai实战

实战1：创建表单状态

import { atom, useAtom } from 'jotai'; const emailAtom = atom(''); const passwordAtom = atom(''); const rememberMeAtom = atom(false); const isFormValidAtom = atom((get) => { const email = get(emailAtom); const password = get(passwordAtom); return email.includes('@') && password.length >= 6; }); function LoginForm() { const [email, setEmail] = useAtom(emailAtom); const [password, setPassword] = useAtom(passwordAtom); const [rememberMe] = useAtom(rememberMeAtom); const isFormValid = useAtom(isFormValidAtom); const handleSubmit = () => { if (isFormValid) { console.log('Form submitted:', { email, password, rememberMe }); } }; return ( <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" /> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" /> <label> <input type="checkbox" checked={rememberMe} onChange={(e) => setRememberMe(e.target.checked)} /> Remember me </label> <button type="submit" disabled={!isFormValid}> Login </button> </form> ); }

实战2：异步数据获取

import { atom, useAtom } from 'jotai'; const fetchUserAtom = atom(async (get) => { const userId = get(userIdAtom); const response = await fetch(`https://api.example.com/users/${userId}`); return response.json(); }); function UserProfile() { const [user, setUser] = useAtom(fetchUserAtom); if (!user) { return <div>Loading...</div>; } return ( <div> <h1>{user.name}</h1> <p>{user.email}</p> </div> ); }

实战3：创建持久化存储

import { atom, useAtom } from 'jotai'; import { atomWithStorage } from 'jotai/utils'; const themeAtom = atomWithStorage('theme', 'light'); const preferencesAtom = atomWithStorage('preferences', { notifications: true, autoPlay: false, }); function ThemeSwitcher() { const [theme, setTheme] = useAtom(themeAtom); const toggleTheme = () => { setTheme(theme === 'light' ? 'dark' : 'light'); }; return ( <button onClick={toggleTheme}> Switch to {theme === 'light' ? 'dark' : 'light'} mode </button> ); }

实战4：创建只读Atom

import { atom, useAtom } from 'jotai'; const todosAtom = atom([ { id: 1, text: 'Learn Jotai', completed: false }, { id: 2, text: 'Build something cool', completed: true }, ]); const completedCountAtom = atom((get) => { const todos = get(todosAtom); return todos.filter(todo => todo.completed).length; }); const progressAtom = atom((get) => { const todos = get(todosAtom); const completed = get(completedCountAtom); return todos.length > 0 ? Math.round((completed / todos.length) * 100) : 0; }); function TodoStats() { const completed = useAtom(completedCountAtom); const progress = useAtom(progressAtom); return ( <div> <p>Completed: {completed}</p> <div style={{ width: '100%', background: '#eee' }}> <div style={{ width: `${progress}%`, background: '#4CAF50', height: '20px', }} /> </div> <p>Progress: {progress}%</p> </div> ); }

Jotai最佳实践

1. 组织Atom结构

// atoms/user.js export const userIdAtom = atom(1); export const userAtom = atom(async (get) => { const response = await fetch(`/api/users/${get(userIdAtom)}`); return response.json(); }); // atoms/theme.js export const themeAtom = atomWithStorage('theme', 'light'); // atoms/cart.js export const cartItemsAtom = atom([]); export const cartTotalAtom = atom((get) => { return get(cartItemsAtom).reduce((sum, item) => sum + item.price, 0); });

2. 使用utils增强功能

import { atomWithStorage, atomWithReset } from 'jotai/utils'; // 持久化Atom const settingsAtom = atomWithStorage('settings', {}); // 可重置Atom const tempValueAtom = atomWithReset(''); // 使用resetAtom重置 const resetTempValue = useResetAtom(tempValueAtom); resetTempValue();

3. 性能优化技巧

import { useAtomCallback } from 'jotai/utils'; // 使用useAtomCallback避免不必要的重渲染 const updateItem = useAtomCallback( (get, set) => async (itemId, updates) => { const items = get(itemsAtom); set(itemsAtom, items.map(item => item.id === itemId ? { ...item, ...updates } : item )); } );

4. 服务端渲染支持

import { Provider, atom } from 'jotai'; function App({ initialState }) { return ( <Provider initialValues={initialState}> <MainContent /> </Provider> ); }

Jotai与其他状态管理库对比

特性	Jotai	Recoil	Zustand	Redux
原子化	是	是	否	否
学习曲线	平缓	平缓	平缓	陡峭
代码量	少	中等	少	多
异步支持	原生	原生	原生	中间件
持久化	通过utils	通过effects	通过middleware	需额外配置
适用场景	React项目	React项目	中小型应用	大型复杂应用