{"id":315341,"date":"2020-12-22T15:01:50","date_gmt":"2020-12-22T15:01:50","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=315341"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2020-12-22T15:01:50","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=315341","title":{"rendered":"\u0417\u0430\u043c\u0435\u0442\u043a\u0430 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a React \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sj\/uf\/xu\/sjufxuqiadew2_zg3veuhlac7em.png\"\/><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0425\u0443\u043a useState() \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 React. \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 this.state, \u0430 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 this.setState().<\/p>\n<p>  \u041e\u0431\u044b\u0447\u043d\u043e, \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0434\u0438\u043d \u0432\u0430\u0436\u043d\u044b\u0439 \u043d\u044e\u0430\u043d\u0441, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>  \u041a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f: \u043d\u0435\u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e (\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e) \u0438\u043b\u0438 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e (\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e)? \u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0434\u0430\u043b\u044c\u0448\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>1. \u041e\u0431\u043d\u043e\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e useState()<\/h3>\n<p>  \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"javascript\">import { useState } from 'react'  function DoubleIncreaser() {   const [count, setCount] = useState(0)    const doubleIncreaseHandler = () =&gt; {     setCount(count + 1)     setCount(count + 1)   }    return (     &lt;&gt;       &lt;button onClick={doubleIncreaseHandler}&gt;         Double Increase       &lt;\/button&gt;       &lt;div&gt;Count: {count}&lt;\/div&gt;     &lt;\/&gt;   ) } <\/code><\/pre>\n<p>  const [count, setCount] = useState(0) \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. count \u2014 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0430\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0430 setCount \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 Double Increase. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u044d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a doubleIncreaseHandler, \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0434\u0432\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f count: setCount(count + 1) \u0438 \u0437\u0430\u0442\u0435\u043c \u0435\u0449\u0435 \u0440\u0430\u0437 setCount(count + 1).<\/p>\n<p>  \u041a\u0430\u043a\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438, 1 \u0438\u043b\u0438 2?<\/p>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u044d\u0442\u043e <a href=\"https:\/\/codesandbox.io\/s\/usestate-broken-ytmxk?file=\/src\/index.js\" rel=\"nofollow\">\u0434\u0435\u043c\u043e<\/a> \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 count \u0431\u0443\u0434\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 1 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043b\u0438\u043a\u0430.<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 setCount(count + 1) \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 count \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e, React \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0432 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0438 const [count, setCount] = useState(0) \u0445\u0443\u043a \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442 count \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 count \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f 0, \u0442\u043e \u0432\u044b\u0437\u043e\u0432 setCount(count + 1); setCount(count + 1) \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a setCount(0 + 1); setCount(0 + 1) \u2014 \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a 1 \u043a\u0430\u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435.<\/p>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e setValue(newValue) \u0432 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0438 [value, setValue] = useState() \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e.<\/p>\n<p>  \u041e\u0434\u043d\u0430\u043a\u043e, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u043e\u043b\u043b\u0431\u044d\u043a \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c setCount(actualCount =&gt; actualCount + 1):<\/p>\n<pre><code class=\"javascript\">import { useState } from 'react'  function DoubleIncreaser() {   const [count, setCount] = useState(0)    const doubleIncreaseHandler = () =&gt; {     setCount(actualCount =&gt; actualCount + 1)     setCount(actualCount =&gt; actualCount + 1)   }    return (     &lt;&gt;       &lt;button onClick={doubleIncreaseHandler}&gt;         Double Increase       &lt;\/button&gt;       &lt;div&gt;Count: {count}&lt;\/div&gt;     &lt;\/&gt;   ) } <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 actualCount \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u044d\u0442\u043e <a href=\"https:\/\/codesandbox.io\/s\/usestate-fixed-callback-e4pp3?file=\/src\/index.js\" rel=\"nofollow\">\u0434\u0435\u043c\u043e<\/a> \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 count \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u0441\u044f \u0434\u043e 2, \u043a\u0430\u043a \u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e:<\/p>\n<pre><code class=\"javascript\">import { useState } from 'react'  function DoubleIncreaser() {   const [count, setCount] = useState(0)    const doubleIncrease = () =&gt; {     let actualCount = count     actualCount = actualCount + 1     actualCount = actualCount + 1     setCount(actualCount)   }    return (     &lt;&gt;       &lt;button onClick={this.doubleIncrease}&gt;         Double Increase       &lt;\/button&gt;       &lt;div&gt;Count: {count}&lt;\/div&gt;     &lt;\/&gt;   ) } <\/code><\/pre>\n<p>  let actualCount = count \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e. \u042d\u0442\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e setCount(actualCount).<\/p>\n<h3>2. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e (\u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e) \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f<\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0431\u0443\u0434\u0435\u0442\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0435\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0443 \u0432\u0430\u0441 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u044b\u0439\u0434\u0435\u0442:<\/p>\n<pre><code class=\"javascript\">function FetchUsers() {   const [users, setUsers] = useState([])    useEffect(() =&gt; {     const startFetching = async () =&gt; {       const response = await fetch('\/users')       const fetchedUsers = await response.json()        setUsers(fetchedUsers)       console.log(users)        \/\/ =&gt; []       console.log(fetchedUsers) \/\/ =&gt; ['John', 'Jane', 'Alice', 'Bob']     }     startFetching()   }, [])    return (     &lt;ul&gt;       {users.map(user =&gt; &lt;li&gt;{user}&lt;\/li&gt;)}     &lt;\/ul&gt;   ) } <\/code><\/pre>\n<p>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 FetchUsers \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u2014 startFetching().<\/p>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 setUsers(fetchedUsers) \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0441\u0440\u0430\u0437\u0443.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f users \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0430 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f. \u0422\u043e\u043b\u044c\u043a\u043e \u0445\u0443\u043a useState() \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0435\u0439 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f:<\/p>\n<pre><code class=\"javascript\">  function FetchUsers() {     const [users, setUsers] = useState([])      useEffect(() =&gt; {       const startFetching = async () =&gt; {         const response = await fetch('\/users')         const fetchedUsers = await response.json()          users = fetchedUsers       \/\/ \u041d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e! users \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f         users.push(...fetchedUsers) \/\/ \u041d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e! users \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0430         setUsers(fetchedUsers)     \/\/ \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e!       }       startFetching()     }, [])      return (       &lt;ul&gt;         {users.map(user =&gt; &lt;li&gt;{user}&lt;\/li&gt;)}       &lt;\/ul&gt;     )   } <\/code><\/pre>\n<p>  <\/p>\n<h3>3. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435<\/h3>\n<p>  \u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u043d\u043e \u0438 \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">import { Component } from 'react';  class DoubleIncreaser extends Component {   state = {     count: 0   };    render() {     return (       &lt;&gt;         &lt;button onClick={this.doubleIncrease}&gt;           Double Increase         &lt;\/button&gt;         &lt;div&gt;Count: {this.state.count}&lt;\/div&gt;       &lt;\/&gt;     );   }    doubleIncrease = () =&gt; {     \/\/ \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442!     this.setState(({ count }) =&gt; ({       count: count + 1     }));     this.setState(({ count }) =&gt; ({       count: count + 1     }));      \/\/ \u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442!     \/\/ this.setState({ count: this.state.count + 1 });     \/\/ this.setState({ count: this.state.count + 1 });   } } <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a doubleIncrease(): \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u043d\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430.<\/p>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u044d\u0442\u043e <a href=\"https:\/\/codesandbox.io\/s\/thisstate-chrfo?file=\/src\/index.js\" rel=\"nofollow\">\u0434\u0435\u043c\u043e<\/a> \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443. \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 this.state \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u0441\u044f \u0434\u043e 2.<\/p>\n<p>  \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 this.state \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e. \u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 this.setState(newState) React \u043e\u0442\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 this.state \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, this.setState(newState) \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 this.state \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e.<\/p>\n<h3>4. \u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u0425\u0443\u043a useState() \u0438 this.setState() (\u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430) \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e.<\/p>\n<p>  \u0417\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e: \u0432\u044b\u0437\u043e\u0432 \u0441\u0435\u0442\u0442\u0435\u0440\u0430 setState(newValue) \u0445\u0443\u043a\u0430 useState() (\u0438\u043b\u0438 this.setState()) \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435 \u0441\u0440\u0430\u0437\u0443, \u0430 \u043f\u0440\u0438 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u0412\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, \u0447\u0442\u043e React \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 (\u0432 index.js)? \u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u043d\u044f.<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/534400\/\"> https:\/\/habr.com\/ru\/post\/534400\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sj\/uf\/xu\/sjufxuqiadew2_zg3veuhlac7em.png\"\/><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0425\u0443\u043a useState() \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 React. \u0412 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432 this.state, \u0430 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 this.setState().<\/p>\n<p>  \u041e\u0431\u044b\u0447\u043d\u043e, \u0432 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u0434\u0438\u043d \u0432\u0430\u0436\u043d\u044b\u0439 \u043d\u044e\u0430\u043d\u0441, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>  \u041a\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f: \u043d\u0435\u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e (\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e) \u0438\u043b\u0438 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e (\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e)? \u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0434\u0430\u043b\u044c\u0448\u0435, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-315341","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/315341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=315341"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/315341\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=315341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=315341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=315341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}