{"id":187350,"date":"2020-11-03T04:46:48","date_gmt":"2020-11-02T20:46:48","guid":{"rendered":"http:\/\/4563.org\/?p=187350"},"modified":"2020-11-03T04:46:48","modified_gmt":"2020-11-02T20:46:48","slug":"react-hook-%e7%9a%84%e4%b8%80%e4%b8%aa%e9%97%ae%e9%a2%98%ef%bc%8c-useeffect-%e5%86%85%e9%83%a8%ef%bc%8c%e4%b8%ba%e4%bb%80%e4%b9%88-%e5%8f%af%e4%bb%a5%e8%b0%83%e7%94%a8-setxxx-%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=187350","title":{"rendered":"react hook \u7684\u4e00\u4e2a\u95ee\u9898\uff0c useEffect \u5185\u90e8\uff0c\u4e3a\u4ec0\u4e48 \u53ef\u4ee5\u8c03\u7528 setxxx \u65b9\u6cd5\uff1f"},"content":{"rendered":"
\n
\n
\n

react hook \u7684\u4e00\u4e2a\u95ee\u9898\uff0c useEffect \u5185\u90e8\uff0c\u4e3a\u4ec0\u4e48 \u53ef\u4ee5\u8c03\u7528 setxxx \u65b9\u6cd5\uff1f <\/h1>\n

<\/p>\n

\n
\u8cc7\u6df1\u5927\u4f6c : yazoox <\/span> <\/i> 3<\/span> <\/div>\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n
<\/p>\n

\u6700\u8fd1\u5728\u5b66\u4e60 react hook \u7ecf\u5e38\u770b\u5230\u8fd9\u6837\u7684\u5199\u6cd5\uff1a<\/p>\n

import { getname } from \"...\";  my_component = (props) => {   const [name, setName] = useState(\"yazoox\");      clickme = () => {     const newname = getname();     setName(newname);   }      useEffect(() => {     \/\/ call API getname\uff0c\u6bcf\u6b21\u8c03\u7528\uff0c\u90fd\u4f1a\u968f\u673a\u62ff\u4e00\u4e2a\u540d\u5b57     const newname = getname();      setName(newname);      }, [name]);    return (     <div>{name}<\/div>     <div>       <button onclick={clickme()} >click me<\/button>     <\/div>   ); }  <\/code><\/pre>\n
useEffect \u662f\u5728 component mount \u540e\u8c03\u7528\u7684\uff08\u76f8\u5f53\u4e8e componentDidMount\/DidUpdate)\u3002<\/p>\n
\u4e24\u4e2a\u95ee\u9898\uff1a<\/p>\n
    \n
  1. mount \u5b8c\u6210\u540e\uff0cuseEffect \u89e6\u53d1\u4e86\uff0c\u8c03\u7528 getname \u5f97\u5230\u4e86\u65b0\u7684\u540d\u5b57\uff0c\u518d\u7528 setName \u66f4\u65b0\u8fd9\u4e2a state\uff0c\u90a3\u5c31\u662f\u8bf4 UI \u53c8\u8981 update \u3002\u8fd9\u6837\u7684\u8bdd\uff0c\u4e0d\u4f1a\u518d\u89e6\u53d1 useEffect \u4e48\uff1f\u518d setName \u4e00\u6b21\uff0cdependency – name \u53c8\u53d8\u5316\u4e86\uff0c\u8fd9\u4e2a effect \u5c31\u4f1a\u518d\u89e6\u53d1\u554a\u3002……<\/li>\n<\/ol>\n
    \u6ce8\uff1a\u8fd9\u79cd\u60c5\u51b5\uff0c\u6211\u80fd\u60f3\u5230\u7684\u5b9e\u9645\u573a\u666f\uff0c\u5c31\u662f\u6253\u5f00\u7f51\u7ad9\uff0c\u754c\u9762\u5148\u753b\u51fa\u6765\uff0c\u4f46\u662f\u56fe\u7247\u8fd8\u5728\u540e\u53f0\u52a0\u8f7d\u3002\u7b49\u56fe\u7247\u52a0\u8f7d\u5b8c\u6210\u4e86\uff0c\u7ee7\u7eed\u753b\u3002<\/p>\n
      \n
    1. \u53e6\u5916\u4e00\u4e2a\u4f8b\u5b50\uff0c\u6211\u70b9\u51fb button\uff0c\u5237\u65b0\u4e86\u4e00\u6b21 name\uff0cuserEffect \u4f1a\u4e0d\u4f1a\u89e6\u53d1\u554a\uff1f<\/li>\n<\/ol>\n
      \u8fd8\u662f\u8bf4\uff0creact hook \u8bbe\u8ba1\u4e0a\uff0c\u4fdd\u8bc1\u4e86\u5728 useEffect \u5185\u90e8\uff0csetXXX \u5373\u4f7f\u662f dependency\uff0c\u4e5f\u4e0d\u4f1a\u91cd\u590d\u89e6\u53d1\uff1f<\/p>\n
      \u8c22\u8c22\uff01<\/p>\n
      p.s. \u6709\u6ca1\u6709 react \u53ef\u4ee5 online \u7f16\u8f91 \/\u5b9e\u8df5\u7684\u7f51\u7ad9\uff1f codepen.io \u9700\u8981 VIP \u624d\u53ef\u4ee5……<\/p>\n<\/p><\/div>\n
       \u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (17<\/span>)        <\/div>\n
       <\/div>\n<\/p><\/div>\n<\/p><\/div>\n
        \n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : star7th <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u63d0\u4f9b\u4e00\u4e0b\u539f\u6559\u7a0b\u94fe\u63a5\u770b\u770b\u3002\u8c01\u77e5\u9053\u8fd9\u662f\u6e90\u7801\u8fd8\u662f\u7ecf\u8fc7\u4f60\u52a0\u5de5\u51fa\u6765\u7684\u95ee\u9898\u4ee3\u7801                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : syfless <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u8fd9\u6bb5 useEffect \u91cc\u7684\u4ee3\u7801\u610f\u4e49\u4e0d\u660e\uff0c\u672c\u6765\u5c31\u662f name \u53d8\u5316\u4e4b\u540e\u6267\u884c useEffect \u91cc\u7684\u526f\u4f5c\u7528\uff0c\u4f46 useEffect \u53c8\u653e\u4e86\u65e0\u6761\u4ef6\u6539\u53d8 name \u7684\u4ee3\u7801\uff0c\u8fd9\u5c31\u6b7b\u5faa\u73af\u4e86\uff0c\u4e0d\u8fc7\u597d\u50cf useEffect \u91cc\u9762\u4f1a\u81ea\u52a8\u68c0\u6d4b\u4f1a\u4e0d\u4f1a\u6b7b\u5faa\u73af\uff0c\u9876\u591a\u662f\u6267\u884c\u51e0\u5341\u6b21\u5c31\u505c\u4e86
        codesandbox.io \u53ef\u4ee5                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : shenyu1996 <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     [name] => []                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : CptDoraemon <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     setState’s identity is guaranteed to be stable over components’s life cycle. \u6587\u6863\u91cc\u8bf4\u7684                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : easonHHH <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u5f53 name \u53d1\u751f\u53d8\u5316\u540e\uff0c\u7136\u540e\u5c31\u4ece api \u83b7\u53d6\u4e00\u4e2a new name \u7136\u540e\u8d4b\u503c\u5230 name \uff1f                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : anjianshi <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u6309\u4e0a\u9762\u7684\u4ee3\u7801\uff0cuseEffect \u786e\u5b9e\u6ca1\u5565\u7528\uff0c\u800c\u4e14\u4f1a\u6b7b\u5faa\u73af                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : mebtte <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     <button onclick={clickme()} >click me<\/button>
        \u8fd9\u884c\u4ee3\u7801\u6ca1\u770b\u61c2 clickme()\u4e0d\u662f undefined \u5417                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : dartabe <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u5efa\u8bae\u591a\u770b\u770b\u597d\u70b9\u7684\u6559\u7a0b \u6709\u70b9\u4e0d\u77e5\u6240\u4e91<\/p>\n
        \u5199 Hooks \u7684\u65f6\u5019\u628a eslint \u7528\u8d77\u6765                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : zhuweiyou <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     1. \u4f60\u8fd9\u6bb5 useEffect \u591a\u4f59, \u53ef\u4ee5\u5220\u4e86.
        2. onclick={clickme()} \u5e94\u8be5\u6539\u6210 onclick={clickme}                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : xingguang <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u611f\u89c9\u4e0d\u592a\u5bf9\uff0c\u6211\u89c9\u7740\u8fd9\u91cc\u4e0d\u5e94\u8be5\u4f9d\u8d56 name\uff0c\u8fd9\u91cc\u5e94\u8be5\u662f\u8981\u7ed9\u4e2a\u9ed8\u8ba4\u503c\u5427\u3002\u628a\u4f9d\u8d56\u53bb\u6389\u6bd4\u8f83\u5408\u7406                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : alexkuang <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     codepen \u514d\u8d39\u7248\u53ef\u4ee5\u7528 react \u7684\uff0c\u901a\u8fc7 cdn \u5bfc\u5165                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : onfuns <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u4f60\u8fd9\u4e2a\u65e0\u9650\u5faa\u73af\u4e86\uff0c\u5982\u679c\u53ea mount \u540e\u8fdb\u5165\u6267\u884c\u8d4b\u503c name\uff0c\u90a3\u4e48\u4f9d\u8d56\u8bbe\u7f6e\u7a7a\u6570\u7ec4\u5373\u53ef\u3002\u5982\u679c\u5bf9 name \u76d1\u542c\uff0c\u53ef\u4ee5\u518d\u5199\u4e00\u4e2a useEffect \u5bf9 name \u76d1\u542c\uff0c\u8981\u4e48\u5b9a\u4e49\u4e00\u4e2a\u53d8\u91cf\u63a7\u5236                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : KuroNekoFan <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u53ef\u4ee5\u7528 codesandbox…                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : auroraccc <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u4f60\u90a3\u4e2a useEffect \u5185\u90e8\u90fd\u6ca1\u6709\u4f7f\u7528 name \u4e3a\u4ec0\u4e48\u8981\u4f9d\u8d56 name\uff0c\u4f9d\u8d56\u5e94\u8be5\u662f[]                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : TabGre <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     https:\/\/overreacted.io\/<\/p>\n
        \u6587\u7ae0\u5c31\u5f97\u53bb\u770b\u8fd9\u4e2a\u5927\u795e                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : azcvcza <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     \u4f60\u8fd9\u548c\u539f\u5148 componentWillRecieveProps \u91cc\u628a \u62ff\u6765\u7684 props \u8d4b\u503c\u7ed9 state \u5f15\u8d77\u65e0\u9650\u5faa\u73af\u5dee\u4e0d\u591a                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n
        \n
        \n
         \u8cc7\u6df1\u5927\u4f6c : jingcoco <\/span>  <\/div>\n
         <\/i>            <\/span> <\/div>\n<\/p><\/div>\n
                                                                     3 \u9760\u8c31…..useEffect \u7684\u7b2c\u4e8c\u4e2a\u53c2\u6570                                                            <\/div>\n<\/p><\/div>\n<\/li>\n
      • \n","protected":false},"excerpt":{"rendered":"
        react hook \u7684\u4e00\u4e2a\u95ee\u9898\uff0c…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/187350"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=187350"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/187350\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=187350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=187350"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=187350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}