{"id":2070,"date":"2021-06-21T11:35:28","date_gmt":"2021-06-21T11:35:28","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2070"},"modified":"2021-06-21T11:35:28","modified_gmt":"2021-06-21T11:35:28","slug":"%d0%b2%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d0%b5-%d0%b2-react","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2070","title":{"rendered":"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 React"},"content":{"rendered":"\n<p><strong>React<\/strong>&nbsp;\u2014 JavaScript-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2>1. Getting started with React<\/h2>\n\n\n\n<h3>1.1 \u041c\u0435\u0442\u043e\u0434\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f React<\/h3>\n\n\n\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 2 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u0430 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f React \u043d\u0430 \u0441\u0430\u0439\u0442:<\/p>\n\n\n\n<ol><li>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u044d\u0433\u0430 &lt;script \/&gt;<\/li><li>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e create-react-app<\/li><\/ol>\n\n\n\n<h3>1.2 \u0412\u044b\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f<\/h3>\n\n\n\n<p>\u0412\u044b\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0435\u0439. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0442\u0438\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c React \u0442\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 create-react-app.<\/p>\n\n\n\n<h4>1.2.1 \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 React \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u044d\u0433\u0430 &lt;script \/&gt;<\/h4>\n\n\n\n<p><strong>\u0428\u0430\u0433 1<\/strong>&nbsp;\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 3 \u0442\u0435\u0433\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 head \u043d\u0430 \u0432\u044b\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/unpkg.com\/react@16\/umd\/react.development.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js\"&gt;&lt;\/script&gt;\n&lt;script src=\"https:\/\/unpkg.com\/babel-standalone@6.15.0\/babel.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 React \u0438 React-dom, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 babel.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Babel \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f React, \u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 UI, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JSX.<\/p><\/blockquote>\n\n\n\n<p><strong>\u0428\u0430\u0433 2<\/strong>&nbsp;\u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043d\u0430 \u0432\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u043c\u0435\u0441\u0442\u043e, \u0433\u0434\u0435 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0447\u0442\u043e-\u043b\u0438\u0431\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React.<br><strong>\u0428\u0430\u0433 3<\/strong>&nbsp;\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c React \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 JSX \u0432 \u043b\u044e\u0431\u043e\u043c \u0442\u0435\u0433\u0435 script, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043a \u043d\u0435\u043c\u0443 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 type=\u00abtext\/babel\u00bb.<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n\t&lt;meta charset=\"UTF-8\"&gt;\n\t&lt;title&gt;My first React app&lt;\/title&gt;\n\t&lt;script src=\"https:\/\/unpkg.com\/react@16\/umd\/react.development.js\" crossorigin&gt;&lt;\/script&gt;\n  \t&lt;script src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js\" crossorigin&gt;&lt;\/script&gt;\n  \t&lt;script src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;div id=\"root\"&gt;&lt;\/div&gt;\n\n\t&lt;script type=\"text\/babel\"&gt;\n  \t\tReactDOM.render(&lt;h1&gt;Hello world&lt;\/h1&gt;, document.querySelector(\"#root\"));\n  \t&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h4>1.2.2 \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 React \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e create-react-app<\/h4>\n\n\n\n<p>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 React, \u043e\u043f\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043d\u0430 Node.js, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0435\u0440\u0432\u043e\u0435 \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c&nbsp;<a href=\"https:\/\/nodejs.org\/en\/download\/\">Node<\/a>, \u0447\u0442\u043e \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c npm.<\/p>\n\n\n\n<p>\u041f\u0430\u043a\u0435\u0442 create-react-app \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438 \u043f\u0430\u043a\u0435\u0442\u0430\u043c\u0438 React \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043f\u043e\u043b\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435&nbsp;<a href=\"https:\/\/create-react-app.dev\/\">create-react-app<\/a>, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n\n\n\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 nodejs, \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 create-react-app:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ npx\nnpx create-react-app my-app\n\n\/\/ npm\nnpm init react-app my-app\n\n\/\/ yarn\nyarn create react-app my-app<\/code><\/pre>\n\n\n\n<p>\u0412\u044b\u0431\u043e\u0440 \u0437\u0430 \u0432\u0430\u043c\u0438 \u043a\u0430\u043a\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c (npx, npm, yarn) \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n\n\n\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, CLI \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Yarn \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 (\u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b). \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d Yarn, \u043d\u043e \u0432\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c npm, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c &#8211;use-npm \u043a \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app my-app --use-npm<\/code><\/pre>\n\n\n\n<p>\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c my-app \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043f\u0430\u043f\u043a\u0438. \u0412\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>my-app\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 node_modules\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 public\n\u2502   \u251c\u2500\u2500 favicon.ico\n\u2502   \u251c\u2500\u2500 index.html\n\u2502   \u251c\u2500\u2500 logo192.png\n\u2502   \u251c\u2500\u2500 logo512.png\n\u2502   \u251c\u2500\u2500 manifest.json\n\u2502   \u2514\u2500\u2500 robots.txt\n\u2514\u2500\u2500 src\n    \u251c\u2500\u2500 App.css\n    \u251c\u2500\u2500 App.js\n    \u251c\u2500\u2500 App.test.js\n    \u251c\u2500\u2500 index.css\n    \u251c\u2500\u2500 index.js\n    \u251c\u2500\u2500 logo.svg\n    \u2514\u2500\u2500 serviceWorker.js<\/code><\/pre>\n\n\n\n<p>\u0414\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 \u0432\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 npm start \u0438\u043b\u0438 yarn start:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd my-app\nnpm start<\/code><\/pre>\n\n\n\n<p>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u043d\u0435\u0441\u0435\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u0434. \u0412\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438. \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435&nbsp;<a href=\"http:\/\/localhost\/\">localhost<\/a>:3000, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n\n\n\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0414\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0442\u043e\u0447\u043d\u044b\u043c\u0438 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u0444\u0430\u0439\u043b\u043e\u0432:<\/p>\n\n\n\n<ul><li>public \/ index.html \u2014 \u0448\u0430\u0431\u043b\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b;<\/li><li>src \/ index.js \u2014 \u044d\u0442\u043e \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 JavaScript.<\/li><\/ul>\n\n\n\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0430\u0439\u043b\u044b.<\/p>\n\n\n\n<h2>2. Basically React<\/h2>\n\n\n\n<h3>2.1 React object<\/h3>\n\n\n\n<p>React \u2014 \u044d\u0442\u043e \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 React. \u041f\u0440\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 React \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u0430 script, API \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435 React, \u0430 \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 ES6 \u0438 create-react-app, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c React \u043e\u0431\u044a\u0435\u043a\u0442:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';<\/code><\/pre>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 ES5 \u0438 create-react-app, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c React \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var React = require('react');<\/code><\/pre>\n\n\n\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 ES6 \u0438 \u0431\u0443\u0434\u0443 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u044b \u0442\u043e\u0436\u0435 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438:&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/react-without-es6.html\">React \u0431\u0435\u0437 ES6<\/a>.<\/p>\n\n\n\n<h3>2.2 React element<\/h3>\n\n\n\n<p>React \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2014 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u0430 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u043e, \u0447\u0442\u043e \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b React \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 (immutable). \u0422\u043e \u0435\u0441\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 React \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section221\">createElement()<\/a>&nbsp;\u0438\u043b\u0438<br>createFactory(). \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c \u0438 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0451\u043c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 JSX, \u0442\u043e \u0432\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b.<\/p>\n\n\n\n<p>React \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u2014&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section222\">cloneElement<\/a>, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u2014&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section223\">isValidElement()<\/a>&nbsp;\u0438 \u0440\u0430\u0431\u043e\u0442\u043e\u0439 \u0441 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 props.children \u044d\u0442\u043e&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section224\">React.Children<\/a>&nbsp;(\u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 React.Children).<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section241\">Render<\/a>&nbsp;\u043e\u0431\u044a\u0435\u043a\u0442\u0430 ReactDom. \u041f\u043e\u0441\u043b\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430) React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 \u0438\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 ReactDom.render(). \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043d\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section23\">React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/a>.<\/p>\n\n\n\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u043e\u0449\u0435 \u043e\u043f\u0438\u0441\u0430\u0442\u044c, \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0447\u0435\u043c-\u0442\u043e \u043a\u0430\u043a \u043e\u043d \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441 \u0442\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u0446\u0435\u043b\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n\n\n\n<p>\u0412 React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435&nbsp;<a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Guide\/Expressions_and_Operators\">\u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 Javascript<\/a>.<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const name = 'Michael';\nvar nameUser = () =&gt; \"Franklin\";\nconst element = &lt;h1&gt;\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439, {name}&lt;\/h1&gt;;\nconst element_2 = &lt;h1&gt;\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439, {nameUser()}&lt;\/h1&gt;;\n\nReactDOM.render(element, document.getElementById(\"root\"));\nReactDOM.render(element_2, document.getElementById(\"root_2\"));\n\n<em>\/\/Output<\/em>\n\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439, Michael\n\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439, Franklin<\/code><\/pre>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 JSX, \u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0438\u0445 \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0443 createElement.<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c createElement:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var element = React.createElement(\"h1\", null, \"\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439, \", name);\nvar element_2 = React.createElement(\"h1\", null, \"\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439, \", nameUser());<\/code><\/pre>\n\n\n\n<h4>2.2.1 React.createElement<\/h4>\n\n\n\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043c\u0435\u0442\u043e\u0434 createElement:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React.createElement(\n  type,\n  &#91;props],\n  &#91;...children]\n);<\/code><\/pre>\n\n\n\n<ul><li>type \u2014 JavaSacript \u0441\u0442\u0440\u043e\u043a\u0430, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0430\u044f \u0438\u043c\u044f \u0442\u0435\u0433\u0430, React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043b\u0438 React-\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442;<\/li><li>props \u2014&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#0xFFFFF\">props&nbsp;<\/a>(\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 React \u043e\u0431\u044a\u0435\u043a\u0442\u0430)<\/li><li>children \u2014 \u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043b\u044f type.<\/li><\/ul>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f JSX, \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c React.createElement:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>element = React.createElement(Message, {\n  message: \"Hello, world\"\n}, React.createElement(\"p\", null, \"Some child element\"));<\/code><\/pre>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 JSX, \u0442\u043e \u0443 \u0432\u0430\u0441 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c JSX:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>element = &lt;Message message=\"Hello, world\"&gt;\n  &lt;p&gt;Some child element&lt;\/p&gt;\n&lt;\/Message&gt;;<\/code><\/pre>\n\n\n\n<p>\u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043e\u0431\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u044b\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 JSX \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 React.createElement().<\/p>\n\n\n\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u044d\u0442\u043e \u0441\u0430\u043c\u0438. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u043d\u043b\u0430\u0439\u043d \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440<a href=\"https:\/\/babeljs.io\/repl\">&nbsp;Babel<\/a>.<\/p>\n\n\n\n<h4>2.2.2 React.cloneElement<\/h4>\n\n\n\n<p>React.cloneElement \u2014 \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React.cloneElement(\n  element,\n  &#91;props],\n  &#91;...children]\n)<\/code><\/pre>\n\n\n\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 React \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 React \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438. \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u043a\u0430\u043a \u0443 React.createElement() \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043d\u0435 \u0438\u043c\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0442\u044d\u0433\u0430, \u0430 \u0438\u043c\u0435\u044e\u0449\u0438\u0435\u0441\u044f React \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043f\u0440\u043e\u043f\u0441\u044b \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0430 \u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e \u0441\u043b\u0438\u0442\u044b \u0432\u043e\u0435\u0434\u0438\u043d\u043e. \u041d\u043e\u0432\u044b\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u043c\u0435\u043d\u044f\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435.&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section31\">key&nbsp;<\/a>\u0438&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section236\">ref&nbsp;<\/a>\u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u044b.<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var a = &lt;p&gt;Some React element&lt;\/p&gt;;\nvar b = React.cloneElement(a);\n\nReactDOM.render(b, document.getElementById(\"root\"));\n<em>\/\/Output <\/em>\nSome React element<\/code><\/pre>\n\n\n\n<h4>2.2.3 React.isValidElement<\/h4>\n\n\n\n<p>React.isValidElement(object) \u2014 \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0447\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c React. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 true \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c React \u0438\u043b\u0438 false \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c React.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const A = &lt;p&gt;Some text&lt;\/p&gt;;\nconst B = {};\n\nif (React.isValidElement(A))\n  console.info(\"A is React Element\");\n\nif (React.isValidElement(B))\n  console.info(\"B is React Element\");\nelse\n  console.error(\"B is not a React Element\");\n\n<em>\/\/ Output<\/em>\nA is React Element\nB is not a React Element<\/code><\/pre>\n\n\n\n<h4>2.2.4 React.Children<\/h4>\n\n\n\n<p>React.Children \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 this.props.children. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0449\u0435, \u0442\u043e props.children \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u0432\u044b \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0435 \u043c\u0435\u0436\u0434\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u0430\u043c\u0438 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Chill(props) {\n        return &lt;h1&gt;Hello {props.children}&lt;\/h1&gt;\n}\n\nReactDom.render(&lt;Chill&gt;Mike&lt;\/Chill&gt;, element); <em>\/\/ Hello Mike<\/em><\/code><\/pre>\n\n\n\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c props.children \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u043c\u0438 \u0438 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u043c\u0438. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c props.children \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u00ab\u043e\u0431\u0449\u0438\u0435 \u0431\u043b\u043e\u043a\u0438\u00bb \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u00ab\u043d\u0435 \u0437\u043d\u0430\u044e\u0442 \u0441\u0432\u043e\u0438\u0445 \u0434\u0435\u0442\u0435\u0439 \u0440\u0430\u043d\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438\u00bb. \u0422\u043e \u0435\u0441\u0442\u044c \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Chill \u044d\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c. \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432, \u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e props.children \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n\n\n\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0432 \u0432\u043a\u0440\u0430\u0442\u0446\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 props.children.<\/p>\n\n\n\n<ul><li>React.Children.map \u2014 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430;<\/li><li>React.Children.forEach \u2014 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435;<\/li><li>React.Children.count \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u0449\u0435\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 children;<\/li><li>React.Children.only \u2014 \u0435\u0441\u043b\u0438 \u0443 children \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u043f\u043e\u0442\u043e\u043c\u043e\u043a (React \u044d\u043b\u0435\u043c\u0435\u043d\u0442), \u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0435\u0433\u043e \u0438\u043d\u0430\u0447\u0435 \u0432\u044b\u0434\u0430\u0451\u0442 \u043e\u0448\u0438\u0431\u043a\u0443;<\/li><li>React.Children.toArray \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438\u0437 children \u0441 \u043a\u043b\u044e\u0447\u0430\u043c\u0438, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443<\/li><\/ul>\n\n\n\n<p><strong>React.Children.map<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React.Children.map(children, function&#91;(thisArg)])<\/code><\/pre>\n\n\n\n<p>\u041f\u043e\u0445\u043e\u0436 \u043d\u0430 Array.prototype.map(). \u0421\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0433\u043e\u0441\u044f \u0432 children \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0438\u0445 \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u0432 thisArg. \u0415\u0441\u043b\u0438 children \u2014 \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0439\u0434\u0435\u043d, \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435. \u0415\u0441\u043b\u0438 children \u0440\u0430\u0432\u0435\u043d null \u0438\u043b\u0438 undefined, \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432\u0435\u0440\u043d\u0451\u0442 null \u0438\u043b\u0438 undefined, \u0430 \u043d\u0435 \u043c\u0430\u0441\u0441\u0438\u0432. \u0415\u0441\u043b\u0438 children \u2014 \u044d\u0442\u043e React.Fragment, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0446\u0435\u043b\u044b\u0439 \u043f\u043e\u0442\u043e\u043c\u043e\u043a, \u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u044b. \u041c\u0435\u0442\u043e\u0434 map \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e callback \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0438\u0445 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u0438\u0440\u0443\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0435\u0451 \u0432\u044b\u0437\u043e\u0432\u0430.<\/p>\n\n\n\n<p><strong>React.Children.forEach<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React.Children.forEach(children, function&#91;(thisArg)])<\/code><\/pre>\n\n\n\n<p>\u041f\u043e\u0445\u043e\u0436 \u043d\u0430 Array.prototype.forEach(). \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 React.Children.map \u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 ubdefined.<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var users = &#91;\"Mike\", \"Bill\", \"Scott\"];\n\nfunction Chill(props) {\n    return &lt;span&gt;{React.Children.map(props.children, (thisArg) =&gt; &lt;p&gt;Hello {thisArg}&lt;\/p&gt;)}&lt;\/span&gt;;\n}\n\nrender (&lt;Chill&gt;{users}&lt;\/Chill&gt;, element); <em>\/\/ Hello Mike, Hello Bill, Hello Scott<\/em><\/code><\/pre>\n\n\n\n<p>\u0412\u044b \u043c\u043d\u043e\u0436\u0438\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432&nbsp;<a href=\"https:\/\/learn.co\/lessons\/react-this-props-children\">\u0442\u0443\u0442&nbsp;<\/a>\u0438&nbsp;<a href=\"https:\/\/codeburst.io\/a-quick-intro-to-reacts-props-children-cb3d2fce4891\">\u0442\u0443\u0442<\/a>.<\/p>\n\n\n\n<h3>2.3 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h3>\n\n\n\n<p>React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f React-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 JavaScript \u043a\u043b\u0430\u0441\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 render() \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 React-\u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u00ab\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438\u00bb \u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u00ab\u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438\u00bb.<\/p>\n\n\n\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 JavaScript \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u00ab\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u00bb, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c stateless components, \u0442\u043e \u0435\u0441\u0442\u044c, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0435\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u044b\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043a\u0430\u043a JavaScript \u043a\u043b\u0430\u0441\u0441 \u043c\u043e\u0433\u0443 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u00ab\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u00bb, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0445 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 statefull components, \u0442\u043e \u0435\u0441\u0442\u044c, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. *\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0445\u043e\u0436\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-overview.html#state-hook\">\u0445\u0443\u043a\u0438<\/a>.<\/p>\n\n\n\n<p>\u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u044b \u043f\u0443\u0442\u0451\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u043e\u0432&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section231\">React.Component<\/a>&nbsp;\u0438\u043b\u0438&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/react-api.html#reactpurecomponent\">React.PureComponent<\/a>. \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043b\u0438\u0448\u044c \u0442\u0435\u043c, \u0447\u0442\u043e \u043e\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 shouldComponentUpdate() (\u0441\u043c.&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section231\">\u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/a>).<\/p>\n\n\n\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044d\u0442\u043e&nbsp;<a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Functions\">\u0444\u0443\u043d\u043a\u0446\u0438\u044f JavaScript<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u0430 \u0432&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/react-api.html#reactmemo\">React.memo<\/a>. React.memo \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 React.PureComponent \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u043e\u043f\u0441\u044b&nbsp;<\/strong>\u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u0435\u0440\u044f\u0435\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443. \u041a\u043e\u0433\u0434\u0430 React \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442 JSX-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043e\u043d \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0438\u0445 \u0432 \u043e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443. \u042d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00ab\u043f\u0440\u043e\u043f\u0441\u044b\u00bb (props).<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function SayHi(props) {\n    return &lt;h1&gt;\u041f\u0440\u0438\u0432\u0435\u0442, {props.name}&lt;\/h1&gt;;\n}\n\nclass SayHi_2 extends React.Component {\n    render() {\n        return &lt;h1&gt;\u041f\u0440\u0438\u0432\u0435\u0442, {this.props.name}&lt;\/h1&gt;;\n    }\n}\n\nReactDOM.render(&lt;SayHi name=\"Mark\" \/&gt;, document.getElementById(\"root\"));\nReactDOM.render(&lt;SayHi_2 name=\"Bob\" \/&gt;, document.getElementById(\"root_2\"));\n\n<em>\/\/Output<\/em>\n\u041f\u0440\u0438\u0432\u0435\u0442, Mark\n\u043f\u0440\u0438\u0432\u0435\u0442, Bob<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\u0417\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435! \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0442\u0438\u043f\u043e\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c\u0441\u044f \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0431\u0443\u043a\u0432\u044b!!!<\/p><\/blockquote>\n\n\n\n<p>React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0431\u044f\u0437\u0430\u043d\u044b \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u0447\u0438\u0441\u0442\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044e \u043a \u0441\u0432\u043e\u0438\u043c \u043f\u0440\u043e\u043f\u0441\u0430\u043c.<\/p>\n\n\n\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0447\u0442\u043e-\u0442\u043e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u043f\u0441\u044b \u2014 \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u043d \u0438\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0439.<\/p>\n\n\n\n<h4>2.3.1 React.Component<\/h4>\n\n\n\n<p>React.Component \u2014 \u044d\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043e\u0442 React.Component:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class myComponent extends React.Component {\n  render() {\n    return &lt;h1&gt;Hello, world&lt;\/h1&gt;;\n  }\n}<\/code><\/pre>\n\n\n\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430. (\u0441\u043c.&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section235\">2.3.5 Lifecycle<\/a>).<\/p>\n\n\n\n<h4>2.3.2 React.Fragment<\/h4>\n\n\n\n<p>\u041a\u0430\u043a \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 React \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0443\u0437\u0435\u043b (\u043e\u0434\u0438\u043d html \u0442\u044d\u0433). \u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0433\u043e\u0432, \u0442\u043e \u043e\u043d\u0438 \u0432 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b \u0432 \u043e\u0434\u0438\u043d \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438\u043d\u0430\u0447\u0435 \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043e\u0448\u0438\u0431\u043a\u0443. \u041d\u043e \u0447\u0442\u043e \u0436\u0435 \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b? \u041e\u0442\u0432\u0435\u0442: React.Fragment.<\/p>\n\n\n\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React.Fragment \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 render() \u0431\u0435\u0437 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 DOM:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>render() {\n    return (\n       &lt;React.Fragment&gt;\n            &lt;p&gt;Some text&lt;\/p&gt;\n            &lt;h2&gt;Tittle&lt;\/h2&gt;\n      &lt;\/React.Fragment&gt;\n    );\n}<\/code><\/pre>\n\n\n\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 Jsx, \u0442\u043e \u0432\u0430\u0448 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>React.createElement(React.Fragment, null, React.createElement(\"p\", null, \"Some text\"), React.createElement(\"h2\", null, \"Tittle\"));<\/code><\/pre>\n\n\n\n<p>\u0412 React&nbsp;<a href=\"https:\/\/ru.reactjs.org\/blog\/2017\/11\/28\/react-v16.2.0-fragment-support.html\">v16.2.0<\/a>&nbsp;\u0437\u0430\u0432\u0435\u0437\u043b\u0438 \u043d\u043e\u0432\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440 \u0434\u043b\u044f React.Fragment, \u0441 \u044d\u0442\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 html \u0442\u044d\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 React.Fragment:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>render() {\n    return (\n       &lt;&gt;\n            &lt;p&gt;Some text&lt;\/p&gt;\n            &lt;h2&gt;Tittle&lt;\/h2&gt;\n      &lt;\/&gt;\n    );\n}<\/code><\/pre>\n\n\n\n<h4>2.3.3 State<\/h4>\n\n\n\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (State) \u2014 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e (state) \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 setState() \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e. \u0418\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e \u0435\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e (\u0431\u0435\u0437 \u0432\u044b\u0437\u043e\u0432\u0430 setState()).<\/p>\n\n\n\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u043e\u043c. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 incrementCount \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e setState \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044f \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Counter extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = { count: 0 };\n        this.incrementCount = this.incrementCount.bind(this);\n    }\n    incrementCount() {\n        this.setState(state =&gt; ({ count: state.count + 1 }));\n    }\n\n    render() {\n        return &lt;div&gt;\n            &lt;p&gt;Count = {this.state.count}&lt;\/p&gt;\n            &lt;button onClick={this.incrementCount}&gt;Add&lt;\/button&gt;\n        &lt;\/div&gt;\n    }\n}\nReactDOM.render(&lt;Counter \/&gt;, document.getElementById(\"root\"));<\/code><\/pre>\n\n\n\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043a\u043e\u0434 \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c.<\/p>\n\n\n\n<p>\u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u0441\u043b\u043e\u0432\u043e super() \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440. \u0415\u0451 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043a \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u043c\u0443 \u0441\u043b\u043e\u0432\u0443 this \u0432 \u0442\u0435\u043b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \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 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c super(). \u041a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0441 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c props. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043f\u0440\u043e\u043f\u0441\u044b.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 bind() \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0437 Function.prototype.bind() \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f this \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434\u044b \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 JavaScript \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 this \u0431\u0443\u0434\u0435\u0442 undefined \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0435\u0441\u043b\u0438 \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u0435\u0435 \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443. \u0415\u0441\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432\u0430 bind(), \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 \u043e\u0431\u0449\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439 \u043a\u043b\u0430\u0441\u0441\u043e\u0432:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>incrementCount = () =&gt; {\n        this.setState(state =&gt; ({ count: state.count + 1 }));\n}<\/code><\/pre>\n\n\n\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 onClick \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 incrementCount \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0435. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0430 React \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435.<\/p>\n\n\n\n<p>setState() \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043b\u044f \u0435\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441 \u043d\u043e\u0432\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0449\u0430\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u0430\u043a \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u0432\u044b\u0437\u043e\u0432\u044b setState \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c\u0438 \u0438\u0437 \u0437\u0430 \u0447\u0435\u0433\u043e this.state \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043c\u0435\u0442\u043e\u0434\u0430 setState:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>setState(updater&#91;, callback])<\/code><\/pre>\n\n\n\n<p>setState() \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e fetch() \u0434\u0435\u043b\u0430\u044e\u0449\u0430\u044f \u0437\u0430\u043f\u0440\u043e\u0441. \u041c\u0435\u0442\u043e\u0434 setState() \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0440\u0430\u0437\u0443. \u041e\u043d \u043c\u043e\u0436\u0435\u0442 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043e\u0442\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0430\u0437\u0430. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0447\u0442\u0435\u043d\u0438\u0435 this.state \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 setState() \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u043b\u043e\u0432\u0443\u0448\u043a\u043e\u0439. \u041f\u0435\u0440\u0432\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 updater \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0438\u0434:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>(state&#91;, props]) =&gt; stateChange<\/code><\/pre>\n\n\n\n<p>\u0437\u0434\u0435\u0441\u044c state \u2014 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438. \u041a\u0430\u043a state, \u0442\u0430\u043a \u0438 props, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439, \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u044b. \u0412\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0432 setState() \u2014 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043b\u0431\u044d\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f setState \u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0442\u043e\u0433\u0434\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u043e\u0432\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c.<\/p>\n\n\n\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f!<\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u043f\u043e\u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>constructor(props) {\n    super(props);\n    \nthis.state = { value_1: true, value_2: false };\n  }<\/code><\/pre>\n\n\n\n<p>\u041e\u0431\u0430 \u043f\u043e\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 setState()<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>changeValue_1() {\n    this.setState(state =&gt; ({ value_1: !state.value_1 }));\n}\nchangeValue_2() {\n    this.setState(state =&gt; ({ value_2: !state.value_2 }));\n}<\/code><\/pre>\n\n\n\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u044b\u0437\u043e\u0432 changeValue_1() \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 value_2 \u043d\u0435\u0442\u0440\u043e\u043d\u0443\u0442\u044b\u043c, \u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 value_1.<\/p>\n\n\n\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0441\u043a\u0440\u044b\u0442\u043e \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445. \u0422\u043e \u0435\u0441\u0442\u044c this.state \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c.<\/p>\n\n\n\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0451 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u043d\u0438\u0437 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n\n\n\n<h4>2.3.4 Events<\/h4>\n\n\n\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0438 \u0432 React \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0442\u0430\u043a\u043e\u0432\u0443\u044e \u0432 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ In HTML\n&lt;button onclick=\"handler()\"&gt;Button&lt;\/button&gt;\n\n\/\/ In Jsx\n&lt;button onClick={handler}&gt;Button&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>\u0412 React \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u0435\u0440\u043d\u0443\u0432 false \u0438\u0437 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c preventDefault().<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ActionLink() {\n  function handleClick(e) {\n    e.preventDefault(); <em>\/\/ \u043e\u0442\u043c\u0435\u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/em>\n  }\n  return &lt;a href=\"#\" onClick={handleClick}&gt;Link&lt;\/a&gt;;\n}<\/code><\/pre>\n\n\n\n<p>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442&nbsp;<a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Event\">Event<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 React \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 SyntheticEvent. \u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442 SyntheticEvent \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0430 \u0432\u0441\u0435 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u0443\u0434\u0443\u0442 \u043e\u0447\u0438\u0449\u0435\u043d\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function onClick(event) {\n  console.log(event); <em>\/\/ =&gt; null-\u043e\u0431\u044a\u0435\u043a\u0442.<\/em>\n  console.log(event.type); <em>\/\/ =&gt; \"click\"<\/em>\n  const eventType = event.type; <em>\/\/ =&gt; \"click\"<\/em>\n\n  setTimeout(function() {\n    console.log(event.type); <em>\/\/ =&gt; null<\/em>\n    console.log(eventType); <em>\/\/ =&gt; \"click\"<\/em>\n  }, 0);\n\n  <em>\/\/ \u041d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 this.state.clickEvent \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e null-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/em>\n  this.setState({clickEvent: event});\n\n  <em>\/\/ \u041f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<\/em>\n  this.setState({eventType: event.type});\n}<\/code><\/pre>\n\n\n\n<p>\u041d\u043e \u0435\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u0432\u0441\u0451 \u0442\u0430\u043a\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0439\u0442\u0435 event.persist() \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0438. \u0422\u043e\u0433\u0434\u0430 \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u0432\u043b\u0435\u0447\u0435\u043d\u043e \u0438\u0437 \u043f\u0443\u043b\u0430, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0432\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u0434\u0443 \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435.<\/p>\n\n\n\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/events.html\">\u0442\u0443\u0442<\/a>.<\/p>\n\n\n\n<h4>2.3.5 Lifecycle<\/h4>\n\n\n\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u00ab\u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430\u00bb. \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u0441\u0435 \u0442\u0440\u0438 \u044d\u0442\u0430\u043f\u0430 \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u0432 \u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u0430\u043a\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u0442\u0430\u043f\u0430\u0445. \u0418 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b.<\/p>\n\n\n\n<p><a href=\"http:\/\/projects.wojtekmaj.pl\/react-lifecycle-methods-diagram\/\">\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/webt\/n7\/kr\/ql\/n7krqlscm1y6mc54g-grt4gcd3o.jpeg\" alt=\"image\"\/><\/figure>\n\n\n\n<p><strong>\u041c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong><\/p>\n\n\n\n<p>\u041f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0439 (\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u0432\u0441\u0442\u0430\u0432\u043a\u0435 \u0432 DOM) \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435:<\/p>\n\n\n\n<ul><li>constructor()<\/li><li>static getDerivedStateFromProps()<\/li><li>render()<\/li><li>componentDidMount()<\/li><\/ul>\n\n\n\n<p><strong>constructor<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>constructor(props)<\/code><\/pre>\n\n\n\n<p>\u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u2014 \u0441\u0430\u043c\u044b\u0439 \u043f\u0435\u0440\u0432\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d.<\/p>\n\n\n\n<p>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0432\u0430\u043c \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0443. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438\u043b\u0438 \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u0430.<\/p>\n\n\n\n<p>\u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u044f \u0443\u0436\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u043b. (\u0441\u043c.&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section233\">2.3.3 State<\/a>).<\/p>\n\n\n\n<p><strong>getDerivedStateFromProps()<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>static getDerivedStateFromProps(props, state)<\/code><\/pre>\n\n\n\n<p>getDerivedStateFromProps \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0430 render, \u043a\u0430\u043a \u043f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u0442\u0430\u043a \u0438 \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f\u0445. \u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043b\u0438 null, \u0447\u0442\u043e\u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u043b\u044f \u0440\u0435\u0434\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 \u043f\u0440\u043e\u043f\u0441\u0430\u0445. getDerivedStateFromProps \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u0446\u0435\u043b\u0438. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0435 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 props. \u0414\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0441\u0442\u0430\u0442\u044c\u044e&nbsp;<a href=\"https:\/\/ru.reactjs.org\/blog\/2018\/06\/07\/you-probably-dont-need-derived-state.html#when-to-use-derived-state\">Brian Vaughn, You Probably Don&#8217;t Need Derived State<\/a>.<\/p>\n\n\n\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u043e\u0434, \u043e\u043d \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043f\u0441\u044b, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 getDerivedStateFromProps(), \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043a\u043b\u0430\u0441\u0441\u0430 \u0432 \u0432\u0438\u0434\u0435 \u0447\u0438\u0441\u0442\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439.<\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043c\u0435\u0436\u0434\u0443 getDerivedStateFromProps() \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u0430, \u0438\u0437\u0432\u043b\u0435\u043a\u0438\u0442\u0435 \u0447\u0438\u0441\u0442\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u0435 \u0438\u0445 \u0432\u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n\n\n\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u043f\u0440\u0438\u0447\u0438\u043d\u044b.<\/p>\n\n\n\n<p><strong>render()<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>render()<\/code><\/pre>\n\n\n\n<p>\u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043e\u043d \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 this.props \u0438 this.state \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432:<\/p>\n\n\n\n<ul><li>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 React<\/li><li>\u041c\u0430\u0441\u0441\u0438\u0432<\/li><li>\u041f\u043e\u0440\u0442\u0430\u043b<\/li><li>\u0421\u0442\u0440\u043e\u043a\u0443<\/li><li>\u0427\u0438\u0441\u043b\u043e<\/li><li>Booleans \u0438\u043b\u0438 null<\/li><\/ul>\n\n\n\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f render() \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0447\u0438\u0441\u0442\u043e\u0439.<\/p>\n\n\n\n<p>\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 componentDidMount() \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430. \u0427\u0438\u0441\u0442\u044b\u0439 render() \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c.<\/p>\n\n\n\n<p>\u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430, \u043e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n\n\n\n<p><strong>componentDidMount()<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>componentDidMount()<\/code><\/pre>\n\n\n\n<p>componentDidMount() \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u0442\u043e \u0435\u0441\u0442\u044c, \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 DOM). \u0412 \u044d\u0442\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f DOM-\u0443\u0437\u043b\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u0438\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n\n\n\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0440\u0430\u0437\u0443 \u0432\u044b\u0437\u0432\u0430\u0442\u044c setState() \u0432 componentDidMount(). \u042d\u0442\u043e \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u044d\u043a\u0440\u0430\u043d. \u0413\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 render() \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0432\u0430\u0436\u0434\u044b. \u041f\u0440\u0430\u0432\u0434\u0430 \u043f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e. \u041d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043b\u0443\u0447\u0448\u0435 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u0432 constructor(). \u041e\u0434\u043d\u0430\u043a\u043e, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u043b\u0438 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 DOM-\u0443\u0437\u043b\u0430, \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0440\u0435\u043d\u0434\u0435\u0440. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d \u0438\u043b\u0438 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043e\u043a.<\/p>\n\n\n\n<p><strong>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435<\/strong><\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 (\u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u043c\u0435\u0442\u043e\u0434 ReactDom.render()), \u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0432\u044b\u0437\u043e\u0432\u0430\u0445 ReactDom.render(). \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0438\u043b\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041f\u0440\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435:<\/p>\n\n\n\n<ul><li>static getDerivedStateFromProps()<\/li><li>shouldComponentUpdate()<\/li><li>render()<\/li><li>getSnapshotBeforeUpdate()<\/li><li>componentDidUpdate()<\/li><\/ul>\n\n\n\n<p>\u041f\u0440\u0430\u0432\u0434\u0430 \u0437\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434 shouldComponentUpdate() \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u0435\u0441\u043b\u0438 \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u043f\u0440\u0438\u0432\u0451\u043b \u0432\u044b\u0437\u043e\u0432 forceUpdate(). \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0447\u0442\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438 \u043c\u0435\u0442\u043e\u0434 forceUpdate().<\/p>\n\n\n\n<p><strong>forceUpdate()<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>component.forceUpdate(callback)<\/code><\/pre>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0448 \u043c\u0435\u0442\u043e\u0434 render() \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c React \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u0432\u044b\u0437\u0432\u0430\u0432 forceUpdate().<\/p>\n\n\n\n<p>\u0412\u044b\u0437\u043e\u0432 forceUpdate() \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u043c\u0435\u0442\u043e\u0434\u0430 render() \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u044f shouldComponentUpdate(). \u042d\u0442\u043e \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0434\u043b\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f shouldComponentUpdate() \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. React \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c DOM \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438.<\/p>\n\n\n\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d handleClick \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0432\u044b\u0437\u043e\u0432\u0443 getSnapshotBeforeUpdate \u0432 Tittle \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 button.click \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0451\u043d. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0430\u0434\u043f\u0438\u0441\u044c \u0432 Title \u0431\u0443\u0434\u0435\u0442 \u0441\u043c\u0435\u043d\u044f\u0442\u0441\u044f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Clicker extends React.Component {\n    constructor(props) {\n        super(props);\n    }\n    handleClick = () =&gt; {\n        this.forceUpdate();\n    }\n    render() {\n        return &lt;React.Fragment&gt;\n            &lt;Tittle&gt;&lt;\/Tittle&gt;\n            &lt;button onClick={this.handleClick}&gt;Click me&lt;\/button&gt;\n        &lt;\/React.Fragment&gt;;\n    }\n}\nclass Tittle extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.button = { click: false };\n    }\n    getSnapshotBeforeUpdate() {\n        this.button.click = (this.button.click) ? false : true;\n    }\n    render() {\n        if(this.button.click)\n            return &lt;h1&gt;Button enabled&lt;\/h1&gt;;\n        else\n            return &lt;h1&gt;Button disabled&lt;\/h1&gt;;\n    }\n}\nReactDom.render(&lt;Clicker \/&gt;, document.getElementById(\"root\"));<\/code><\/pre>\n\n\n\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0449\u0435, \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Clicker \u0432 handleClick \u0438 \u043f\u0435\u0440\u0435\u0434\u043e\u0432\u0430\u044f \u0435\u0433\u043e \u043a\u0430\u043a props \u0432 Tittle. \u041d\u043e \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0445\u043e\u0440\u043e\u0448\u043e \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 forceUpdate(). \u041c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e forceUpdate() \u044d\u0442\u043e \u0437\u0430\u043c\u0435\u043d\u0430 \u0434\u043b\u044f setState() \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445: \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u043e \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u043c\u0435\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u0438\u0431\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c shouldComponentUpdate() \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p><strong>getDerivedStateFromProps()<\/strong><\/p>\n\n\n\n<p>\u041c\u0435\u0442\u043e\u0434 getDerivedStateFromProps() \u0443\u0436\u0435 \u0431\u044b\u043b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#0x001\">\u0432\u044b\u0448\u0435<\/a>&nbsp;\u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u0442\u0430\u043a \u0438 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041d\u0435 \u044f\u0441\u043d\u043e \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u043f\u043e \u0437\u0430\u0434\u0443\u043c\u043a\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u044d\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043b\u0438 null, \u0447\u0442\u043e\u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c.<\/p>\n\n\n\n<p><strong>shouldComponentUpdate()<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>shouldComponentUpdate(nextProps, nextState)<\/code><\/pre>\n\n\n\n<p>shouldComponentUpdate \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435. \u041d\u043e \u0431\u044b\u0432\u0430\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e props \u0438\u043b\u0438 state, \u0430 \u0432\u043e \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c this.props \u0441 nextProps, \u0430 this.state \u0441 nextState, \u0432\u0435\u0440\u043d\u0438\u0442\u0435 false \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 React.<\/p>\n\n\n\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0442 false \u043d\u0435 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n\n\n\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0430\u0432\u043d\u043e true. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u0438\u043b\u0438 \u043a\u043e\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f forceUpdate().<\/p>\n\n\n\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043b\u0438\u0448\u043d\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u044b ReactDom.render() \u043c\u043e\u0433\u0443\u0442 \u043f\u043b\u043e\u0445\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041d\u0435 \u043e\u043f\u0438\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c shouldComponentUpdate() \u00ab\u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c\u00bb \u0440\u0435\u043d\u0434\u0435\u0440, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0431\u0430\u0433\u0430\u043c.<\/p>\n\n\n\n<p>\u041a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435 (<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section23\">\u0441\u043c. 2.3 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/a>) \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0443\u0442\u0451\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u0430 React.PureComponent, \u0430 \u043d\u0435 React.Component \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0442 \u043c\u0435\u0442\u043e\u0434 shouldComponentUpdate().<\/p>\n\n\n\n<p>\u041c\u0435\u0442\u043e\u0434 shouldComponentUpdate() \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 React.PureComponent \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u043d\u043e\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u043e\u043d\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u0445 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0439 (\u0442\u043e \u0435\u0441\u0442\u044c, \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0439, \u043d\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b). \u041d\u0430\u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u043a\u043b\u0430\u0441\u0441 PureComponent \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 forceUpdate(), \u043a\u043e\u0433\u0434\u0430 \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c.<\/p>\n\n\n\n<p>\u041f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 shouldComponentUpdate() \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f render() \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0441\u044f&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#0x007\">\u0432\u044b\u0448\u0435<\/a>.<\/p>\n\n\n\n<p><strong>getSnapshotBeforeUpdate()<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>getSnapshotBeforeUpdate(prevProps, prevState)<\/code><\/pre>\n\n\n\n<p>getSnapshotBeforeUpdate() \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u044f\u043c\u043e \u043f\u0435\u0440\u0435\u0434 \u044d\u0442\u0430\u043f\u043e\u043c \u00ab\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\u00bb (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0435\u0440\u0435\u0434 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0432 DOM). \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0431\u0440\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438\u0437 DOM (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438) \u043f\u0435\u0440\u0435\u0434 \u0435\u0451 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c. \u041b\u044e\u0431\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u044d\u0442\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430, \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043e \u043a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 componentDidUpdate().<\/p>\n\n\n\n<p>\u0425\u043e\u0442\u044f \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 render() \u0432 \u043d\u0435\u043c \u0432\u044b \u0432\u0441\u0435 \u0435\u0449\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u00ab\u0441\u043d\u0438\u043c\u043e\u043a\u00bb, \u0442\u043e \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 DOM \u0434\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430.<\/p>\n\n\n\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043d\u0438\u043c\u043a\u0430 (\u0438\u043b\u0438 null) \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u043e \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430.<\/p>\n\n\n\n<p><strong>componentDidUpdate()<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>componentDidUpdate(prevProps, prevState, snapshot)<\/code><\/pre>\n\n\n\n<p>componentDidUpdate() \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f DOM. \u041e\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f, \u0442\u0430\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 DOM. \u0422\u0430\u043a\u0436\u0435 \u043e\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c\u0438. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u043f\u0441\u044b \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c, \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043c\u043e\u0436\u0435\u0442 \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n\n\n\n<p>\u0412 componentDidUpdate() \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c setState(), \u043e\u0434\u043d\u0430\u043a\u043e \u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0430 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u044f.<\/p>\n\n\n\n<p>\u0412 \u0442\u0435\u0445 \u0440\u0435\u0434\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043c\u0435\u0442\u043e\u0434 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 getSnapshotBeforeUpdate(), \u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044f componentDidUpdate() \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0442\u0440\u0435\u0442\u044c\u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 snapshot.<\/p>\n\n\n\n<p>componentDidUpdate() \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 shouldComponentUpdate() \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 false.<\/p>\n\n\n\n<p><strong>\u0420\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/strong><\/p>\n\n\n\n<p>\u041f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u0437 DOM \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 componentWillUnmount().<\/p>\n\n\n\n<p><strong>componentWillUnmount()<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>componentWillUnmount()<\/code><\/pre>\n\n\n\n<p>componentWillUnmount() \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section243\">ReactDOM.unmountComponentAtNode()<\/a>) \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412 \u044d\u0442\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0441\u0431\u0440\u043e\u0441: \u043e\u0442\u043c\u0435\u043d\u0430 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432, \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u043e\u043a, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0440\u0430\u043d\u0435\u0435.<\/p>\n\n\n\n<h4>2.3.6 Refs<\/h4>\n\n\n\n<p>\u0420\u0435\u0444\u044b \u0434\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a DOM-\u0443\u0437\u043b\u0430\u043c \u0438\u043b\u0438 React-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u043c \u0432 \u0440\u0435\u043d\u0434\u0435\u0440-\u043c\u0435\u0442\u043e\u0434\u0435. \u041e\u0431\u044b\u0447\u043d\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u043f\u0441\u044b, \u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043e\u0431\u043e\u0439\u0434\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u0430\u043d\u043d\u044b\u0445. \u0420\u0435\u0444\u044b \u043a\u0430\u043a \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043b\u0430\u0437\u0435\u0439\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0432\u0430\u043c \u043e\u0431\u043e\u0439\u0442\u0438 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 React \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u0418\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0434\u0430\u0447\u0443 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0435\u0444\u043e\u0432.<\/p>\n\n\n\n<p>\u0421\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u0435\u0444\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d\u043d\u044b\u043c:<\/p>\n\n\n\n<ul><li>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u043e\u043a\u0443\u0441\u043e\u043c, \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u043b\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043c\u0435\u0434\u0438\u0430.<\/li><li>\u0418\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439.<\/li><li>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 DOM-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438.<\/li><\/ul>\n\n\n\n<p>\u0420\u0435\u0444\u044b \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React.createRef() \u0438 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u044e\u0442\u0441\u044f \u043a React-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0447\u0435\u0440\u0435\u0437 ref \u0430\u0442\u0440\u0438\u0431\u0443\u0442. \u041a\u043e\u0433\u0434\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 ref \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e current \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u0444\u0430 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e React.createRef() \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n\n\n\n<p>\u041a\u043e\u0433\u0434\u0430 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 ref \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e current \u043e\u0431\u044a\u0435\u043a\u0442\u0430-\u0440\u0435\u0444\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>\u041d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ref \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0434\u043b\u044f \u043d\u0438\u0445 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0445\u0443\u043a&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/hooks-reference.html#useref\">useRef&nbsp;<\/a>. \u0413\u043e\u0432\u043e\u0440\u044f \u043f\u0440\u043e\u0449\u0435 \u0440\u0435\u0444 \u044d\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043b\u0438\u0431\u043e \u043d\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class RefExample extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.ref = React.createRef();\n    }\n    handleClick = () =&gt; {\n        var color = Math.floor(Math.random() * 16777215).toString(16);\n        this.ref.current.style.color = `#${color}`;\n    }\n    render() {\n        return( \n            &lt;&gt;\n                &lt;h1 ref={this.ref}&gt;Hello world&lt;\/h1&gt;\n                &lt;button onClick={this.handleClick}&gt;Click me&lt;\/button&gt;\n            &lt;\/&gt;);\n    }\n}<\/code><\/pre>\n\n\n\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 this.ref \u044d\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 h1 \u2014 Hello world. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f handleClick \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 h1 \u0447\u0435\u0440\u0435\u0437 ref \u0438 \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n\n\n\n<p>\u0423\u0437\u043d\u0430\u0439\u0442\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u0420\u0435\u0444\u0430\u0445&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/refs-and-the-dom.html\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n\n\n\n<h3>2.4 ReactDOM<\/h3>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 React \u0438\u0437 react \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u043d\u0430\u0434 React \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u0442\u043e ReactDom \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n\n\n\n<p>\u041f\u043e\u0434 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n\n\n\n<p>\u041c\u0435\u0442\u043e\u0434\u044b, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0435 \u043f\u0430\u043a\u0435\u0442\u043e\u043c ReactDom:<\/p>\n\n\n\n<ul><li>render() \u2014 \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u0442 React-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442;<\/li><li>hydrate() \u2014 \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u0442 React-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f HTML-\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u044b\u043b\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e ReactDOMServer;<\/li><li>unmountComponentAtNode() \u2014 \u0423\u0434\u0430\u043b\u044f\u0435\u0442 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React \u0438\u0437 DOM \u0438 \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435;<\/li><li>createPortal() \u2014 \u0421\u043e\u0437\u0434\u0430\u0451\u0442 \u043f\u043e\u0440\u0442\u0430\u043b.<\/li><\/ul>\n\n\n\n<p>*\u0417\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u0430 findDOMNode() \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c \u0438 \u043d\u0435 \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u044f. \u041f\u043e\u0447\u0435\u043c\u0443 \u0435\u0433\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/strict-mode.html#warning-about-deprecated-finddomnode-usage\">\u0442\u0443\u0442<\/a>. \u0422\u0430\u043a\u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u0430 flushSync(), \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0438 \u0435\u0449\u0451 \u043d\u0435 \u0431\u044b\u043b \u0437\u0430\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d. \u0422\u0430\u043a\u0436\u0435 \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043c\u0435\u0442\u043e\u0434\u044b. \u0422\u0430\u043a\u0438\u0435 \u043a\u0430\u043a (unstable_renderSubtreeIntoContainer(), unstable_createPortal(), unstable_batchedUpdates(), unstable_interactiveUpdates(), unstable_createRoot(), unstable_flushControlled()). \u041d\u0443 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED \u2014 \u043b\u0438\u0447\u043d\u043e \u044f \u043d\u0435 \u0445\u043e\u0447\u0443 \u0431\u044b\u0442\u044c \u0443\u0432\u043e\u043b\u0435\u043d\u043d\u044b\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0431\u0443\u0434\u0443 \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \ud83d\ude00<\/p>\n\n\n\n<h4>2.4.1 Render<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>ReactDOM.render(element, container&#91;, callback])<\/code><\/pre>\n\n\n\n<p>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u0442 React-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 container \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 ReactComponent \u0438\u043b\u0438 null \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0435\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n\n\n\n<p>\u041b\u044e\u0431\u044b\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM container \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435.<br>\u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u2014 \u0435\u0441\u043b\u0438 \u0432\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0435 \u0432 DOM \u0443\u0437\u0435\u043b, \u0437\u0430\u0432\u0435\u0434\u043e\u043c\u043e \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0442\u043e \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u0438 \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u044b \u043d\u0430 element.<\/p>\n\n\n\n<p>\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0451\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0447\u0430\u0441\u0442\u044c DOM, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u044b\u043b \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u043b\u0431\u044d\u043a, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f.<\/p>\n\n\n\n<h4>2.4.2 Hydrate<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>ReactDOM.hydrate(element, container&#91;, callback])<\/code><\/pre>\n\n\n\n<p>\u0422\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0447\u0442\u043e \u0438 ReactDOM.render \u043d\u043e \u0434\u043b\u044f \u0441\u043b\u0443\u0447\u0430\u0435\u0432, \u043a\u043e\u0433\u0434\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u0445 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435&nbsp;<a href=\"https:\/\/habr.com\/ru\/company\/ruvds\/blog\/339148\/\">Server-Side Rendering<\/a>&nbsp;\u044f \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0442\u044c \u043d\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0432\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/react-dom-server.html\">ReactDOMServer<\/a>.<\/p>\n\n\n\n<p>React \u043e\u0436\u0438\u0434\u0430\u0435\u0442, \u0447\u0442\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435. \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u043e\u0432\u0435\u0440\u0445, \u043d\u043e \u0432\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043d\u0435\u0441\u0442\u044b\u043a\u043e\u0432\u043a\u0438 \u043a\u0430\u043a \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445.<\/p>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043d\u0435\u0438\u0437\u0431\u0435\u0436\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u043c\u0435\u0442\u043a\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438), \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 suppressHydrationWarning={true}. \u041e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043e\u0434\u0438\u043d \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432 \u0433\u043b\u0443\u0431\u0438\u043d\u0443, \u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u0430 \u043a\u0430\u043a \u043b\u0430\u0437\u0435\u0439\u043a\u0430. \u041d\u0435 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0439\u0442\u0435 \u0435\u044e.<\/p>\n\n\n\n<h4>2.4.3 UnmountComponentAtNode<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>ReactDOM.unmountComponentAtNode(container)<\/code><\/pre>\n\n\n\n<p>\u0423\u0434\u0430\u043b\u044f\u0435\u0442 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437&nbsp;<strong>container<\/strong>&nbsp;\u0438 \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0415\u0441\u043b\u0438 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043d\u0435 \u0431\u044b\u043b\u043e \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0432\u044b\u0437\u043e\u0432 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442. \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 true, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u044b\u043b \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d, \u0438 false \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041d\u0435 \u043f\u0435\u0440\u0435\u043f\u0443\u0442\u0430\u0439\u0442\u0435, container \u044d\u0442\u043e \u043d\u0435 React \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c, \u0430 DOM \u0443\u0437\u0435\u043b \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n\n\n\n<h4>2.4.4 CreatePortal<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>ReactDOM.createPortal(child, container)<\/code><\/pre>\n\n\n\n<p>\u041f\u043e\u0440\u0442\u0430\u043b\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 DOM-\u0443\u0437\u0435\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0435 DOM-\u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p>child \u2014 \u044d\u0442\u043e \u043b\u044e\u0431\u043e\u0439 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d<br>container \u2014 \u044d\u0442\u043e \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n\n\n\n<p>\u0427\u0442\u043e \u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u0440\u0442\u0430\u043b\u043e\u0432 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Welcome extends React.Component {\n    render() {\n        return &lt;div&gt;\n            &lt;p&gt;{this.props.children}&lt;\/p&gt;\n        &lt;\/div&gt;;\n    }\n}\n\nrender(&lt;Welcome&gt;\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0438\u0440!&lt;\/Welcome&gt;, document.getElementById(\"root\"));\n\n<em>\/\/ \u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0441 id root \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e  &lt;div&gt;\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0438\u0440!&lt;\/div&gt;<\/em><\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u0440\u0442\u0430\u043b, \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u043e \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u043e\u0447\u043d\u0435\u0435 \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Welcome extends React.Component {\n    render() {\n        return &lt;div&gt;\n            &lt;p&gt;{this.props.children}&lt;\/p&gt;\n            {createPortal(&lt;p&gt;{this.props.children}&lt;\/p&gt;, document.getElementById(\"app-root\"))}\n        &lt;\/div&gt;;\n    }\n}\n\nrender(&lt;Welcome&gt;\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0438\u0440!&lt;\/Welcome&gt;, document.getElementById(\"root\"));\n\n<em>\/\/ \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u0442\u044d\u0433 &lt;p&gt; \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u043d \u0432 #root, \u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u0432 #app-root<\/em><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/webt\/uf\/yx\/bs\/ufyxbsxpmr5yx1ncu6bgdxe8xuk.png\" alt=\"image\"\/><\/figure>\n\n\n\n<p>\u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u043e\u0442 \u043f\u043e\u0440\u0442\u0430\u043b\u0430 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434 \u043f\u043e\u0440\u0442\u0430\u043b\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0438 \u043d\u0435\u043a\u0438\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0422\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0431\u044b\u043b \u043b\u0438 \u044d\u0442\u043e\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u043e\u0440\u0442\u0430\u043b\u043e\u0432 \u0438\u043b\u0438 \u0431\u0435\u0437 \u043d\u0438\u0445. \u0422\u043e \u0435\u0441\u0442\u044c, \u043d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e \u0433\u0434\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0434\u0435\u0442\u0438, \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0434\u0430\u0436\u0435 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0432 html \u043e\u043d \u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043f\u043e\u0440\u0442\u0430\u043b\u043e\u0432.<\/p>\n\n\n\n<h2>3. Other topics<\/h2>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u044b \u043f\u0440\u043e\u0447\u0438\u0435 \u0442\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u043f\u043e\u043d\u044f\u0442\u0438\u044f\u043c React. \u0412 \u043e\u0431\u0449\u0435\u043c \u0442\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0432 \u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u043f\u0443\u043d\u043a\u0442\u0430&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section1\">1. Getting started with React<\/a>&nbsp;\u0438&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section2\">2. Basically React<\/a>&nbsp;\u0432\u044b \u0443\u0436\u0435 \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u043c\u0438 \u0437\u043d\u0430\u043d\u0438\u044f\u043c\u0438 \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 React.<\/p>\n\n\n\n<h3>3.1 Lists and Keys<\/h3>\n\n\n\n<p>\u041e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0446\u0435\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b\u0438 \u0430\u0432\u0442\u043e\u0440\u044b \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 React \u044d\u0442\u043e \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043b\u044e\u0434\u044c\u043c\u0438, \u0434\u043e\u043b\u0436\u043d\u044b \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u0435. \u042d\u0442\u043e\u0442 \u043f\u0430\u0442\u0435\u0440\u043d \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f (en. Composition).<\/p>\n\n\n\n<p>\u041e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043f\u0438\u0441\u043a\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u043c\u043d\u043e\u0436\u0438\u0442\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0431\u0449\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0434\u0440\u0443\u0437\u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0435 \u0438\u043b\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043a\u0443\u043f\u043e\u043a \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043c\u0430\u0433\u0430\u0437\u0438\u043d\u0435 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n\n\n\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u0440\u0443\u0437\u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0432 \u0441\u0430\u0439\u0434\u0431\u0430\u0440. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var users = &#91;\"Mike\", \"Bill\", \"Scott\"];\n\nfunction UsersList(props) {\n    const userlist = props.children.map((users) =&gt; &lt;p&gt;{users}&lt;\/p&gt;);\n    \n    return &lt;div&gt;{userlist}&lt;\/div&gt;;\n}\n\nrender(&lt;UsersList&gt;{users}&lt;\/UsersList&gt;, element);<\/code><\/pre>\n\n\n\n<p>\u0412 \u0433\u043b\u0430\u0432\u0435&nbsp;<a href=\"https:\/\/habr.com\/ru\/post\/461541\/#section235\">2.3.5 Lifecycle<\/a>&nbsp;\u043f\u0440\u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 render() \u0432\u044b \u0443\u0437\u043d\u0430\u043b\u0438, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u044b, \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b, \u043f\u043e\u0440\u0442\u0430\u043b\u044b, \u0441\u0442\u0440\u043e\u043a\u0438, \u0447\u0438\u0441\u043b\u0430, Booleans \u0438\u043b\u0438 null. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 React. \u042d\u0442\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043d\u043e \u043f\u0440\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435:<br>Warning: Each child in a list should have a unique \u00abkey\u00bb prop.<\/p>\n\n\n\n<p>\u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0435\u0431\u0435\u043d\u043a\u0430 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u00abkey\u00bb.<\/p>\n\n\n\n<p>Key \u044d\u0442\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041e\u043d \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b React \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 DOM \u0441 \u0442\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0414\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b React \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 DOM \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0441\u0442\u0430\u0442\u044c\u044e&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/reconciliation.html#the-diffing-algorithm\">\u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f<\/a>. \u041a\u043b\u044e\u0447\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Key \u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function UsersList(props) {\n    const userlist = props.children.map((users, index) =&gt; &lt;p key={index}&gt;{users}&lt;\/p&gt;);\n    \n    return &lt;div&gt;{userlist}&lt;\/div&gt;;\n}<\/code><\/pre>\n\n\n\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u043d\u0434\u0435\u043a\u0441\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 Key, \u043a\u0430\u043a \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043b\u043e\u0445\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u0432 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ID \u0438\u0437 \u0432\u0430\u0448\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041a\u043b\u044e\u0447\u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432 DOM \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445, \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 React \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0431\u0435\u0434\u0438\u0442\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u0432\u044b\u0437\u0432\u0430\u0432 \u043e\u0431\u044c\u0435\u043a\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e element.__reactInternalInstance$235y8cxv0e8 (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043b\u0435 $ \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0435 \u0447\u0438\u0441\u043b\u043e). element.__reactInternalInstance$235y8cxv0e8 \u2014 \u044d\u043a\u0441\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e, \u043d\u0435 \u043e\u043f\u0438\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u043d\u0435\u0433\u043e \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n\n\n\n<h3>3.2 Error Handling<\/h3>\n\n\n\n<p>\u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0441 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0446\u0435\u043b\u043e\u0433\u043e \u0440\u044f\u0434\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0448\u0438\u0431\u043e\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u043b\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 React \u0435\u0441\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0437\u0432\u0430\u043d\u044b \u043f\u043e\u043c\u043e\u0447\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0432 \u043f\u043e\u0438\u0441\u043a\u0435 \u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0442\u0430\u043a\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n\n\n\n<p>\u041e\u0448\u0438\u0431\u043a\u0430 JavaScript \u0433\u0434\u0435-\u0442\u043e \u0432 \u043a\u043e\u0434\u0435 UI \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u044b\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043e\u0442\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 JavaScript \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 \u0438\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0445 \u0432 \u0436\u0443\u0440\u043d\u0430\u043b\u0435 \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0432\u044b\u0432\u043e\u0434\u0430 \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0433\u043e UI \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0443\u0445\u043d\u0443\u0432\u0448\u0435\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041e\u043d\u0438 \u043e\u0442\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435, \u0432 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430\u0445 \u0434\u0435\u0440\u0435\u0432\u044c\u0435\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u0434 \u043d\u0438\u043c\u0438. \u041e\u0431\u044a\u0435\u043a\u0442\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0435 \u0442\u0430\u043a\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u00ab\u041f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u0438\u00bb. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u044f\u0445 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/error-boundaries.html#how-about-event-handlers\">Error Boundaries<\/a>. \u0420\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u043d\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u0435\u0441\u043b\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u0435\u0439, \u043e\u043d\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442 \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0432\u043c\u0435\u0441\u0442\u043e \u0440\u0443\u0445\u043d\u0443\u0432\u0448\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n\n\n\n<p>JavaScript \u044f\u0437\u044b\u043a \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043e\u0448\u0438\u0431\u043a\u0430\u043c. \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a&nbsp;<a href=\"https:\/\/flow.org\/\">Flow&nbsp;<\/a>\u0438\u043b\u0438&nbsp;<a href=\"https:\/\/www.typescriptlang.org\/\">TypeScript<\/a>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u0442\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u0435\u0449\u0451 \u0434\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043e\u043d\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u044e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u0430\u0432\u0442\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/static-type-checking.html\">Static Type Checking<\/a>.<\/p>\n\n\n\n<p>\u041d\u043e \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0432\u0440\u043e\u0434\u0435 Flow \u0438 TypeScript React \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u0438\u043f\u043e\u0432. \u042d\u0442\u043e&nbsp;<a href=\"https:\/\/ru.reactjs.org\/docs\/typechecking-with-proptypes.html\">\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0442\u0438\u043f\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e PropTypes<\/a>. \u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0440\u043e\u043f\u0441\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e propTypes:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class PropTypesExample extends React.Component {\n    render() {\n        return &lt;h1&gt;\u041f\u0440\u0438\u0432\u0435\u0442, {this.props.name}&lt;\/h1&gt;;\n    }\n}\n  \nPropTypesExample.propTypes = {\n    name: PropTypes.string\n};\nReactDom.render(&lt;PropTypesExample name={5} \/&gt;, element);<\/code><\/pre>\n\n\n\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0435\u0441\u043b\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0447\u0438\u0441\u043b\u043e (\u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435), \u0442\u043e \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435:&nbsp;<strong>Warning: Failed prop type: Invalid prop `name` of type `number` supplied to `PropTypesExample`, expected `string`.<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>\u0421 \u0432\u0435\u0440\u0441\u0438\u0438 React 15.5 React.PropTypes \u0431\u044b\u043b\u0438 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u044b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442. \u0422\u0430\u043a \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/prop-types\">\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 prop-types<\/a><\/p><\/blockquote>\n\n\n\n<p>\u0422\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0442\u0430\u043d\u0446\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0421\u0442\u0440\u043e\u0433\u0438\u0439 \u0440\u0435\u0436\u0438\u043c (StrictMode). \u0422\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 Fragment, StrictMode \u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e UI. \u0421\u0442\u0440\u043e\u0433\u0438\u0439 \u0440\u0435\u0436\u0438\u043c \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432.<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Example() {\n    return (\n        &lt;React.StrictMode&gt;\n            &lt;h1&gt;Hello, world!&lt;\/h1&gt;\n        &lt;\/React.StrictMode&gt;\n    );\n}\nrender(&lt;Example \/&gt;, element); <\/code><\/pre>\n\n\n\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443&nbsp;<a href=\"https:\/\/testing-library.com\/docs\/react-testing-library\/intro\">React Testing Library<\/a>&nbsp;\u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0442\u0435\u0441\u0442\u043e\u0432. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f&nbsp;<a href=\"https:\/\/enzymejs.github.io\/enzyme\/\">Enzyme<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 React (<a href=\"https:\/\/ru.reactjs.org\/docs\/testing.html\">Testing<\/a>) \u0447\u0442\u043e \u0431\u044b \u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u0442\u0435\u0441\u0442\u0430\u0445.<\/p>\n\n\n\n<h4>3.2.1 getDerivedStateFromError<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>static getDerivedStateFromError(error)<\/code><\/pre>\n\n\n\n<p>\u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u043e\u0448\u0438\u0431\u043a\u0438 \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-\u043f\u043e\u0442\u043e\u043c\u043a\u0430. \u041e\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<br>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u043c\u0435\u0441\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043d\u0435 \u043e\u0442\u043b\u043e\u0432\u044f\u0442 \u043e\u0448\u0438\u0431\u043a\u0438: \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u043c \u043a\u043e\u0434\u0435, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435, \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0442\u043e \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u043e\u0432\u043b\u0435\u043d\u0430 \u0438 \u0432\u044b\u0437\u0432\u0430\u043d\u044b \u043c\u0435\u0442\u043e\u0434\u044b static getDerivedStateFromError() \u0438 componentDidCatch().<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class App extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = { error: false };\n    }\n    static getDerivedStateFromError(error) {\n        <em>\/\/ \u041f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430!!!<\/em>\n\n        return {error: true};\n    }\n    render() {\n        if(this.state.error) { <em>\/\/ \u041f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430<\/em>\n            return &lt;h1&gt;\u0427\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a.&lt;\/h1&gt;; <em>\/\/ \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0433\u043e UI<\/em>\n        }\n        <em>\/\/ \u041e\u0448\u0438\u0431\u043a\u0438 \u043d\u0435\u0442<\/em>\n            return &lt;Welcome&gt;{this.props.children}&lt;\/Welcome&gt;; <em>\/\/ \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e<\/em>\n    }\n}\n\nReactDom.render(&lt;App&gt;Hello world&lt;\/App&gt;, document.getElementById(\"root\"));\n\n<em>\/\/ \u0415\u0441\u043b\u0438 \u0432 &lt;Welcome&gt; \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d getDerivedStateFromError<\/em><\/code><\/pre>\n\n\n\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 React 16, \u043e\u0448\u0438\u0431\u043a\u0438, \u043d\u0435 \u043e\u0442\u043b\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0438 \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043f\u0440\u0435\u0434\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435\u043b\u0435\u0439, \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0432\u0441\u0435\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 React.<\/p>\n\n\n\n<h4>3.2.2 componentDidCatch<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>componentDidCatch(error, info)<\/code><\/pre>\n\n\n\n<p>\u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0438 getDerivedStateFromError \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 getDerivedStateFromError. \u0415\u0441\u043b\u0438 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 getDerivedStateFromError \u044d\u0442\u043e \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0442\u043e \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 componentDidCatch \u044d\u0442\u043e \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a. \u0422\u043e \u0435\u0441\u0442\u044c \u0432 componentDidCatch \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0434\u043b\u044f \u0436\u0443\u0440\u043d\u0430\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 \u043e\u0442\u043b\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0435.<\/p>\n\n\n\n<p>\u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430:<br>error \u2014 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430<br>info \u2014 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043a\u043b\u044e\u0447\u043e\u043c componentStack, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430.<\/p>\n\n\n\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u044f\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u0435\u0442\u043e\u0434\u043e\u043c componentDidCatch \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class App extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = { error: false };\n    }\n    static getDerivedStateFromError(error) {\n        <em>\/\/ \u041f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430!!!<\/em>\n\n        return {error: true};\n    }\n    componentDidCatch(error, info) {\n        console.info(info.componentStack); <em>\/\/ \u0412\u044b\u0432\u043e\u0434 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u0442\u0435\u043a\u0430 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c<\/em>\n        console.error(error); <em>\/\/ \u0412 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435 \u044d\u0442\u0438\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 console \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c!!!<\/em>\n\n        logComponentStackToMyService(info.componentStack); <em>\/\/ \u041c\u0435\u0442\u043e\u0434 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043e\u0448\u0438\u0431\u043a\u0443<\/em>\n    }\n    render() {\n        if(this.state.error) { <em>\/\/ \u041f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430<\/em>\n            return &lt;h1&gt;\u0427\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a.&lt;\/h1&gt;; <em>\/\/ \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0430\u0441\u043d\u043e\u0433\u043e UI<\/em>\n        }\n        <em>\/\/ \u041e\u0448\u0438\u0431\u043a\u0438 \u043d\u0435\u0442<\/em>\n            return &lt;Welcome&gt;{this.props.children}&lt;\/Welcome&gt;; <em>\/\/ \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e<\/em>\n    }\n}\nReactDom.render(&lt;App&gt;Hello world&lt;\/App&gt;, document.getElementById(\"root\"));<\/code><\/pre>\n\n\n\n<p>\u041c\u0435\u0442\u043e\u0434\u044b console \u0431\u044b\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0442\u043e \u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043e\u0448\u0438\u0431\u043a\u0438. \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/webt\/re\/1j\/v_\/re1jv_xvp1sucdsomnlo-bzwgs4.png\" alt=\"image\"\/><\/figure>\n\n\n\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n\n\n\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0447\u0442\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u043c\u043e\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u00ab\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 React\u00bb. \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e) \u0442\u0435\u043c\u044b \u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 React. \u041f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u0431\u043b\u0430\u0434\u0430\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u043e\u043c \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u043e React \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u042f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0432 \u043e\u0441\u0432\u043e\u0435\u043d\u0438\u0438 React&#8217;\u0430. \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0437\u043d\u0430\u043d\u0438\u0439 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u043e\u043b\u044c\u043a\u043e React \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043d\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u0412\u044b \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0443\u0447\u0443 \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u0414\u0430 \u0438 \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0440\u0430\u0431\u043e\u0442\u0443 (\u0437\u0430\u0447\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434) \u0435\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u0443\u0436\u0435 \u0435\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0451\u043b. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u00a0<a href=\"https:\/\/redux.js.org\/\">Redux\u00a0<\/a>\u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c,\u00a0<a href=\"https:\/\/reacttraining.com\/react-router\/web\/guides\/philosophy\">React Router<\/a>\u00a0\u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f URL-\u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438,\u00a0<a href=\"https:\/\/github.com\/axios\/axios\">Axios<\/a>\u00a0\u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432,\u00a0<a href=\"https:\/\/graphql.org\/graphql-js\/\">GraphQL JS<\/a>\u00a0\u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u043b\u044f API, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0440\u0443\u0433\u0438\u0445 API. \u041f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u043a\u0430\u043a\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0432\u044b.<\/p>\n\n\n\n<p>\u041e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e Hooks API \u0434\u043b\u044f React \u0438\u0437\u00a0<a href=\"https:\/\/github.com\/topics\/react-hooks\">GitHub<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React&nbsp;\u2014 JavaScript-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2070"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2070"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2070\/revisions"}],"predecessor-version":[{"id":2071,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2070\/revisions\/2071"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}