{"id":38656,"date":"2023-11-16T10:16:35","date_gmt":"2023-10-11T11:54:17","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%8f%aa%e6%83%b3%e6%91%86%e8%84%b1%e5%af%b9usestate%e5%92%8cuseeffect%e7%9a%84%e4%be%9d%e8%b5%96%e3%80%82\/"},"modified":"2024-05-04T09:20:01","modified_gmt":"2024-05-04T01:20:01","slug":"%e6%88%91%e5%8f%aa%e6%83%b3%e6%91%86%e8%84%b1%e5%af%b9usestate%e5%92%8cuseeffect%e7%9a%84%e4%be%9d%e8%b5%96%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%8f%aa%e6%83%b3%e6%91%86%e8%84%b1%e5%af%b9usestate%e5%92%8cuseeffect%e7%9a%84%e4%be%9d%e8%b5%96%e3%80%82\/","title":{"rendered":"\u6211\u53ea\u60f3\u6446\u8131\u5bf9useState\u548cuseEffect\u7684\u4f9d\u8d56"},"content":{"rendered":"

React\u7684\u6587\u6863\u5206\u4e3a\u65e7\u7248\u672c\u548c\u65b0\u7248\u672c\u3002<\/h2>\n

\u6211\u662f\u5728\u5927\u7ea62019\u5e74\u5f00\u59cb\u63a5\u89e6React\u7684\uff0c\u6700\u8fd1\u6211\u53c8\u5f00\u59cb\u4f7f\u7528\u5b83\uff0c\u53d1\u73b0\u6587\u6863\u5df2\u7ecf\u66f4\u65b0\u4e86\u3002<\/p>\n

 <\/p>\n

\u6709\u65e5\u6587\u7248\u672c\uff08\u4e3b\u8981\u90e8\u5206\u5df2\u7ecf\u7ffb\u8bd1\uff0c\u4f46\u5e76\u975e\u5168\u90e8\uff0c\u5982\u679c\u4e0d\u660e\u767d\u7684\u8bdd\uff0c\u6700\u597d\u540c\u65f6\u4f7f\u7528\u539f\u6587\uff09\u3002<\/p>\n

 <\/p>\n

\u7531\u4e8e\u6211\u5bf9\u6700\u8fd1\u7684\u524d\u7aef\u60c5\u51b5\u4e0d\u592a\u4e86\u89e3\uff0c\u6240\u4ee5\u5982\u679c\u6709\u4efb\u4f55\u9519\u8bef\uff0c\u8bf7\u544a\u8bc9\u6211\uff0c\u8c22\u8c22\u3002<\/p>\n

\u5173\u4e8eReact<\/h2>\n

React\u662f\u7531Meta\u516c\u53f8\u5f00\u53d1\u7684\u524d\u7aef\u5e93\uff0c\u901a\u8fc7\u79f0\u4e3a”\u7ec4\u4ef6”\u7684\u5355\u5143\u6765\u7ba1\u7406UI\u3001\u5c4f\u5e55\u663e\u793a\u548c\u6570\u636e\u63a7\u5236\u3002<\/p>\n

React\u8fd8\u63d0\u4f9b\u4e86\u4e00\u79cd\u79f0\u4e3aHooks\u7684\u72ec\u7279\u529f\u80fd\uff0c\u901a\u8fc7\u5b83\u53ef\u4ee5\u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u5404\u79cd\u529f\u80fd\u3002<\/p>\n

\u4f7f\u7528useState\u6765\u4fdd\u6301\u6570\u636e<\/h2>\n

\u7528\u6237\u8fdb\u884c\u7684\u884c\u52a8\uff08\u4f8b\u5982\u8868\u5355\u8f93\u5165\uff09\u4ee5\u53ca\u65f6\u95f4\u53d8\u5316\u7b49\u9700\u8981\u4fdd\u7559\u548c\u66f4\u65b0\u8fd9\u4e9b\u6570\u636e\uff0c\u624d\u80fd\u5b9e\u73b0\u52a8\u6001\u7f51\u7ad9\u3002\u7136\u800c\uff0c\u4ec5\u4ec5\u50cf\u666e\u901a\u7684\u4ee3\u7801\u4e00\u6837\u7684\u7f16\u5199\u65b9\u5f0f\u65e0\u6cd5\u5b9e\u73b0\u5bf9\u8fd9\u4e9b\u6570\u636e\u7684\u4fdd\u7559\u3002<\/p>\n

\u8ba9\u6211\u4eec\u8003\u8651\u4e00\u4e2a\u6bcf\u6b21\u6309\u4e0b\u6309\u94ae\u6570\u5b57\u5c31\u4f1a\u589e\u52a0\u7684\u8ba1\u6570\u5668\u3002<\/p>\n

export<\/span> default<\/span> function<\/span> Count<\/span>()<\/span> {<\/span>\r\n  let<\/span> count<\/span> =<\/span> 0<\/span>;<\/span>\r\n\r\n  function<\/span> handleClick<\/span>()<\/span> {<\/span>\r\n    count<\/span> =<\/span> count<\/span> +<\/span> 1<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleClick<\/span>}<\/span>><\/span>\r\n        {<\/span>count<\/span>}<\/span> times clicked!\r\n      <\/<\/span>button<\/span>><\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u53ea\u8981\u8bd5\u8bd5\u5728CodePen\u7b49\u5e73\u53f0\u4e0a\uff0c\u5c31\u53ef\u4ee5\u660e\u767d\u8fd9\u6bb5\u4ee3\u7801\u4e2d\u7684\u6309\u94ae\u663e\u793a\u6b21\u6570\u4e0d\u4f1a\u66f4\u65b0\uff01\u8fd9\u662f\u56e0\u4e3a\u7ec4\u4ef6\u5185\u7684\u5c40\u90e8\u53d8\u91cf\u5728\u6e32\u67d3\u4e4b\u95f4\uff08\u5373\u5f53\u524d\u6e32\u67d3\u548c\u4e0b\u4e00\u6b21\u6e32\u67d3\u4e4b\u95f4\uff09\u4e0d\u4f1a\u4fdd\u5b58\u6570\u636e\u3002\u5728\u6b64\u793a\u4f8b\u4e2d\uff0c\u6bcf\u6b21\u70b9\u51fb\u6309\u94ae\u65f6\u90fd\u4f1a\u6267\u884chandleClick()\u51fd\u6570\uff0c\u4f46\u7531\u4e8e\u5c40\u90e8\u53d8\u91cf\u7684\u503c\u4e0d\u5728\u6e32\u67d3\u4e4b\u95f4\u4fdd\u5b58\uff0c\u6240\u4ee5\u6e32\u67d3\u4e4b\u95f4\u6ca1\u6709\u5dee\u5f02\u3002React\u91cd\u65b0\u6e32\u67d3\u662f\u5728\u6e32\u67d3\u4e4b\u95f4\u4ea7\u751f\u5dee\u5f02\u65f6\u6267\u884c\u7684\uff0c\u56e0\u6b64\u5728\u8fd9\u91cc\uff0c\u5bf9\u5185\u90e8\u5c40\u90e8\u53d8\u91cf\u7684\u66f4\u6539\u4e0d\u4f1a\u6210\u4e3a\u6e32\u67d3\u4e4b\u95f4\u7684\u5dee\u5f02\uff0c\u4e0d\u4f1a\u89e6\u53d1\u6e32\u67d3\u3002<\/p>\n
\u5728React\u4e2d\uff0cuseState\u63d0\u4f9b\u4e86\u4e00\u79cd\u8ba9\u7ec4\u4ef6\u5728\u6e32\u67d3\u4e4b\u95f4\u4fdd\u6301”\u8bb0\u5fc6”\u7684\u529f\u80fd\u3002<\/p>\n
import<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\n\r\nexport<\/span> default<\/span> function<\/span> Count<\/span>()<\/span> {<\/span>\r\n  const<\/span> [<\/span>count<\/span>,<\/span> setCount<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>0<\/span>);<\/span>\r\n\r\n  function<\/span> handleClick<\/span>()<\/span> {<\/span>\r\n    setCount<\/span>(<\/span>count<\/span> +<\/span> 1<\/span>);<\/span>\r\n  }<\/span>\r\n\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>handleClick<\/span>}<\/span>><\/span>\r\n        {<\/span>count<\/span>}<\/span> times clicked!\r\n      <\/<\/span>button<\/span>><\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u6211\u8ba4\u4e3a\u8fd9\u4e2a\u5728\u4e2d\u6587\u4e2d\u7684\u539f\u751f\u89e3\u91ca\u5982\u4e0b\uff1a\u8fd9\u6bb5\u4ee3\u7801\u6309\u7167`const [a, b] = useState(initialValue)` \u7684\u8bed\u6cd5\u53ef\u4ee5\u4f7f\u7528\uff0c\u4f46\u901a\u5e38\u66f4\u503e\u5411\u4e8e\u4f7f\u7528`[value, setValue]`\u8fd9\u6837\u7684\u5199\u6cd5\uff0c\u5176\u4e2d0\u53f7\u5143\u7d20\u7528\u4e8e\u4fdd\u5b58\u6570\u636e\uff0c\u800c1\u53f7\u5143\u7d20\u7528\u4e8e\u54110\u53f7\u5143\u7d20\u5199\u5165\u6570\u636e\u3002\u901a\u8fc7\u8fd9\u79cd\u65b9\u5f0f\u53ef\u4ee5\u4ee5\u7279\u5b9a\u7684\u5f62\u5f0f\u4fdd\u5b58\u6570\u636e\u3002<\/p>\n
\u4f7f\u7528useState\u7684\u603b\u7ed3<\/h3>\n
    \n
  • \n
      \u30ec\u30f3\u30c0\u30fc\u9593\u3067\u5024\u3092\u4fdd\u6301\u3059\u308b\u306e\u306fuseState<\/ul>\n<\/li>\n<\/ul>\n
      \u5909\u6570\u540d\u306f[value, setValue]\u304c\u304a\u3059\u3059\u3081<\/p>\n
      \u4e0e\u76ee\u6807\u540c\u6b65\u7684useEffect<\/h2>\n
      \u526f\u4f5c\u7528\u7684\u95ee\u9898<\/h3>\n
      \u5728\u8ba8\u8bbauseEffect\u4e4b\u524d\uff0c\u6211\u60f3\u5148\u5728\u5907\u5fd8\u5f55\u4e2d\u63d0\u5230\u526f\u4f5c\u7528\u7684\u542b\u4e49\u3002
      \n“\u6ca1\u6709\u526f\u4f5c\u7528”\u7684\u51fd\u6570\u6307\u7684\u662f\u53ea\u6267\u884c\u7eaf\u7cb9\u8ba1\u7b97\u7684\u51fd\u6570\u3002\u8fd9\u610f\u5473\u7740\u65e0\u8bba\u591a\u5c11\u6b21\u8f93\u5165\u76f8\u540c\u7684\u503c\uff0c\u7ed3\u679c\u90fd\u662f\u4e00\u6837\u7684\u3002
      \n\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u5047\u8bbe\u6709\u4e00\u4e2a\u6c42\u6700\u5927\u516c\u7ea6\u6570\u7684\u51fd\u6570gcd(a, b)\u3002gcd(19, 57)\u65e0\u8bba\u88ab\u6267\u884c\u591a\u5c11\u6b21\uff0c\u90fd\u5e94\u8be5\u8fd4\u56de19\uff0c\u800c\u4e0d\u662f\u50cf\u67d0\u4e9b\u8457\u540d\u6570\u5b66\u5bb6\u4e3b\u5f20\u7684\u8fd4\u56de1\u3002
      \n\u8fd9\u6837\uff0c\u8f93\u5165\u548c\u8f93\u51fa\u59cb\u7ec8\u4fdd\u6301\u4e00\u81f4\u7684\u51fd\u6570\u88ab\u79f0\u4e3a”\u6ca1\u6709\u526f\u4f5c\u7528”\u7684\u51fd\u6570\u3002
      \n\u800c”\u6709\u526f\u4f5c\u7528”\u7684\u51fd\u6570\u5219\u6307\u7684\u662f\u5728\u6267\u884c\u65f6\u4f1a\u4f9d\u8d56\u4e8e\u73af\u5883\uff0c\u5bfc\u81f4\u7ed3\u679c\u4f1a\u53d8\u5316\u7684\u975e\u7eaf\u7cb9\u8ba1\u7b97\u3002\u8ba9\u6211\u4eec\u8003\u8651\u4ee5\u4e0b\u8fd9\u6837\u7684\u51fd\u6570\u3002<\/p>\n
      let<\/span> counter<\/span> =<\/span> 0<\/span>;<\/span>\r\n\r\nfunction<\/span> incrementCounter<\/span>()<\/span> {<\/span>\r\n    counter<\/span>++<\/span>;<\/span>\r\n}<\/span>\r\n\r\nincrementCounter<\/span>();<\/span> \/\/1<\/span>\r\nincrementCounter<\/span>();<\/span> \/\/2<\/span>\r\nincrementCounter<\/span>();<\/span> \/\/3<\/span>\r\n\/\/...<\/span>\r\n<\/code><\/pre>\n
      \u8fd9\u4e2aincrementCounter()\u51fd\u6570\u6bcf\u6b21\u6267\u884c\u65f6\u90fd\u4f1a\u5c06counter\u7684\u503c\u589e\u52a01\uff08\u9012\u589e\uff09\uff0c\u56e0\u6b64\u53ef\u4ee5\u6839\u636e\u7a0b\u5e8f\u5728\u6267\u884c\u65f6\u7684\u72b6\u6001\u6765\u786e\u5b9a\u8ba1\u7b97\u7ed3\u679c\u662f\u5426\u4f1a\u6539\u53d8\u3002\u6b63\u56e0\u4e3a\u5982\u6b64\uff0c\u6bcf\u6b21\u6267\u884c\u8ba1\u7b97\u65f6\u90fd\u4f1a\u5bfc\u81f4\u72b6\u6001\u7684\u53d8\u5316\uff0c\u56e0\u6b64\u65e0\u6cd5\u4fdd\u8bc1\u76f8\u540c\u7684\u7ed3\u679c\u3002\u8fd9\u79cd\u5177\u6709\u526f\u4f5c\u7528\u7684\u51fd\u6570\u88ab\u79f0\u4e3a”\u5177\u6709\u526f\u4f5c\u7528”\u7684\u51fd\u6570\u3002<\/p>\n
      \u5173\u4e8e\u6548\u679c\uff08Effect\uff09<\/h3>\n
      \u5728\u8fd9\u91cc\uff0cReact\u5f00\u53d1\u56e2\u961f\u5c06\u201c\u6307\u5b9a\u7531\u6e32\u67d3\u672c\u8eab\u800c\u975e\u7279\u5b9a\u4e8b\u4ef6\u5f15\u8d77\u7684\u526f\u4f5c\u7528\u201d\u7684\u79f0\u4e3a\u201cEffect\u201d\u3002\u8bf4\u5b9e\u8bdd\uff0c\u6211\u4e0d\u592a\u660e\u767d\u4ed6\u4eec\u5728\u8bf4\u4e9b\u4ec0\u4e48\u3002\u6e32\u67d3\u672c\u8eab\u5f15\u8d77\u7684\u526f\u4f5c\u7528\uff0c\u5373\u4e0eReact\u6e32\u67d3\u65e0\u5173\u7684\u4e0e\u5916\u90e8\u7cfb\u7edf\u7684\u4ea4\u4e92\u88ab\u79f0\u4e3aEffect\u2026\u2026\u5927\u6982\u662f\u8fd9\u6837\u5427\u3002React\u5e94\u8be5\u53ea\u7531\u6ca1\u6709\u526f\u4f5c\u7528\u7684\u8ba1\u7b97\u7ec4\u6210\uff0c\u5bf9\u4e8eprops\u548cstate\u5e94\u59cb\u7ec8\u4f7f\u7528\u7eaf\u8ba1\u7b97\uff0c\u800c\u4e0d\u662f\u975eReact\u7684\u5c0f\u90e8\u4ef6\uff08\u5982\u5730\u56fe\u7b49\uff09\u548c\u4e0e\u804a\u5929\u5ba4\u7684\u8fde\u63a5\u4e4b\u7c7b\u7684\u8ba1\u7b97\u3002\u8fd9\u79cd\u526f\u4f5c\u7528\u5373\u4f7f\u5b58\u5728\uff0c\u4e5f\u4e0d\u662f\u7531\u7279\u5b9a\u7528\u6237\u4e8b\u4ef6\u5f15\u8d77\u7684\uff0c\u88ab\u79f0\u4e3aEffect\uff0c\u8fd9\u4e9b\u526f\u4f5c\u7528\u5728\u5c4f\u5e55\u66f4\u65b0\u540e\uff0c\u5728\u63d0\u4ea4\u7684\u6700\u540e\u6267\u884c\u3002\u800c\u63d0\u4f9b\u8fd9\u79cd\u529f\u80fd\u7684\u662fuseEffect\u8fd9\u4e2aHook\u3002<\/p>\n
      \u6211\u4eec\u6765\u770b\u4e00\u4e9b\u5177\u4f53\u7684\u4f8b\u5b50\u5427\u3002\u8fd9\u91cc\u6211\u4eec\u4f7f\u7528\u5b98\u65b9\u7684\u6837\u672c\u3002<\/p>\n
      import<\/span> {<\/span> useState<\/span>,<\/span> useEffect<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> createConnection<\/span> }<\/span> from<\/span> '<\/span>.\/chat.js<\/span>'<\/span>;<\/span>\r\n\r\nfunction<\/span> ChatRoom<\/span>({<\/span> roomId<\/span> })<\/span> {<\/span>\r\n  const<\/span> [<\/span>serverUrl<\/span>,<\/span> setServerUrl<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>'<\/span>https:\/\/localhost:1234<\/span>'<\/span>);<\/span>\r\n\r\n  useEffect<\/span>(()<\/span> =><\/span> {<\/span>\r\n    const<\/span> connection<\/span> =<\/span> createConnection<\/span>(<\/span>serverUrl<\/span>,<\/span> roomId<\/span>);<\/span>\r\n    connection<\/span>.<\/span>connect<\/span>();<\/span>\r\n    return <\/span>()<\/span> =><\/span> {<\/span>\r\n      connection<\/span>.<\/span>disconnect<\/span>();<\/span>\r\n    };<\/span>\r\n  },<\/span> [<\/span>roomId<\/span>,<\/span> serverUrl<\/span>]);<\/span>\r\n\r\n  return <\/span>(<\/span>\r\n    <><\/span>\r\n      <<\/span>label<\/span>><\/span>\r\n        Server URL:{<\/span>'<\/span> '<\/span>}<\/span>\r\n        <<\/span>input<\/span>\r\n          value<\/span>=<\/span>{<\/span>serverUrl<\/span>}<\/span>\r\n          onChange<\/span>=<\/span>{<\/span>e<\/span> =><\/span> setServerUrl<\/span>(<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>}<\/span>\r\n        \/><\/span>\r\n      <\/<\/span>label<\/span>><\/span>\r\n      <<\/span>h1<\/span>><\/span>Welcome to the {<\/span>roomId<\/span>}<\/span> room!<\/<\/span>h1<\/span>><\/span>\r\n    <\/><\/span>\r\n  );<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
      App.jsx
      \n\u4ece’react’\u5bfc\u5165{ useState\uff0cuseEffect };
      \n\u4ece’.\/chat.js’\u5bfc\u5165{ createConnection };function ChatRoom({ roomId }) {
      \nconst [serverUrl\uff0csetServerUrl] = useState(‘https:\/\/localhost:1234’);<\/p>\n
      useEffect(() => {
      \nconst connection = createConnection(serverUrl\uff0croomId);
      \nconnection.connect();
      \nreturn () => {
      \nconnection.disconnect();
      \n};
      \n}, [roomId\uff0c serverUrl]);<\/p>\n
      return (
      \n<>
      \n
      \u6b22\u8fce\u6765\u5230{roomId}\u5ba4\uff01<\/h1>\n
      <\/>
      \n);
      \n}
      \nexport default function App() {
      \nconst [roomId\uff0csetRoomId] = useState(‘general’);
      \nconst [show\uff0csetShow] = useState(false);
      \nreturn (
      \n<>
      \n