在 React 中如何优化状态的使用？

// 不佳：混合不同用途的状态
const [user, setUser] = useState({
  name: "John",
  age: 25,
  isOnline: false // 频繁更新的状态
});

// 优化：拆分状态
const [userInfo, setUserInfo] = useState({ name: "John", age: 25 });
const [isOnline, setIsOnline] = useState(false); // 独立管理频繁更新的状态

// 不佳：直接修改状态
const updateUser = () => {
  user.age = 26; // 错误！不会触发重渲染
  setUser(user);
};

// 优化：创建新对象
const updateUser = () => {
  setUser(prev => ({ ...prev, age: 26 })); // 正确的不可变更新
};

// 对于数组
const [items, setItems] = useState([1, 2, 3]);
const addItem = () => {
  setItems(prev => [...prev, 4]); // 正确方式
};

// 不佳：存储可计算的数据
const [users, setUsers] = useState([]);
const [userCount, setUserCount] = useState(0); // 可以从users计算得出

// 优化：删除冗余状态
const [users, setUsers] = useState([]);
const userCount = users.length; // 直接计算

import { useMemo, useCallback } from 'react';

function UserList({ users }) {
  // 缓存计算结果
  const activeUsers = useMemo(
    () => users.filter(user => user.isActive),
    [users] // 只有users变化时才重新计算
  );
  
  // 缓存函数引用
  const handleDelete = useCallback(
    (id) => {
      // 处理删除逻辑
    },
    [] // 空依赖数组：函数引用不会变化
  );
  
  return (
    <div>
      {activeUsers.map(user => (
        <UserItem key={user.id} user={user} onDelete={handleDelete} />
      ))}
    </div>
  );
}

// 状态提升示例
function Parent() {
  const [theme, setTheme] = useState("light");
  
  return (
    <div>
      <Navbar theme={theme} />
      <Content theme={theme} onThemeChange={setTheme} />
    </div>
  );
}

// Navbar 和 Content 组件通过 props 获取 theme

// Zustand 示例（轻量级状态管理）
import { create } from 'zustand';

const useStore = create((set) => ({
  cart: [],
  addToCart: (item) => set(prev => ({ cart: [...prev.cart, item] })),
  removeFromCart: (id) => set(prev => ({
    cart: prev.cart.filter(item => item.id !== id)
  }))
}));

// 组件中使用
function Cart() {
  const { cart, addToCart } = useStore();
  // ...
}

const [count, setCount] = useState(0);

const updateCount = (newValue) => {
  // 避免相同值的更新
  if (newValue !== count) {
    setCount(newValue);
  }
};