{"id":209,"date":"2021-02-10T10:19:52","date_gmt":"2021-02-10T02:19:52","guid":{"rendered":"http:\/\/gjweb.top\/?p=209"},"modified":"2021-02-10T10:19:53","modified_gmt":"2021-02-10T02:19:53","slug":"usestate%e7%9a%84%e5%ae%9e%e7%8e%b0%e6%80%9d%e8%b7%af%e5%8f%8a%e5%8e%9f%e7%90%86","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=209","title":{"rendered":"useState\u7684\u5b9e\u73b0\u601d\u8def\u53ca\u539f\u7406"},"content":{"rendered":"\n
  1. useState\u7684\u57fa\u672c\u7528\u6cd5<\/li>
  2. useState\u7684\u57fa\u672c\u95ee\u9898<\/li>
  3. \u624b\u5199useState<\/li><\/ol>\n\n\n\n

    1. useState\u7684\u57fa\u672c\u7528\u6cd5<\/h2>\n\n\n\n

    ==\u6ce8\u610f: useState\u4e0d\u80fd\u5199\u5728If\u91cc,\u56e0\u4e3a\u4f1a\u5bfc\u81f4_state\u4e2d\u7684\u4e0b\u6807\u65e0\u6cd5\u4e00\u4e00\u5bf9\u5e94\u65b0\u7684\u5c5e\u6027key==<\/p>\n\n\n\n

        function App (){
            const [n,setN] = React.useState(0);
            const add = ()=>{
                setN(n+1)
            }
            return (
                <div>
                    <p>{n}<\/p>
                    <button onClick=\"add\">add<\/button>
                <\/div>
            )
        }<\/pre>\n\n\n\n
    2. useState\u7684\u57fa\u672c\u95ee\u9898<\/h2>\n\n\n\n
    1. \u6267\u884csetN\u7684\u65f6\u5019\u4f1a\u53d1\u4ec0\u4e48\u5417?n\u4f1a\u4e0d\u4f1a\u53d8\u5316?app()\u4f1a\u91cd\u65b0\u6267\u884c\u5417? \u7b54\uff1a \u9996\u5148\u6bcf\u4e2a\u7ec4\u4ef6\u6709\u81ea\u5df1\u7684\u6570\u636ex\uff0c\u5f53setN\u6267\u884c\u65f6\u4e00\u4f1a\u66f4\u65b0x\u7684\u503c\uff0c\u6b64\u65f6\u7684n\u4f1a\u53d1\u751f\u53d8\u5316\u4f46\u4e0d\u4f1a\u6e32\u67d3\u5230ui\u4e2d\uff0c\u53ea\u6709\u66f4\u65b0app\uff08\uff09\u624d\u4f1a\u66f4\u65b0UI\uff0c\u6240\u4ee5\u6bcf\u6b21\u4e2dsetN,app()\u4f1a\u88ab\u91cd\u65b0\u6e32\u67d3.<\/li>
    2. \u5982\u679capp()\u4f1a\u88ab\u91cd\u65b0\u6e32\u67d3,setState(0)\u7684\u65f6\u5019.\u6bcf\u6b21n\u7684\u503c\u4f1a\u4e0d\u4f1a\u4e0d\u540c. \u7b54: \u5f53\u91cd\u65b0\u88ab\u6e32\u67d3\u65f6,n\u5df1\u7ecf\u88abx\u8d4b\u503c,\u6240\u4ee5setState(0)\u5df2\u7ecf\u88abx\u7684\u503c\u66ff\u6362\u6389,n\u7684\u503c\u4f1a\u4e0d\u540c<\/li><\/ol>\n\n\n\n
      3. \u5b9e\u73b0useState\u7684\u601d\u8def<\/h2>\n\n\n\n
          import React,{useState} from \"react\"
          
          const _state = [];
          let index = 0;
          const myuseState = (value)=>{
              let blockIndex = index;
              _state[blockIndex] = _state[blockIndex]===nudefined?value:_state[blockIndex]
              const setState = (newValue)=>{
                  _state[blockIndex] = newValue;
                  render()
              }
              index++
              return [_state,setState]
          }
          const render(){
              ReactDOM.render(<App \/>,document.getElementById(\"root\"));
          }
          
          function App(){
              const [n,setN] = useState(0);
              const [m,setM] = useState(0)
              const add = ()=>{
                  setN(n+1)
              }
              const addM = ()=>{
                  setM(m+1)
              }
              return (
                  <div>
                      <p>
                          {n}
                          <button onClick={add}>add<\/button>
                      <\/p>
                      <p>
                          {m}
                          <button onClick={addM}>addM<\/button>
                      <\/p>
                  
                  <\/div>
              )
              
          }<\/pre>\n","protected":false},"excerpt":{"rendered":"
      useState\u7684\u57fa\u672c\u7528\u6cd5 useState\u7684\u57fa\u672c\u95ee\u9898 \u624b\u5199useState 1. useState\u7684\u57fa\u672c\u7528\u6cd5 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-209","post","type-post","status-publish","format-standard","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=209"}],"version-history":[{"count":0,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/209\/revisions"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}