{"id":585,"date":"2023-09-26T21:14:47","date_gmt":"2023-09-26T13:14:47","guid":{"rendered":"https:\/\/www.escook.cn\/?p=585"},"modified":"2023-09-26T21:24:31","modified_gmt":"2023-09-26T13:24:31","slug":"react-hooks-usereducer-usecontext","status":"publish","type":"post","link":"https:\/\/www.escook.cn\/index.php\/2023\/09\/26\/react-hooks-usereducer-usecontext\/","title":{"rendered":"React Hooks – useReducer & useContext"},"content":{"rendered":"
\n

\u7248\u6743\u5f52\u4f5c\u8005 \u00a9\u5218\u9f99\u5bbe<\/strong> \u6240\u6709\uff0c\u672c\u6587\u7ae0\u672a\u7ecf\u4f5c\u8005\u5141\u8bb8\uff0c\u7981\u6b62\u79c1\u81ea\u8f6c\u8f7d\uff01<\/p>\n<\/blockquote>\n

1. useReducer<\/h2>\n

\u5f53\u72b6\u6001\u66f4\u65b0\u903b\u8f91\u8f83\u590d\u6742\u65f6\u53ef\u4ee5\u8003\u8651\u4f7f\u7528 useReducer\u3002useReducer \u53ef\u4ee5\u540c\u65f6\u66f4\u65b0\u591a\u4e2a\u72b6\u6001\uff0c\u800c\u4e14\u80fd\u628a\u5bf9\u72b6\u6001\u7684\u4fee\u6539\u4ece\u7ec4\u4ef6\u4e2d\u72ec\u7acb\u51fa\u6765\u3002<\/p>\n

\u76f8\u6bd4\u4e8e useState\uff0cuseReducer \u53ef\u4ee5\u66f4\u597d\u7684\u63cf\u8ff0\u201c\u5982\u4f55\u66f4\u65b0\u72b6\u6001\u201d\u3002\u4f8b\u5982\uff1a\u7ec4\u4ef6\u8d1f\u8d23\u53d1\u51fa\u884c\u4e3a\uff0cuseReducer \u8d1f\u8d23\u66f4\u65b0\u72b6\u6001\u3002<\/p>\n

\u597d\u5904\u662f\uff1a\u8ba9\u4ee3\u7801\u903b\u8f91\u66f4\u6e05\u6670\uff0c\u4ee3\u7801\u884c\u4e3a\u66f4\u6613\u9884\u6d4b\u3002<\/p>\n

1.1 useReducer \u7684\u8bed\u6cd5\u683c\u5f0f<\/h3>\n

useReducer \u7684\u57fa\u7840\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n

const [state, dispatch] = useReducer(reducer, initState, initAction?)<\/code><\/pre>\n
\u5176\u4e2d\uff1a<\/p>\n
    \n
  1. reducer<\/strong> \u662f\u4e00\u4e2a\u51fd\u6570\uff0c\u7c7b\u4f3c\u4e8e (prevState, action) => newState<\/code>\u3002\u5f62\u53c2 prevState<\/code> \u8868\u793a\u65e7\u72b6\u6001\uff0c\u5f62\u53c2 action<\/code> \u8868\u793a\u672c\u6b21\u7684\u884c\u4e3a\uff0c\u8fd4\u56de\u503c newState<\/code> \u8868\u793a\u5904\u7406\u5b8c\u6bd5\u540e\u7684\u65b0\u72b6\u6001\u3002<\/li>\n
  2. initState<\/strong> \u8868\u793a\u521d\u59cb\u72b6\u6001\uff0c\u4e5f\u5c31\u662f\u9ed8\u8ba4\u503c\u3002<\/li>\n
  3. initAction<\/strong> \u662f\u8fdb\u884c\u72b6\u6001\u521d\u59cb\u5316\u65f6\u5019\u7684\u5904\u7406\u51fd\u6570\uff0c\u5b83\u662f\u53ef\u9009\u7684\uff0c\u5982\u679c\u63d0\u4f9b\u4e86 initAction \u51fd\u6570\uff0c\u5219\u4f1a\u628a initState \u4f20\u9012\u7ed9 initAction \u51fd\u6570\u8fdb\u884c\u5904\u7406\uff0cinitAction \u7684\u8fd4\u56de\u503c\u4f1a\u88ab\u5f53\u505a\u521d\u59cb\u72b6\u6001\u3002<\/li>\n
  4. \u8fd4\u56de\u503c state \u662f\u72b6\u6001\u503c\u3002dispatch \u662f\u66f4\u65b0 state \u7684\u65b9\u6cd5\uff0c\u8ba9\u4ed6\u63a5\u6536 action \u4f5c\u4e3a\u53c2\u6570\uff0cuseReducer \u53ea\u9700\u8981\u8c03\u7528 dispatch(action)<\/code> \u65b9\u6cd5\u4f20\u5165\u7684 action \u5373\u53ef\u66f4\u65b0 state\u3002<\/li>\n<\/ol>\n
    1.2 useReducer \u7684\u57fa\u7840\u7528\u6cd5<\/h3>\n
    1. \u5b9a\u4e49\u7ec4\u4ef6\u7684\u57fa\u7840\u7ed3\u6784<\/h4>\n
      \n
    1. \n
      \u5b9a\u4e49\u540d\u4e3a Father<\/code> \u7684\u7236\u7ec4\u4ef6\u5982\u4e0b\uff1a<\/p>\n
      import React from 'react'\n\n\/\/ \u7236\u7ec4\u4ef6\nexport const Father: React.FC = () => {\n return (\n   <div>\n     <button>\u4fee\u6539 name \u7684\u503c<\/button>\n     <div className="father">\n       <Son1 \/>\n       <Son2 \/>\n     <\/div>\n   <\/div>\n )\n}<\/code><\/pre>\n<\/li>\n
    2. \n
      \u5b9a\u4e49\u540d\u4e3a Son1<\/code> \u548c Son2<\/code> \u7684\u4e24\u4e2a\u5b50\u7ec4\u4ef6\u5982\u4e0b\uff1a<\/p>\n
      \/\/ \u5b50\u7ec4\u4ef61\nconst Son1: React.FC = () => {\n return 
      <\/div>\n}\n\n\/\/ \u5b50\u7ec4\u4ef62\nconst Son2: React.FC = () => {\n return 
      <\/div>\n}<\/code><\/pre>\n<\/li>\n
    3. \n
      \u5728 index.css<\/code> \u4e2d\u6dfb\u52a0\u5bf9\u5e94\u7684\u6837\u5f0f\uff1a<\/p>\n
      .father {\n display: flex;\n justify-content: space-between;\n width: 100vw;\n}\n\n.son1 {\n background-color: orange;\n min-height: 300px;\n flex: 1;\n padding: 10px;\n}\n\n.son2 {\n background-color: lightblue;\n min-height: 300px;\n flex: 1;\n padding: 10px;\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n
      2. \u5b9a\u4e49 useReducer \u7684\u57fa\u7840\u7ed3\u6784<\/h4>\n
        \n
      1. \n
        \u6309\u9700\u5bfc\u5165 useReducer<\/code> \u51fd\u6570\uff1a<\/p>\n
        import React, { useReducer } from 'react'<\/code><\/pre>\n<\/li>\n
      2. \n
        \u5b9a\u4e49\u521d\u59cb\u6570\u636e<\/strong>\uff1a<\/p>\n
        const defaultState = { name: 'liulongbin', age: 16 }<\/code><\/pre>\n<\/li>\n
      3. \n
        \u5b9a\u4e49 reducer<\/code> \u51fd\u6570\uff0c\u5b83\u7684\u4f5c\u7528\u662f\uff1a\u6839\u636e\u65e7\u72b6\u6001\uff0c\u8fdb\u884c\u4e00\u7cfb\u5217\u5904\u7406\uff0c\u6700\u7ec8\u8fd4\u56de\u65b0\u72b6\u6001<\/strong>\uff1a<\/p>\n
        const reducer = (prevState) => {\n console.log('\u89e6\u53d1\u4e86 reducer \u51fd\u6570')\n return prevState\n}<\/code><\/pre>\n<\/li>\n
      4. \n
        \u5728 Father<\/code> \u7ec4\u4ef6\u4e2d\uff0c\u8c03\u7528 useReducer(reducerFn, \u521d\u59cb\u72b6\u6001)<\/code> \u51fd\u6570\uff0c\u5e76\u5f97\u5230 reducer \u8fd4\u56de\u7684\u72b6\u6001\uff1a<\/p>\n
        \/\/ \u7236\u7ec4\u4ef6\nexport const Father: React.FC = () => {\n \/\/ useReducer(fn, \u521d\u59cb\u6570\u636e, \u5bf9\u521d\u59cb\u6570\u636e\u8fdb\u884c\u5904\u7406\u7684fn)\n const [state] = useReducer(reducer, defaultState)\n console.log(state)\n\n return (\n   <div>\n     <button>\u4fee\u6539 name \u7684\u503c<\/button>\n     <div className="father">\n       <Son1 \/>\n       <Son2 \/>\n     <\/div>\n   <\/div>\n )\n}<\/code><\/pre>\n<\/li>\n
      5. \n
        \u4e3a reducer \u4e2d\u7684 initState \u6307\u5b9a\u6570\u636e\u7c7b\u578b\uff1a<\/p>\n
        \/\/ \u5b9a\u4e49\u72b6\u6001\u7684\u6570\u636e\u7c7b\u578b\ntype UserType = typeof defaultState\n\nconst defaultState = { name: 'liulongbin', age: 16 }\n\n\/\/ \u7ed9 initState \u6307\u5b9a\u7c7b\u578b\u4e3a UserType\nconst reducer = (prevState: UserType) => {\n console.log('\u89e6\u53d1\u4e86 reducer \u51fd\u6570')\n return prevState\n}<\/code><\/pre>\n
        \u63a5\u4e0b\u6765\uff0c\u5728 Father<\/code> \u7ec4\u4ef6\u4e2d\u4f7f\u7528 state \u65f6\uff0c\u5c31\u53ef\u4ee5\u51fa\u73b0\u7c7b\u578b\u7684\u667a\u80fd\u63d0\u793a\u5566\uff1a<\/p>\n
        \/\/ \u7236\u7ec4\u4ef6\nexport const Father: React.FC = () => {\n const [state] = useReducer(reducer, defaultState)\n console.log(state.name, state.age)\n\n return (\n   <div>\n     <button>\u4fee\u6539 name \u7684\u503c<\/button>\n     <div className="father">\n       <Son1 \/>\n       <Son2 \/>\n     <\/div>\n   <\/div>\n )\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n
        3. \u4f7f\u7528 initAction \u5904\u7406\u521d\u59cb\u6570\u636e<\/h4>\n
          \n
        1. \n
          \u5b9a\u4e49\u540d\u4e3a initAction<\/code> \u7684\u5904\u7406\u51fd\u6570\uff0c\u5982\u679c\u521d\u59cb\u6570\u636e\u4e2d\u7684 age \u4e3a\u5c0f\u6570\u3001\u8d1f\u6570\u3001\u6216 0 \u65f6\uff0c\u5bf9 age \u8fdb\u884c\u975e\u6cd5\u503c\u7684\u5904\u7406\uff1a<\/p>\n
          const initAction = (initState: UserType) => {\n \/\/ \u628a return \u7684\u5bf9\u8c61\uff0c\u4f5c\u4e3a useReducer \u7684\u521d\u59cb\u503c\n return { ...initState, age: Math.round(Math.abs(initState.age)) || 18 }\n}<\/code><\/pre>\n<\/li>\n
        2. \n
          \u5728 Father<\/code> \u7ec4\u4ef6\u4e2d\uff0c\u4f7f\u7528\u6b65\u9aa41\u58f0\u660e\u7684 initAction<\/code> \u51fd\u6570\u5982\u4e0b\uff1a<\/p>\n
          \/\/ \u7236\u7ec4\u4ef6\nexport const Father: React.FC = () => {\n \/\/ useReducer(fn, \u521d\u59cb\u6570\u636e, \u5bf9\u521d\u59cb\u6570\u636e\u8fdb\u884c\u5904\u7406\u7684fn)\n const [state] = useReducer(reducer, defaultState, initAction)\n\n \/\/ \u7701\u7565\u5176\u5b83\u4ee3\u7801...\n}<\/code><\/pre>\n
          \n
          \u53ef\u4ee5\u5728\u5b9a\u4e49 defaultState \u65f6\uff0c\u4e3a age \u63d0\u4f9b\u975e\u6cd5\u503c\uff0c\u53ef\u4ee5\u770b\u5230\u975e\u6cd5\u503c\u5728 initAction \u4e2d\u88ab\u5904\u7406\u6389\u4e86\u3002<\/p>\n<\/blockquote>\n<\/li>\n<\/ol>\n
          4. \u5728 Father \u7ec4\u4ef6\u4e2d\u70b9\u51fb\u6309\u94ae\u4fee\u6539 name \u7684\u503c<\/h4>\n
          4.1 \u9519\u8bef\u793a\u8303<\/h5>\n
          \/\/ \u7236\u7ec4\u4ef6\nexport const Father: React.FC = () => {\n  \/\/ useReducer(fn, \u521d\u59cb\u6570\u636e, \u5bf9\u521d\u59cb\u6570\u636e\u8fdb\u884c\u5904\u7406\u7684fn)\n  const [state] = useReducer(reducer, defaultState, initAction)\n  console.log(state)\n\n  const onChangeName = () => {\n    \/\/ \u6ce8\u610f\uff1a\u8fd9\u79cd\u7528\u6cd5\u662f\u9519\u8bef\u7684\uff0c\u56e0\u4e3a\u4e0d\u80fd\u76f4\u63a5\u4fee\u6539 state \u7684\u503c\n    \/\/ \u56e0\u4e3a\u5b58\u50a8\u5728 useReducer \u4e2d\u7684\u6570\u636e\u90fd\u662f\u201c\u4e0d\u53ef\u53d8\u201d\u7684\uff01\n    \/\/ \u8981\u60f3\u4fee\u6539 useReducer \u4e2d\u7684\u6570\u636e\uff0c\u5fc5\u987b\u89e6\u53d1 reducer \u51fd\u6570\u7684\u91cd\u65b0\u8ba1\u7b97\uff0c\n    \/\/ \u6839\u636e reducer \u5f62\u53c2\u4e2d\u7684\u65e7\u72b6\u6001\u5bf9\u8c61\uff08initState\uff09\uff0c\u7ecf\u8fc7\u4e00\u7cfb\u5217\u5904\u7406\uff0c\u8fd4\u56de\u4e00\u4e2a\u201c\u5168\u65b0\u7684\u201d\u72b6\u6001\u5bf9\u8c61\n    state.name = 'escook'\n  }\n\n  return (\n    <div>\n      <button onClick={onChangeName}>\u4fee\u6539 name \u7684\u503c<\/button>\n      <div className="father">\n        <Son1 \/>\n        <Son2 \/>\n      <\/div>\n    <\/div>\n  )\n}<\/code><\/pre>\n
          4.2 \u6b63\u786e\u7684\u64cd\u4f5c<\/h5>\n
            \n
          1. \n
            \u4e3a\u4e86\u80fd\u591f\u89e6\u53d1 reducer \u51fd\u6570\u7684\u91cd\u65b0\u6267\u884c\uff0c\u6211\u4eec\u9700\u8981\u5728\u8c03\u7528 useReducer()<\/code> \u540e\u63a5\u6536\u8fd4\u56de\u7684 dispatch<\/code> \u51fd\u6570\u3002\u793a\u4f8b\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
            \/\/ Father \u7236\u7ec4\u4ef6\nconst [state, dispatch] = useReducer(reducer, defaultState, initAction)<\/code><\/pre>\n<\/li>\n
          2. \n
            \u5728 button \u6309\u94ae\u7684\u70b9\u51fb\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4e2d\uff0c\u8c03\u7528 dispatch()<\/code> \u51fd\u6570\uff0c\u4ece\u800c\u89e6\u53d1 reducer \u51fd\u6570\u7684\u91cd\u65b0\u8ba1\u7b97\uff1a<\/p>\n
            \/\/ Father \u7236\u7ec4\u4ef6\nconst onChangeName = () => {\n dispatch()\n}<\/code><\/pre>\n<\/li>\n
          3. \n
            \u70b9\u51fb Father \u7ec4\u4ef6\u4e2d\u5982\u4e0b\u7684 button \u6309\u94ae\uff1a<\/p>\n