{"id":454,"date":"2026-06-17T11:36:22","date_gmt":"2026-06-17T03:36:22","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=454"},"modified":"2026-06-17T11:36:22","modified_gmt":"2026-06-17T03:36:22","slug":"react-hook-%e4%b8%ba%e4%bb%80%e4%b9%88%e4%b8%8d%e8%83%bd%e5%86%99%e5%9c%a8%e5%be%aa%e7%8e%af%e3%80%81%e6%9d%a1%e4%bb%b6%e5%88%a4%e6%96%ad%e3%80%81%e5%b5%8c%e5%a5%97%e5%87%bd%e6%95%b0%e9%87%8c","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2026\/06\/17\/react-hook-%e4%b8%ba%e4%bb%80%e4%b9%88%e4%b8%8d%e8%83%bd%e5%86%99%e5%9c%a8%e5%be%aa%e7%8e%af%e3%80%81%e6%9d%a1%e4%bb%b6%e5%88%a4%e6%96%ad%e3%80%81%e5%b5%8c%e5%a5%97%e5%87%bd%e6%95%b0%e9%87%8c\/","title":{"rendered":"React Hook \u4e3a\u4ec0\u4e48\u4e0d\u80fd\u5199\u5728\u5faa\u73af\u3001\u6761\u4ef6\u5224\u65ad\u3001\u5d4c\u5957\u51fd\u6570\u91cc"},"content":{"rendered":"\n

React \u9760 \u8c03\u7528\u987a\u5e8f<\/strong> \u5339\u914d Hook \u72b6\u6001\uff0c\u987a\u5e8f\u4e71\u4e86\uff0c\u72b6\u6001\u5c31\u4f1a\u9519\u4e71\u3001\u7ed1\u5b9a\u9519\u4f4d\u3002<\/p>\n\n\n\n

\u6838\u5fc3\u539f\u7406\uff1aHook \u4f9d\u9760\u300c\u8c03\u7528\u987a\u5e8f\u300d\u5b58\u53d6\u72b6\u6001<\/h2>\n\n\n\n

1. React \u5185\u90e8\u5b58\u50a8\u673a\u5236<\/h3>\n\n\n\n

\u6bcf\u4e2a\u51fd\u6570\u7ec4\u4ef6\uff0cReact \u4f1a\u7ef4\u62a4\u4e00\u4e2a\u7ebf\u6027\u94fe\u8868 \/ \u6570\u7ec4<\/strong>\uff0c\u4e13\u95e8\u5b58\u653e\u5f53\u524d\u7ec4\u4ef6\u6240\u6709 Hook \u7684\u72b6\u6001\uff08useState<\/code>\/useEffect<\/code>\/useRef<\/code> \u7b49\uff09\u3002<\/p>\n\n\n\n

\u6267\u884c\u903b\u8f91\uff1a<\/p>\n\n\n\n

    \n
  1. \u7ec4\u4ef6\u9996\u6b21\u6e32\u67d3<\/strong>\uff1a\u4ece\u4e0a\u5230\u4e0b\u4f9d\u6b21\u6267\u884c Hook\uff0c\u6309\u987a\u5e8f<\/strong>\u628a\u72b6\u6001\u5b58\u5165\u6570\u7ec4\uff1b<\/li>\n\n\n\n
  2. \u7ec4\u4ef6\u66f4\u65b0\u91cd\u6e32\u67d3<\/strong>\uff1a\u518d\u6b21\u4ece\u4e0a\u5230\u4e0b\u6267\u884c Hook\uff0c\u6309\u5b8c\u5168\u76f8\u540c\u7684\u987a\u5e8f<\/strong>\u4ece\u6570\u7ec4\u91cc\u53d6\u51fa\u5bf9\u5e94\u72b6\u6001\u3002<\/li>\n<\/ol>\n\n\n\n

    \u5173\u952e\uff1aHook \u7684\u4f4d\u7f6e = \u72b6\u6001\u7684\u7d22\u5f15<\/strong>\uff0c\u987a\u5e8f\u4e00\u65e6\u6539\u53d8\uff0c\u7d22\u5f15\u5c31\u9519\u4f4d\u3002<\/p>\n\n\n\n

    2. \u4e3e\u4e2a\u6781\u7b80\u6a21\u578b<\/h3>\n\n\n\n

    \u6a21\u62df React \u5185\u90e8 Hook \u5b58\u50a8\u6570\u7ec4 hookStates = []<\/code>\uff0c\u7528\u7d22\u5f15\u5339\u914d\uff1a<\/p>\n\n\n\n

    function Demo() {\n  \/\/ \u7b2c 1 \u4e2a Hook \u2192 \u7d22\u5f15 0\n  const [count, setCount] = useState(0);\n  \/\/ \u7b2c 2 \u4e2a Hook \u2192 \u7d22\u5f15 1\n  const [name, setName] = useState('');\n\n  return <div \/>;\n}<\/code><\/pre>\n\n\n\n
      \n
    • \u9996\u6b21\u6e32\u67d3\uff1ahookStates[0] = 0<\/code>\uff0chookStates[1] = ''<\/code><\/li>\n\n\n\n
    • \u6bcf\u6b21\u91cd\u6e32\u67d3\uff1a\u6c38\u8fdc\u5148\u53d6\u7d22\u5f15 0\uff0c\u518d\u53d6\u7d22\u5f15 1\uff0c\u72b6\u6001\u5b8c\u5168\u5339\u914d\u3002<\/li>\n<\/ul>\n\n\n\n
      \u4e8c\u3001\u4e3a\u4ec0\u4e48\u5faa\u73af \/ \u6761\u4ef6\u91cc\u7528 Hook \u4f1a\u5d29\uff1f<\/h2>\n\n\n\n
      \u6848\u4f8b 1\uff1aHook \u5199\u5728 for<\/code> \u5faa\u73af\u91cc<\/h3>\n\n\n\n
      function List({ list }) {\n  const elements = [];\n\n  \/\/ \u904d\u5386\u6570\u7ec4\uff0c\u5faa\u73af\u5185\u90e8\u8c03\u7528 useState\n  for (let i = 0; i < list.length; i++) {\n    \/\/ \u95ee\u9898\uff1a\u5217\u8868\u957f\u5ea6\u53d8\u5316 \u2192 Hook \u6267\u884c\u6570\u91cf\/\u987a\u5e8f\u53d8\u5316\n    const [num, setNum] = useState(i);\n    elements.push(<div key={i}>{num}<\/div>);\n  }\n\n  return <>{elements}<\/>;\n}<\/code><\/pre>\n\n\n\n
      \u95ee\u9898\u63a8\u6f14\uff1a<\/h4>\n\n\n\n
        \n
      1. \u521d\u59cb list.length = 2<\/code>\uff1a\u6267\u884c 2 \u6b21 useState<\/strong>\uff0c\u5185\u90e8\u6570\u7ec4\u5b58 2 \u4e2a\u72b6\u6001\uff1b<\/li>\n\n\n\n
      2. \u540e\u7eed list.length<\/code> \u53d8\u6210 1\uff1a\u53ea\u6267\u884c 1 \u6b21 useState<\/strong>\uff1b<\/li>\n\n\n\n
      3. \u91cd\u6e32\u67d3\u65f6\uff1a \u4e0a\u6b21 2 \u4e2a Hook\uff0c\u8fd9\u6b21\u53ea\u6267\u884c 1 \u4e2a\uff0c\u7d22\u5f15\u5bf9\u5e94\u5173\u7cfb\u5f7b\u5e95\u9519\u4e71<\/strong>\uff0c\u72b6\u6001\u8bfb\u53d6\u9519\u8bef\u3001\u7ec4\u4ef6\u5f02\u5e38\u3001\u751a\u81f3\u62a5\u9519\u3002<\/li>\n<\/ol>\n\n\n\n
        \u6848\u4f8b 2\uff1aHook \u5199\u5728 if \u6761\u4ef6\u91cc\uff08\u5206\u652f\u5bfc\u81f4\u6570\u91cf\u53d8\u5316 \uff09<\/h3>\n\n\n\n
        function Demo({ isShow }) {\n  if (isShow) {\n    \/\/ \u6761\u4ef6\u6210\u7acb\u624d\u6267\u884c Hook\n    const [val, setVal] = useState(1); \n  }\n  const [count] = useState(0);\n  return <div \/>;\n}<\/code><\/pre>\n\n\n\n
        \u95ee\u9898\u63a8\u6f14\uff1a<\/h4>\n\n\n\n
          \n
        1. isShow = true<\/code>\uff1a\u6267\u884c\u987a\u5e8f useState(1)<\/code> \u2192 useState(0)<\/code>\uff082 \u4e2a Hook\uff09<\/li>\n\n\n\n
        2. isShow = false<\/code>\uff1a\u8df3\u8fc7\u7b2c\u4e00\u4e2a\uff0c\u53ea\u6267\u884c useState(0)<\/code>\uff081 \u4e2a Hook\uff09<\/li>\n\n\n\n
        3. \u5207\u6362 isShow<\/code> \u540e\uff0cHook \u6570\u91cf\u3001\u987a\u5e8f\u6539\u53d8\uff0c\u72b6\u6001\u7d22\u5f15\u9519\u4f4d\uff0c\u76f4\u63a5\u89e6\u53d1\u5f02\u5e38\u3002<\/li>\n<\/ol>\n\n\n\n
          \u6848\u4f8b 3\uff1a\u5d4c\u5957\u51fd\u6570\u5185\u90e8\u8c03\u7528 Hook<\/h3>\n\n\n\n
          function Demo() {\n  function inner() {\n    \/\/ \u5d4c\u5957\u51fd\u6570\u91cc\u7528 Hook\n    const [a] = useState(1);\n  }\n  inner();\n  return <div \/>;\n}<\/code><\/pre>\n\n\n\n
          \u867d\u7136\u6ca1\u6709\u5faa\u73af \/ \u6761\u4ef6\uff0c\u4f46 React \u89c4\u5219\u540c\u6837\u7981\u6b62\uff1a\u6846\u67b6\u8bbe\u8ba1\u4e0a\u8981\u6c42 Hook \u5fc5\u987b\u5728\u7ec4\u4ef6\u9876\u5c42\u4f5c\u7528\u57df<\/strong>\uff0c\u5d4c\u5957\u8c03\u7528\u4f1a\u6253\u4e71\u6267\u884c\u94fe\u8def\uff0c\u540c\u65f6\u8fdd\u80cc\u8bbe\u8ba1\u89c4\u8303\u3002<\/p>\n\n\n\n
          \u4e09\u3001React Hook \u5b98\u65b9\u4e24\u6761\u786c\u6027\u89c4\u5219<\/h2>\n\n\n\n
            \n
          1. \u53ea\u5728\u51fd\u6570\u7ec4\u4ef6 \/ \u81ea\u5b9a\u4e49 Hook \u7684\u9876\u5c42\u8c03\u7528 Hook<\/strong> \u4e0d\u8981\u5728 if\/else<\/code>\u3001for\/while<\/code>\u3001\u5d4c\u5957\u51fd\u6570\u3001\u4e09\u5143\u8868\u8fbe\u5f0f\u5185\u90e8\u4f7f\u7528\u3002<\/li>\n\n\n\n
          2. \u53ea\u5728 React \u51fd\u6570\u4e2d\u8c03\u7528 Hook<\/strong> \u4e0d\u8981\u5728\u666e\u901a JS \u51fd\u6570\u3001\u7c7b\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u3002<\/li>\n<\/ol>\n\n\n\n
            \u56db\u3001\u5faa\u73af\u573a\u666f\u5982\u4f55\u66ff\u4ee3<\/h2>\n\n\n\n
            \u65b9\u6848\uff1a\u628a\u300c\u5faa\u73af\u5185\u5bb9\u62bd\u6210\u5b50\u7ec4\u4ef6<\/strong>\u300d<\/h3>\n\n\n\n
            \u8ba9\u6bcf\u4e2a\u5b50\u7ec4\u4ef6\u62e5\u6709\u81ea\u5df1\u72ec\u7acb\u7684 Hook \u72b6\u6001\uff0c\u4e92\u4e0d\u5e72\u6270\u3002<\/p>\n\n\n\n
            1. \u62c6\u5206\u5b50\u7ec4\u4ef6<\/h4>\n\n\n\n
            \/\/ \u5b50\u7ec4\u4ef6\uff1a\u6bcf\u4e2a Item \u72ec\u7acb\u4f7f\u7528 Hook\nfunction Item({ initNum }) {\n  const [num, setNum] = useState(initNum);\n  return (\n    <div>\n      {num}\n      <button onClick={() => setNum(num + 1)}>+<\/button>\n    <\/div>\n  );\n}\n\n\/\/ \u7236\u7ec4\u4ef6\uff1a\u53ea\u505a\u5faa\u73af\u6e32\u67d3\uff0c\u4e0d\u5199 Hook\nfunction List({ list }) {\n  return (\n    <>\n      {list.map((item, index) => (\n        <Item key={index} initNum={index} \/>\n      ))}\n    <\/>\n  );\n}<\/code><\/pre>\n\n\n\n
            \u539f\u7406\uff1a<\/p>\n\n\n\n