React 状态管理怎么选？Redux、Zustand、Jotai 有什么区别？

import { useQuery } from '@tanstack/react-query'

function UserCard({ userId }) {
  const { data, isPending, error } = useQuery({
    queryKey: ['user', userId], // 缓存键：userId 变了自动请求新数据
    queryFn: () => fetchUser(userId),
    staleTime: 60_000, // 1 分钟内认为数据是新的，不重复请求
  })
  if (isPending) return <p>加载中</p>
  if (error) return <p>出错了</p>
  return <p>{data.name}</p>
}

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    incremented: (state) => {
      state.value += 1 // Immer 会生成新对象
    },
  },
})
const store = configureStore({ reducer: { counter: counterSlice.reducer } })
// 组件中：useSelector((state) => state.counter.value)，dispatch(counterSlice.actions.incremented())

import { atom, useAtomValue, useSetAtom } from 'jotai'

const priceAtom = atom(100)
const qtyAtom = atom(2)
const totalAtom = atom((get) => get(priceAtom) * get(qtyAtom)) // 派生 atom

function Total() {
  return <b>{useAtomValue(totalAtom)}</b> // 只有 total 变化时渲染
}
function AddButton() {
  const setQty = useSetAtom(qtyAtom) // 只写不读，qty 变化时这个组件不渲染
  return <button onClick={() => setQty((q) => q + 1)}>+1</button>
}

import { create } from 'zustand'
import { useShallow } from 'zustand/react/shallow'

const useCartStore = create((set) => ({
  items: [],
  coupon: null,
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  applyCoupon: (code) => set({ coupon: code }), // set 会浅合并到原状态
}))

function CartTotal() {
  // 选择器返回派生出的原始值，总价不变就不渲染
  const total = useCartStore((state) => state.items.reduce((sum, i) => sum + i.price, 0))
  return <b>{total}</b>
}

function CouponPanel() {
  // 选择器返回新对象时，用 useShallow 做浅比较，否则每次都被认为变了
  const { coupon, applyCoupon } = useCartStore(
    useShallow((state) => ({ coupon: state.coupon, applyCoupon: state.applyCoupon })),
  )
  return <button onClick={() => applyCoupon('VIP')}>{coupon ?? '使用优惠券'}</button>
}