前端状态管理：Recoil 的原子化方案

正确的做法

// 正确的做法：使用 Recoil
import React from 'react';
import { atom, selector, useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';

// 定义原子状态
const userState = atom({ key: 'userState', default: null });
const todosState = atom({ key: 'todosState', default: [] });
const loadingState = atom({ key: 'loadingState', default: false });

// 定义派生状态
const completedTodosState = selector({
  key: 'completedTodosState',
  get: ({ get }) => {
    const todos = get(todosState);
    return todos.filter(todo => todo.completed);
  }
});

const incompleteTodosState = selector({
  key: 'incompleteTodosState',
  get: ({ get }) => {
    const todos = get(todosState);
    return todos.filter(todo => !todo.completed);
  }
});

const todoStatsState = selector({
  key: 'todoStatsState',
  get: ({ get }) => {
    const todos = get(todosState);
    const completed = get(completedTodosState);
    const incomplete = get(incompleteTodosState);
    return {
      total: todos.length,
      completed: completed.length,
      incomplete: incomplete.length,
      completionRate: todos.length > 0 ? (completed.length / todos.length) * 100 : 0
    };
  }
});

// 使用 Recoil 状态
function TodoList() {
  // 只订阅 todosState，其他状态变化不会触发重新渲染
  const [todos, setTodos] = useRecoilState(todosState);
  const toggleTodo = (id) => {
    setTodos(todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo ));
  };
  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>
          <input type="checkbox" checked={todo.completed} onChange={() => toggleTodo(todo.id)} />
          {todo.text}
        </div>
      ))}
    </div>
  );
}

function TodoStats() {
  // 只订阅派生状态，当依赖的状态变化时才会重新渲染
  const stats = useRecoilValue(todoStatsState);
  return (
    <div>
      <p>总任务数：{stats.total}</p>
      <p>已完成：{stats.completed}</p>
      <p>未完成：{stats.incomplete}</p>
      <p>完成率：{stats.completionRate.toFixed(2)}%</p>
    </div>
  );
}

function AddTodo() {
  const setTodos = useSetRecoilState(todosState);
  const [text, setText] = React.useState('');
  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim()) {
      setTodos(prev => [...prev, { id: Date.now(), text, completed: false }]);
      setText('');
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="添加任务" />
      <button type="submit">添加</button>
    </form>
  );
}

function UserProfile() {
  const [user, setUser] = useRecoilState(userState);
  const [loading, setLoading] = useRecoilState(loadingState);
  React.useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setUser({ id: 1, name: '张三', email: '[email protected]' });
      setLoading(false);
    }, 1000);
  }, [setUser, setLoading]);

  if (loading) {
    return <div>加载中...</div>;
  }
  return (
    <div>
      <h2>用户信息</h2>
      {user ? (
        <div>
          <p>姓名：{user.name}</p>
          <p>邮箱：{user.email}</p>
        </div>
      ) : (
        <p>未登录</p>
      )}
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Recoil 状态管理示例</h1>
      <UserProfile />
      <AddTodo />
      <TodoList />
      <TodoStats />
    </div>
  );
}

核心优势总结

Recoil 的核心优势在于其原子化和派生状态机制，这使得状态管理更加清晰和高效。它与 React Hooks 的无缝集成，让开发者能够以更自然的方式管理状态。

总结

• 原子状态：使用 atom 定义最小的状态单位
• 派生状态：使用 selector 创建基于原子状态的派生状态
• React 集成：使用 useRecoilState、useRecoilValue、useSetRecoilState 等 Hooks
• 性能优化：只重新渲染依赖状态变化的组件
• 状态持久化：可以与 localStorage 等结合实现状态持久化
• 调试工具：使用 Recoil DevTools 进行状态调试
• 类型支持：完整的 TypeScript 类型支持
• 可扩展性：适合从小型应用到大型应用的各种场景

Recoil 为前端状态管理提供了一种优雅的选择。