{"id":247,"date":"2026-09-09T10:07:35","date_gmt":"2026-09-09T02:07:35","guid":{"rendered":"https:\/\/yykcj.com\/?p=247"},"modified":"2026-09-09T10:07:35","modified_gmt":"2026-09-09T02:07:35","slug":"react-%e7%8a%b6%e6%80%81%e7%ae%a1%e7%90%86%e4%b8%89%e5%bc%ba%e4%ba%89%e9%9c%b8%ef%bc%9azustand-jotai-redux-%e9%80%89%e5%9e%8b%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=247","title":{"rendered":"React \u72b6\u6001\u7ba1\u7406\u4e09\u5f3a\u4e89\u9738\uff1aZustand \/ Jotai \/ Redux \u9009\u578b\u6307\u5357"},"content":{"rendered":"

\u5f15\u8a00<\/h2>\n

\u5728 React \u5e94\u7528\u5f00\u53d1\u4e2d\uff0c\u72b6\u6001\u7ba1\u7406\u59cb\u7ec8\u662f\u7ed5\u4e0d\u5f00\u7684\u8bdd\u9898\u3002\u4ece\u65e9\u671f\u7684 Redux \u4e00\u7edf\u5929\u4e0b\uff0c\u5230\u5982\u4eca Zustand\u3001Jotai \u7b49\u8f7b\u91cf\u65b9\u6848\u767e\u82b1\u9f50\u653e\uff0c\u5f00\u53d1\u8005\u9762\u4e34\u7684\u9009\u62e9\u8d8a\u6765\u8d8a\u591a\u3002\u4f46\u9009\u62e9\u8d8a\u591a\uff0c\u56f0\u60d1\u4e5f\u8d8a\u591a\uff1a\u5230\u5e95\u8be5\u7528\u54ea\u4e2a\uff1f\u672c\u6587\u5c06\u4ece\u8bbe\u8ba1\u7406\u5ff5\u3001\u4f7f\u7528\u4f53\u9a8c\u3001\u6027\u80fd\u3001\u751f\u6001\u7b49\u7ef4\u5ea6\uff0c\u5bf9\u4e09\u5927\u4e3b\u6d41\u65b9\u6848\u8fdb\u884c\u6df1\u5ea6\u5bf9\u6bd4\uff0c\u5e76\u7ed9\u51fa\u9009\u578b\u5efa\u8bae\u3002<\/p>\n

1. \u80cc\u666f\u4e0e\u95ee\u9898<\/h2>\n

\u5047\u8bbe\u6211\u4eec\u8981\u5f00\u53d1\u4e00\u4e2a\u4e2d\u7b49\u590d\u6742\u5ea6\u7684\u7535\u5546\u5e94\u7528\uff0c\u9700\u8981\u7ba1\u7406\u7528\u6237\u4fe1\u606f\u3001\u8d2d\u7269\u8f66\u3001\u5546\u54c1\u5217\u8868\u7b49\u72b6\u6001\u3002\u5982\u679c\u7528\u4f20\u7edf\u7684 useState + props \u5c42\u5c42\u4f20\u9012\uff0c\u7ec4\u4ef6\u6811\u4f1a\u53d8\u5f97\u81c3\u80bf\u4e0d\u582a\uff1b\u800c\u5f15\u5165\u72b6\u6001\u7ba1\u7406\u5e93\uff0c\u53c8\u62c5\u5fc3\u8fc7\u5ea6\u8bbe\u8ba1\u3002\u8fd9\u6b63\u662f\u672c\u6587\u8981\u89e3\u51b3\u7684\u95ee\u9898\uff1a\u5982\u4f55\u6839\u636e\u9879\u76ee\u89c4\u6a21\u3001\u56e2\u961f\u4e60\u60ef\u3001\u6027\u80fd\u8981\u6c42\uff0c\u9009\u62e9\u6700\u5408\u9002\u7684\u72b6\u6001\u7ba1\u7406\u65b9\u6848\u3002<\/p>\n

2. \u4e09\u5927\u65b9\u6848\u7b80\u4ecb<\/h2>\n

2.1 Redux\uff1a\u7ecf\u5178\u4e2d\u7684\u7ecf\u5178<\/h3>\n

Redux \u57fa\u4e8e Flux \u67b6\u6784\uff0c\u5f3a\u8c03\u5355\u4e00\u6570\u636e\u6e90\u3001\u72b6\u6001\u53ea\u8bfb\u3001\u4f7f\u7528\u7eaf\u51fd\u6570 reducer \u4fee\u6539\u72b6\u6001\u3002\u5b83\u7684\u6838\u5fc3\u6982\u5ff5\u5305\u62ec store\u3001action\u3001reducer\u3001dispatch\u3002\u914d\u5408 Redux Toolkit\uff08RTK\uff09\uff0c\u5f00\u53d1\u4f53\u9a8c\u5df2\u5927\u5e45\u63d0\u5347\u3002<\/p>\n

2.2 Zustand\uff1a\u6781\u7b80\u4e3b\u4e49\u7684\u65b0\u9510<\/h3>\n

Zustand \u662f\u4e00\u4e2a\u8f7b\u91cf\u7ea7\u72b6\u6001\u7ba1\u7406\u5e93\uff0cAPI \u6781\u5176\u7b80\u6d01\u3002\u5b83\u5229\u7528 React hooks \u7684\u7279\u6027\uff0c\u65e0\u9700 Provider \u5305\u88f9\uff0c\u76f4\u63a5\u901a\u8fc7 create<\/code> \u51fd\u6570\u521b\u5efa store\uff0c\u5728\u7ec4\u4ef6\u4e2d\u901a\u8fc7 useStore<\/code> \u65b9\u6cd5\u83b7\u53d6\u72b6\u6001\u548c\u64cd\u4f5c\u3002<\/p>\n

2.3 Jotai\uff1a\u539f\u5b50\u5316\u72b6\u6001\u7ba1\u7406<\/h3>\n

Jotai \u91c7\u7528\u539f\u5b50\u6a21\u578b\uff0c\u5c06\u72b6\u6001\u62c6\u5206\u4e3a\u4e00\u4e2a\u4e2a\u72ec\u7acb\u7684 atom\uff0c\u901a\u8fc7\u7ec4\u5408 atom \u6784\u5efa\u590d\u6742\u72b6\u6001\u3002\u5b83\u540c\u6837\u57fa\u4e8e hooks\uff0c\u4f46\u66f4\u5f3a\u8c03\u72b6\u6001\u7684\u7ec6\u7c92\u5ea6\u8ba2\u9605\uff0c\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u91cd\u6e32\u67d3\u3002<\/p>\n

3. \u5b9e\u6218\u5bf9\u6bd4\uff1a\u5b9e\u73b0\u540c\u6837\u7684\u529f\u80fd<\/h2>\n

\u6211\u4eec\u4ee5\u5b9e\u73b0\u4e00\u4e2a\u8d2d\u7269\u8f66\u529f\u80fd\u4e3a\u4f8b\uff0c\u5bf9\u6bd4\u4e09\u79cd\u65b9\u6848\u7684\u4ee3\u7801\u5dee\u5f02\u3002<\/p>\n

3.1 Redux \u5b9e\u73b0\uff08\u4f7f\u7528 Redux Toolkit\uff09<\/h3>\n

\u9996\u5148\u5b89\u88c5\u4f9d\u8d56\uff1a<\/p>\n

\nnpm install @reduxjs\/toolkit react-redux\n<\/code><\/pre>\n
\u521b\u5efa store\uff1a<\/p>\n
\n\/\/ store\/cartSlice.js\nimport { createSlice } from '@reduxjs\/toolkit';\n\nconst cartSlice = createSlice({\n  name: 'cart',\n  initialState: { items: [], total: 0 },\n  reducers: {\n    addItem: (state, action) => {\n      state.items.push(action.payload);\n      state.total += action.payload.price;\n    },\n    removeItem: (state, action) => {\n      state.items = state.items.filter(item => item.id !== action.payload.id);\n      state.total -= action.payload.price;\n    }\n  }\n});\n\nexport const { addItem, removeItem } = cartSlice.actions;\nexport default cartSlice.reducer;\n<\/code><\/pre>\n
\u914d\u7f6e store\uff1a<\/p>\n
\n\/\/ store\/index.js\nimport { configureStore } from '@reduxjs\/toolkit';\nimport cartReducer from '.\/cartSlice';\n\nexport const store = configureStore({\n  reducer: {\n    cart: cartReducer\n  }\n});\n<\/code><\/pre>\n
\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528\uff1a<\/p>\n
\n\/\/ Cart.jsx\nimport { useSelector, useDispatch } from 'react-redux';\nimport { addItem, removeItem } from '.\/store\/cartSlice';\n\nfunction Cart() {\n  const cart = useSelector(state => state.cart);\n  const dispatch = useDispatch();\n  \n  return (\n    <div>\n      <h3>\u8d2d\u7269\u8f66<\/h3>\n      <ul>\n        {cart.items.map(item => (\n          <li key={item.id}>\n            {item.name} - ${item.price}\n            <button onClick={() => dispatch(removeItem(item))}>\u5220\u9664<\/button>\n          <\/li>\n        ))}\n      <\/ul>\n      <p>\u603b\u4ef7: ${cart.total}<\/p>\n      <button onClick={() => dispatch(addItem({ id: 1, name: '\u5546\u54c1', price: 10 }))}>\u6dfb\u52a0<\/button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
3.2 Zustand \u5b9e\u73b0<\/h3>\n
\u5b89\u88c5\uff1a<\/p>\n
\nnpm install zustand\n<\/code><\/pre>\n
\u521b\u5efa store\uff1a<\/p>\n
\n\/\/ store\/cartStore.js\nimport { create } from 'zustand';\n\nconst useCartStore = create((set) => ({\n  items: [],\n  total: 0,\n  addItem: (item) => set((state) => ({ \n    items: [...state.items, item], \n    total: state.total + item.price \n  })),\n  removeItem: (item) => set((state) => ({\n    items: state.items.filter(i => i.id !== item.id),\n    total: state.total - item.price\n  })),\n}));\n\nexport default useCartStore;\n<\/code><\/pre>\n
\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528\uff1a<\/p>\n
\n\/\/ Cart.jsx\nimport useCartStore from '.\/store\/cartStore';\n\nfunction Cart() {\n  const items = useCartStore(state => state.items);\n  const total = useCartStore(state => state.total);\n  const addItem = useCartStore(state => state.addItem);\n  const removeItem = useCartStore(state => state.removeItem);\n  \n  return (\n    <div>\n      <h3>\u8d2d\u7269\u8f66<\/h3>\n      <ul>\n        {items.map(item => (\n          <li key={item.id}>\n            {item.name} - ${item.price}\n            <button onClick={() => removeItem(item)}>\u5220\u9664<\/button>\n          <\/li>\n        ))}\n      <\/ul>\n      <p>\u603b\u4ef7: ${total}<\/p>\n      <button onClick={() => addItem({ id: 1, name: '\u5546\u54c1', price: 10 })}>\u6dfb\u52a0<\/button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
3.3 Jotai \u5b9e\u73b0<\/h3>\n
\u5b89\u88c5\uff1a<\/p>\n
\nnpm install jotai\n<\/code><\/pre>\n
\u521b\u5efa atom\uff1a<\/p>\n
\n\/\/ store\/cartAtoms.js\nimport { atom } from 'jotai';\n\nexport const itemsAtom = atom([]);\nexport const totalAtom = atom(0);\n\n\/\/ \u6d3e\u751f atom\uff1a\u6839\u636e items \u8ba1\u7b97\u603b\u4ef7\nexport const totalPriceAtom = atom((get) => \n  get(itemsAtom).reduce((sum, item) => sum + item.price, 0)\n);\n<\/code><\/pre>\n
\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528\uff1a<\/p>\n
\n\/\/ Cart.jsx\nimport { useAtom } from 'jotai';\nimport { itemsAtom, totalPriceAtom } from '.\/store\/cartAtoms';\n\nfunction Cart() {\n  const [items, setItems] = useAtom(itemsAtom);\n  const [total] = useAtom(totalPriceAtom);\n  \n  const addItem = (item) => setItems([...items, item]);\n  const removeItem = (item) => setItems(items.filter(i => i.id !== item.id));\n  \n  return (\n    <div>\n      <h3>\u8d2d\u7269\u8f66<\/h3>\n      <ul>\n        {items.map(item => (\n          <li key={item.id}>\n            {item.name} - ${item.price}\n            <button onClick={() => removeItem(item)}>\u5220\u9664<\/button>\n          <\/li>\n        ))}\n      <\/ul>\n      <p>\u603b\u4ef7: ${total}<\/p>\n      <button onClick={() => addItem({ id: 1, name: '\u5546\u54c1', price: 10 })}>\u6dfb\u52a0<\/button>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
4. \u6df1\u5165\u5bf9\u6bd4<\/h2>\n
4.1 \u5b66\u4e60\u66f2\u7ebf<\/h3>\n