{"id":365168,"date":"2024-05-21T02:32:23","date_gmt":"2024-05-21T02:32:23","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=365168"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-21T02:32:23","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=365168","title":{"rendered":"<span>\u0414\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u0439 React. \u0420\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u044f\u0446\u0438\u044f, \u0440\u0435\u043d\u0434\u0435\u0440\u044b, Fiber, \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8fd\/d07\/576\/8fdd0757658fe6f5bfc22d6c6915c210.png\" width=\"1024\" height=\"1024\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8fd\/d07\/576\/8fdd0757658fe6f5bfc22d6c6915c210.png\"\/><\/figure>\n<p>\u0412 \u0441\u0435\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0430\u0442\u0435\u0439, \u043c\u0430\u043d\u0443\u0430\u043b\u043e\u0432 \u0438 \u043a\u043d\u0438\u0433 \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u043c React, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c HelloWorld \u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043e\u0431\u0449\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438, \u043a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u0438 \u043a\u0430\u043a, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0435\u0451 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e.<\/p>\n<p>\u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f React\u00a0<a href=\"https:\/\/github.com\/facebook\/react\/releases\/tag\/v18.2.0\" rel=\"noopener noreferrer nofollow\">18.2.0<\/a>. \u0417\u0430 10 \u043b\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Facebook \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b\u0438 \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u044b, \u0431\u044b\u043b\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0444\u0438\u0447 \u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043d\u0435 \u043c\u0430\u043b\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439. \u0417\u0430 \u044d\u0442\u0438 \u0433\u043e\u0434\u044b, \u0442\u0430\u043a \u0436\u0435, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u0438 \u0438 \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u0430\u043b\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u044e \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 React, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u0430\u043d\u043d\u0430\u044f \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432 \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 React. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<h3>\u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u043a\u043e\u0432\u044b\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u043c \u0434\u043b\u044f \u043c\u0430\u0448\u0438\u043d\u044b React. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043d\u0430\u0439\u0434\u0435\u043c \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 React \u044d\u0442\u043e \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e.<\/p>\n<p>\u0411\u0435\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0432\u0441\u0435 \u0442\u0430\u043a, \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0439 React-\u043a\u043e\u0434 \u0434\u043b\u044f Web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">import ReactDOM from 'react-dom\/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(&lt;div>My React App&lt;\/div>);<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0430\u043a\u0435\u0442\u00a0<code>react-dom\/client<\/code>\u00a0\u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f Root-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438, \u0434\u0430\u043b\u0435\u0435, \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u00a0<code>DIV<\/code>-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u043f\u0443\u0441\u043a\u043e\u0432\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c React, \u0442\u043e\u0447\u043d\u0435\u0435, \u0437\u0434\u0435\u0441\u044c \u0438\u0445 \u0441\u0440\u0430\u0437\u0443 \u0434\u0432\u0430: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c\u00a0<code>createRoot<\/code>, \u0438 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u041d\u043e \u043e\u0431\u043e \u0432\u0441\u0435\u043c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443.<\/p>\n<h3>\u0420\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u044f\u0446\u0438\u044f<\/h3>\n<p>\u041a\u0430\u043a \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u0438\u0437 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u043f\u0430\u0434\u0443\u0442 \u0432 DOM, React \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u043c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0435. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e, \u0443\u0436\u0435 \u044d\u0442\u043e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e &#171;\u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442&#187; \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 DOM. \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c DOM \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u044f\u0446\u0438\u0435\u0439.<\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0443 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u0433\u0434\u0435 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 UI \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u0432\u0435\u0434\u0435\u043d (\u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u043b\u0438 \u0444\u0430\u0439\u043b). \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0441\u0430\u043c React \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432 Web, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 (SSR), \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 (React Native) \u0438 \u0434\u0440.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0432\u044f\u0437\u0438, \u043a\u043e\u043c\u0430\u043d\u0434\u0430 React \u0432\u044b\u0434\u0435\u043b\u0438\u043b\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442\u00a0<code>react-reconcile<\/code>\u00a0\u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0435\u043a\u043e\u0435\u0433\u043e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0433\u043e API. \u041e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0434\u0432\u0443\u0445 \u0440\u0435\u0436\u0438\u043c\u0430\u0445:<\/p>\n<ul>\n<li>\n<p><strong>Mutation mode<\/strong>\u00a0&#8212; \u0434\u043b\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0445 \u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e (\u0442.\u0435. \u0438\u043c\u0435\u044e\u0442 \u043c\u0435\u0442\u043e\u0434\u044b, \u0441\u0445\u043e\u0436\u0438\u0435 \u0441\u00a0<code>appendChild<\/code>\/<code>removeChild<\/code>)<\/p>\n<\/li>\n<li>\n<p><strong>Persistent mode<\/strong>\u00a0&#8212; \u0434\u043b\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c \u0441 \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u044f\u043c\u0438. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u0432\u0441\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u0441\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0430\u043c \u044d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u043d\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u043a DOM, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u043f\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0421\u0430\u043c\u0430 \u0436\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043a DOM \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0435\u0433\u043e API \u043f\u0430\u043a\u0435\u0442\u0430\u00a0<code>react-reconciler<\/code>. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u043c \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0444\u043b\u0430\u0433\u043e\u0432-\u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432-\u043a\u043e\u043b\u0431\u044d\u043a\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a\u00a0<code>createInstance<\/code>,\u00a0<code>appendChild<\/code>,\u00a0<code>removeChild<\/code>\u00a0\u0438 \u0434\u0440.. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c.\u00a0<\/p>\n<h3>\u0420\u0435\u043d\u0434\u0435\u0440\u044b<\/h3>\n<p>\u041f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0435 API \u043f\u0430\u043a\u0435\u0442\u0430\u00a0<code>react-reconciler<\/code>, \u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u044b. \u0422\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043f\u0430\u043a\u0435\u0442\u00a0<code>react-reconciler<\/code>\u00a0\u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0441\u044f \u043a\u0430\u043a \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 API, \u043d\u043e, \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432 2017-\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e \u043d\u0435\u043c\u0443 \u0432\u0435\u0434\u0443\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e, \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u043f\u0430\u043a\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f\u00a0<em>unstable<\/em>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441\u0442\u043e\u0438\u0442 \u0441 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>\u0421\u0430\u043c \u0436\u0435 React \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 &#171;\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438&#187;.<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/main\/packages\/react-dom\/src\/client\/ReactDOM.js\" rel=\"noopener noreferrer nofollow\">React DOM<\/a>\u00a0&#8212; \u044d\u0442\u043e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440 \u043c\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435. \u041e\u043d \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u043a DOM-\u0434\u0435\u0440\u0435\u0432\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\" rel=\"noopener noreferrer nofollow\">React Native<\/a>\u00a0&#8212; \u044d\u0442\u043e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-art\/src\/ReactART.js\" rel=\"noopener noreferrer nofollow\">React ART<\/a>\u00a0&#8212; \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 React. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u043e\u0439 \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438\u00a0<a href=\"https:\/\/github.com\/sebmarkbage\/art\/\" rel=\"noopener noreferrer nofollow\">ART<\/a>.<\/p>\n<\/li>\n<\/ul>\n<h3>Fiber<\/h3>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u0432\u0438\u043d\u0443\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435, \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u0432\u0438\u0436\u043a\u0430 React.<\/p>\n<p><strong>Fiber<\/strong>\u00a0&#8212; \u044d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 React, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0437\u0430\u0434\u0430\u0447\u0443 (&#171;\u0440\u0430\u0431\u043e\u0442\u0443&#187;), \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0434\u0432\u0438\u0436\u043e\u043a \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b \u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u0438\u043b\u0438 \u0443\u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b.<\/p>\n<p>\u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u0442\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442\u00a0<code>react-reconciler<\/code>, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u0447\u0443\u0442\u044c \u0432\u044b\u0448\u0435.<\/p>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-reconciler\/src\/ReactInternalTypes.js#L67\" rel=\"noopener noreferrer nofollow\">\/packages\/react-reconciler\/src\/ReactInternalTypes.js#L67<\/a><\/p>\n<pre><code class=\"javascript\">\/\/ A Fiber is work on a Component that needs to be done or was done. There can \/\/ be more than one per component. export type Fiber = {   \/\/ These first fields are conceptually members of an Instance. This used to   \/\/ be split into a separate type and intersected with the other Fiber fields,   \/\/ but until Flow fixes its intersection bugs, we've merged them into a   \/\/ single type.      \/\/ An Instance is shared between all versions of a component. We can easily   \/\/ break this out into a separate object to avoid copying so much to the   \/\/ alternate versions of the tree. We put this on a single object for now to   \/\/ minimize the number of objects created during the initial render.   \/\/ Tag identifying the type of fiber.   tag: WorkTag,      \/\/ Unique identifier of this child.   key: null | string,      \/\/ The value of element.type which is used to preserve the identity during   \/\/ reconciliation of this child.   elementType: any,      \/\/ The resolved function\/class\/ associated with this fiber.   type: any,      \/\/ The local state associated with this fiber.   stateNode: any,      \/\/ Conceptual aliases   \/\/ parent : Instance -> return The parent happens to be the same as the   \/\/ return fiber since we've merged the fiber and instance.      \/\/ Remaining fields belong to Fiber      \/\/ The Fiber to return to after finishing processing this one.   \/\/ This is effectively the parent, but there can be multiple parents (two)   \/\/ so this is only the parent of the thing we're currently processing.   \/\/ It is conceptually the same as the return address of a stack frame.   return: Fiber | null,    \/\/ Singly Linked List Tree Structure.   child: Fiber | null,   sibling: Fiber | null,   index: number,    \/\/ The ref last used to attach this node.   \/\/ I'll avoid adding an owner field for prod and model that as functions.   ref:     | null     | (((handle: mixed) => void) &amp; {_stringRef: ?string, ...})     | RefObject,      refCleanup: null | (() => void),    \/\/ Input is the data coming into process this fiber. Arguments. Props.   pendingProps: any, \/\/ This type will be more specific once we overload the tag.   memoizedProps: any, \/\/ The props used to create the output.    \/\/ A queue of state updates and callbacks.   updateQueue: mixed,    \/\/ The state used to create the output   memoizedState: any,    \/\/ Dependencies (contexts, events) for this fiber, if it has any   dependencies: Dependencies | null,    \/\/ Bitfield that describes properties about the fiber and its subtree. E.g.   \/\/ the ConcurrentMode flag indicates whether the subtree should be async-by-   \/\/ default. When a fiber is created, it inherits the mode of its   \/\/ parent. Additional flags can be set at creation time, but after that the   \/\/ value should remain unchanged throughout the fiber's lifetime, particularly   \/\/ before its child fibers are created.   mode: TypeOfMode,    \/\/ Effect   flags: Flags,   subtreeFlags: Flags,   deletions: Array&lt;Fiber> | null,    \/\/ Singly linked list fast path to the next fiber with side-effects.   nextEffect: Fiber | null,    \/\/ The first and last fiber with side-effect within this subtree. This allows   \/\/ us to reuse a slice of the linked list when we reuse the work done within   \/\/ this fiber.   firstEffect: Fiber | null,   lastEffect: Fiber | null,    lanes: Lanes,   childLanes: Lanes,    \/\/ This is a pooled version of a Fiber. Every fiber that gets updated will   \/\/ eventually have a pair. There are cases when we can clean up pairs to save   \/\/ memory if we need to.   alternate: Fiber | null,    \/\/ Time spent rendering this Fiber and its descendants for the current update.   \/\/ This tells us how well the tree makes use of sCU for memoization.   \/\/ It is reset to 0 each time we render and only updated when we don't bailout.   \/\/ This field is only set when the enableProfilerTimer flag is enabled.   actualDuration?: number,    \/\/ If the Fiber is currently active in the \"render\" phase,   \/\/ This marks the time at which the work began.   \/\/ This field is only set when the enableProfilerTimer flag is enabled.   actualStartTime?: number,    \/\/ Duration of the most recent render time for this Fiber.   \/\/ This value is not updated when we bailout for memoization purposes.   \/\/ This field is only set when the enableProfilerTimer flag is enabled.   selfBaseDuration?: number,    \/\/ Sum of base times for all descendants of this Fiber.   \/\/ This value bubbles up during the \"complete\" phase.   \/\/ This field is only set when the enableProfilerTimer flag is enabled.   treeBaseDuration?: number,    \/\/ Conceptual aliases   \/\/ workInProgress : Fiber ->  alternate The alternate used for reuse happens   \/\/ to be the same as work in progress.   \/\/ DEV only   _debugSource?: Source | null,   _debugOwner?: Fiber | null,   _debugIsCurrentlyTiming?: boolean,   _debugNeedsRemount?: boolean,    \/\/ Used to verify that the order of hooks does not change between renders.   _debugHookTypes?: Array&lt;HookType> | null, };<\/code><\/pre>\n<p>\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0438\u0445 \u0432\u0441\u0435, \u043d\u043e \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0442\u0435, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u043d\u0430\u043c \u043f\u043e\u043d\u044f\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0432\u0438\u0436\u043a\u0430.<\/p>\n<h4>tag<\/h4>\n<p>\u0412\u0430\u0436\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043d\u0430 \u0442\u0438\u043f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u0445 \u0432\u0441\u0435\u0433\u043e 28 \u0448\u0442\u0443\u043a<\/p>\n<pre><code class=\"javascript\">export const FunctionComponent = 0; export const ClassComponent = 1; export const IndeterminateComponent = 2; \/\/ Before we know whether it is function or class export const HostRoot = 3; \/\/ Root of a host tree. Could be nested inside another node. export const HostPortal = 4; \/\/ A subtree. Could be an entry point to a different renderer. export const HostComponent = 5; export const HostText = 6; export const Fragment = 7; export const Mode = 8; export const ContextConsumer = 9; export const ContextProvider = 10; export const ForwardRef = 11; export const Profiler = 12; export const SuspenseComponent = 13; export const MemoComponent = 14; export const SimpleMemoComponent = 15; export const LazyComponent = 16; export const IncompleteClassComponent = 17; export const DehydratedFragment = 18; export const SuspenseListComponent = 19; export const ScopeComponent = 21; export const OffscreenComponent = 22; export const LegacyHiddenComponent = 23; export const CacheComponent = 24; export const TracingMarkerComponent = 25; export const HostHoistable = 26; export const HostSingleton = 27;<\/code><\/pre>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e, \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438\u00a0<strong>tag<\/strong>\u00a0\u0440\u0430\u0432\u0435\u043d\u00a0<code>IndeterminateComponent<\/code>, \u0442.\u043a. \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u043d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 Fiber. \u041f\u043e\u0437\u0436\u0435, tag \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u043e, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0435\u0433\u043e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<h4>key<\/h4>\n<p>\u0422\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 React key, \u0431\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435 \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0438 \u043e\u0434\u0438\u043d \u043c\u0430\u0441\u0441\u0438\u0432 (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u0441\u0441\u0438\u0432)<\/p>\n<h4>type<\/h4>\n<p>\u041d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0442\u0438\u043f Fiber. \u0422\u0443\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u044d\u0433 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0438\u043c\u0432\u043e\u043b-\u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0445\u0443\u043a, \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n<h4>stateNode<\/h4>\n<p>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u043d\u043e\u0434\u0443 \u0432 DOM-\u0434\u0435\u0440\u0435\u0432\u0435.<\/p>\n<h4>child, sibling, index<\/h4>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u0438\u043d\u0434\u0435\u043a\u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u044d\u0442\u043e\u0433\u043e Fiber \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435 (\u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0441\u0430\u043c Fiber \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0430)<\/p>\n<p>\u042d\u0442\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430\u00a0<a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A1%D0%B2%D1%8F%D0%B7%D0%BD%D1%8B%D0%B9_%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA#%D0%9E%D0%B4%D0%BD%D0%BE%D1%81%D0%B2%D1%8F%D0%B7%D0%BD%D1%8B%D0%B9_%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_(%D0%BE%D0%B4%D0%BD%D0%BE%D0%BD%D0%B0%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9_%D1%81%D0%B2%D1%8F%D0%B7%D0%BD%D1%8B%D0%B9_%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA)\" rel=\"noopener noreferrer nofollow\">\u041b\u0438\u043d\u0435\u0439\u043d\u044b\u0439 \u043e\u0434\u043d\u043e\u0441\u0432\u044f\u0437\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a<\/a>.\u00a0<\/p>\n<h4>ref<\/h4>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e ref, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/p>\n<h4>pendingProps, memoizedProps<\/h4>\n<p>\u0421\u043b\u0435\u043f\u043a\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 props.<\/p>\n<ul>\n<li>\n<p><u>memoizedProps<\/u>\u00a0&#8212; \u0441\u0442\u0430\u0440\u044b\u0435 (\u0442\u0435\u043a\u0443\u0449\u0438\u0435) \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<li>\n<p><u>pendingProps<\/u>\u00a0&#8212; \u043d\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043e\u043d\u0438 \u0438 \u0431\u0443\u0434\u0443\u0442, \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c, \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430<\/p>\n<h4>memoizedState<\/h4>\n<p>\u0422\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442\u00a0<code>pendingProps<\/code>\/<code>memoizedProps<\/code>, \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0435\u0442 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0435, \u0442.\u043a. \u043e\u043d\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0432\u043d\u0435, \u0430 &#171;\u0436\u0438\u0432\u0435\u0442&#187; \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0421\u043b\u0435\u043f\u043e\u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u043d \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0444\u0430\u0437\u044b render, \u043f\u0440\u0438 \u0447\u0435\u043c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \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 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0439.<\/p>\n<h4>flags, subtreeFlags<\/h4>\n<p>32-\u0431\u0438\u0442\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e Fiber \u0438 \u0435\u0433\u043e \u0434\u0435\u0442\u0435\u0439, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u043a\u043e\u0439 \u0434\u043b\u044f \u043d\u0430\u0431\u043e\u0440\u0430 \u0444\u043b\u0430\u0433\u043e\u0432, \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0445 \u0444\u0430\u0437\u0443\/\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0442\u0435\u043ae\u0449\u0435\u0433\u043e Fiber. \u041f\u0440\u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u0435 \u0434\u0435\u0440\u0435\u0432\u0430, \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u0432\u0438\u0436\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0444\u043b\u0430\u0433\u0438 \u0442\u0435\u043c \u0438\u043b\u0438 \u0438\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438 \u0443\u0432\u043e\u0434\u0438\u0442\u044c Fiber \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0432\u0435\u0442\u043a\u0443\u044e.<\/p>\n<h4>deletions<\/h4>\n<p>\u041c\u0430\u0441\u0441\u0438\u0432 Fiber-\u043e\u0432, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0438\u0445 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438\u0437 \u0434\u0435\u0440\u0435\u0432\u0430.<\/p>\n<h4>nextEffect<\/h4>\n<p>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 Fiber, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 side-effect (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0445\u0443\u043a). \u041a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u00a0<strong>child<\/strong>, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430\u00a0<a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A1%D0%B2%D1%8F%D0%B7%D0%BD%D1%8B%D0%B9_%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA#%D0%9E%D0%B4%D0%BD%D0%BE%D1%81%D0%B2%D1%8F%D0%B7%D0%BD%D1%8B%D0%B9_%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_(%D0%BE%D0%B4%D0%BD%D0%BE%D0%BD%D0%B0%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9_%D1%81%D0%B2%D1%8F%D0%B7%D0%BD%D1%8B%D0%B9_%D1%81%D0%BF%D0%B8%D1%81%D0%BE%D0%BA)\" rel=\"noopener noreferrer nofollow\">\u041b\u0438\u043d\u0435\u0439\u043d\u044b\u0439 \u043e\u0434\u043d\u043e\u0441\u0432\u044f\u0437\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a<\/a>.\u00a0<\/p>\n<h4>firstEffect, lastEffect<\/h4>\n<p>\u041f\u0435\u0440\u0432\u044b\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 Fiber-\u044b, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 side-effect \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u0435.\u00a0<\/p>\n<h4>lanes, childLanes<\/h4>\n<p>32-\u0431\u0438\u0442\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u0434\u043b\u044f \u0441\u0430\u043c\u043e\u0433\u043e Fiber \u0438 \u0435\u0433\u043e \u0434\u0435\u0442\u0435\u0439, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 Fiber \u0432 \u043a\u0430\u043a\u0443\u044e-\u043b\u0438\u0431\u043e \u043f\u043e\u043b\u043e\u0441\u0443. \u041d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u0447. \u0417\u0430\u0434\u0430\u0447\u0438 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u043b\u043e\u0441 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b \u043f\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044e \u043a \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u043e\u043b\u043e\u0441\u0430\u043c, \u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c.<\/p>\n<h4>alternate<\/h4>\n<p>\u041e\u0434\u043d\u043e \u0438\u0437 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 Fiber. \u0417\u0434\u0435\u0441\u044c \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u043a\u043e\u043f\u0438\u044f \u0441\u0430\u043c\u043e\u0433\u043e Fiber \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0444\u0430\u0437\u044b\u00a0<em>render<\/em>. \u0412\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0432 \u044d\u0442\u043e\u0439 \u043a\u043e\u043f\u0438\u0438. \u0421\u0430\u043c Fiber \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d \u0432 \u0444\u0430\u0437\u0435\u00a0<em>commit<\/em>.<\/p>\n<h3>FiberRoot<\/h3>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Root-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c, \u0432 React \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0438\u043f FiberRoot.<\/p>\n<p>\u0421\u043e\u0441\u0442\u0430\u0432 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u043e\u0441\u0442\u0430\u0432\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 Fiber, \u0437\u0434\u0435\u0441\u044c \u0438\u0445 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 Suspence, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0432\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430.<\/p>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-reconciler\/src\/ReactInternalTypes.js#L334\" rel=\"noopener noreferrer nofollow\">\/packages\/react-reconciler\/src\/ReactInternalTypes.js#L334<\/a><\/p>\n<pre><code class=\"javascript\">export type FiberRoot = {   ...BaseFiberRootProperties,   ...SuspenseCallbackOnlyFiberRootProperties,   ...UpdaterTrackingOnlyFiberRootProperties,   ...TransitionTracingOnlyFiberRootProperties,   ... };<\/code><\/pre>\n<p>\u0418\u0437 \u0432\u0441\u0435\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 FiberRoot, \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043d\u0430\u043c \u0431\u0443\u0434\u0443\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435<\/p>\n<h4>tag<\/h4>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e Fiber, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0443\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/p>\n<pre><code class=\"javascript\">export const LegacyRoot = 0; export const ConcurrentRoot = 1;<\/code><\/pre>\n<p><u>LegacyRoot<\/u>\u00a0&#8212; \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0412\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u0432\u0435\u0440\u0441\u0438\u0438 React 17 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u043b\u0441\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430\u00a0<code>render<\/code><\/p>\n<pre><code class=\"javascript\">import ReactDOM from 'react-dom'; ReactDOM.render(&lt;div>My React App&lt;\/div>, document.getElementById('root'));<\/code><\/pre>\n<p>\u0421 \u0432\u0435\u0440\u0441\u0438\u0438 React 18 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c \u0438 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 createRoot, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0442\u0438\u043f\u0430\u00a0<u>ConcurrentRoot<\/u>, \u0440\u0430\u0431\u043e\u0442\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0441\u0442\u0430\u0440\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0438, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u0436\u0438\u043c Suspense.<\/p>\n<h4>current<\/h4>\n<p>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 Fiber, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0439\u0441\u044f, \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u0440\u0430\u0431\u043e\u0442\u0435. \u0421\u0441\u044b\u043b\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e \u043c\u0435\u0440\u0435 \u043e\u0431\u0445\u043e\u0434\u0430 \u0434\u0435\u0440\u0435\u0432\u0430 \u043f\u0430\u043a\u0435\u0442\u043e\u043c\u00a0<code>react-reconciler<\/code>.<\/p>\n<h4>pendingLanes, suspendedLanes, pingedLanes, expiredLanes, errorRecoveryDisabledLanes, finishedLanes<\/h4>\n<p>\u0420\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0444\u043b\u0430\u0433\u0438 \u043f\u043e\u043b\u043e\u0441, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.\u00a0<\/p>\n<h3>\u0416\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b<\/h3>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 Root-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/h4>\n<p>\u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u0443<\/p>\n<pre><code class=\"javascript\">import ReactDOM from 'react-dom\/client'; const root = ReactDOM.createRoot(document.getElementById('root'));<\/code><\/pre>\n<p>\u0412\u044b\u0437\u044b\u0432\u0430\u044f \u043c\u0435\u0442\u043e\u0434\u00a0<code>createRoot<\/code>\u00a0\u0440\u0435\u043d\u0434\u0435\u0440\u0430\u00a0<code>ReactDOM<\/code>, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u00a0<code>FiberRoot<\/code><\/p>\n<pre><code class=\"javascript\">root: FiberRootNode {   callbackNode: null,   callbackPriority: 0,   containerInfo: div#root,   context: null,   current: FiberNode {     actualDuration: 0,     actualStartTime: -1,     alternate: null,     child: null,     childLanes: 0,     deletions: null,     dependencies: null,     elementType: null,     flags: 0,     index: 0,     key: null,     lanes: 0,     memoizedProps: null,     memoizedState: {       element: null,       isDehydrated: false,       cache: null,       transitions: null,       pendingSuspenseBoundaries: null,     },     mode: 3,     pendingProps: null,     ref: null,     return: null,     selfBaseDuration: 0,     sibling: null,     stateNode: {\/* ref to the FiberRootNode *\/},     subtreeFlags: 0,     tag: 3,     treeBaseDuration: 0,     type: null,     updateQueue: {       baseState: {         cache: null,         element: null,         isDehydrated: false,         pendingSuspenseBoundaries: null,         transitions: null,       },       firstBaseUpdate: null,       lastBaseUpdate: null,       shared: {         interleaved: null,         lanes: 0,         pending: null,       },       effects: null,     },     _debugHookTypes: null,     _debugNeedsRemount: false,     _debugOwner: null,     _debugSource: null   },   effectDuration: 0,   entangledLanes: 0,   entanglements: (31) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],   eventTimes: (31) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],   expirationTimes: (31) [-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1],   expiredLanes: 0,   finishedLanes: 0,   finishedWork: null,   identifierPrefix: \"\",   memoizedUpdaters: Set(0) {size: 0},   mutableReadLanes: 0,   mutableSourceEagerHydrationData: null,   onRecoverableError: \u0192 reportError(),   passiveEffectDuration: 0,   pendingChildren: null,   pendingContext: null,   pendingLanes: 0,   pendingUpdatersLaneMap: (31) [Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0), Set(0)],   pingCache: null,   pingedLanes: 0,   suspendedLanes: 0,   tag: 1,   timeoutHandle: -1,   _debugRootType: \"createRoot()\", }<\/code><\/pre>\n<p>\u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0438 \u043d\u0435\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 FiberNode \u0441\u00a0<code>tag = 3<\/code>\u00a0(<code>HostRoot<\/code>).<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435, \u0442\u0430\u043a \u0436\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u043a\u044d\u0448 (\u043f\u043e\u043a\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0435\u0449\u0435 \u043d\u0435 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d).<\/p>\n<h4>\u0413\u0438\u0434\u0440\u0430\u0446\u0438\u044f Root-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430\u00a0<\/h4>\n<p>\u0414\u0430\u043b\u0435\u0435, \u043c\u044b \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 render \u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435<\/p>\n<pre><code class=\"javascript\">root.render(&lt;div>My React App&lt;\/div>);<\/code><\/pre>\n<p>\u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u043e\u0441\u0443 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430 \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 &#171;\u0440\u0430\u0431\u043e\u0442\u044b&#187; (\u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e, \u0435\u0449\u0435 \u043d\u0435\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e <code>FiberNode<\/code>, \u0445\u0440\u0430\u043d\u044f\u0449\u0435\u0433\u043e\u0441\u044f \u0432\u00a0<code>.current<\/code>), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0435\u0436\u0438\u043c\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 (<code>Suspense<\/code>\/<code>Sync<\/code>) \u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 \u0435\u0449\u0435 \u043d\u0435\u0442.<\/p>\n<p>\u0412\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0430\u0434 <code>FiberNode<\/code>, \u043a\u0430\u043a \u043d\u0430\u0434 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u043c Root-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u0442.\u0435. \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043b\u0438 \u043d\u043e\u0434\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0438\u043b\u0438 \u043d\u0435\u0442, \u0432\u0435\u0441\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0446\u0438\u043a\u043b \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0439 \u043d\u043e\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435.\u00a0<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0441\u0430\u043c\u043e\u0433\u043e React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0432 \u0440\u0430\u0431\u043e\u0442\u0443 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f JSX-\u043f\u0430\u0440\u0441\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u0442 \u043d\u0430\u0448 HTML-like \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0432 ReactComponent. \u0420\u0430\u0431\u043e\u0442\u0443 JSX \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c. \u0412\u043c\u0435\u0441\u0442\u043e JSX, \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c\u00a0<code>React.createElement('div')<\/code>, \u043d\u0430 \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u044f\u0446\u0438\u044e \u044d\u0442\u043e \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u0438\u043b\u044f\u0435\u0442 (\u043d\u0435 \u0441\u0447\u0438\u0442\u0430\u044f \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0445 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432 \u043d\u0430 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 JSX).<\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 ReactComponent \u0442\u0430\u043a \u0436\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u043e\u0441\u0430\u00a0<code>Update<\/code>. \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043e\u043d\u0438 \u0442\u0430\u043a \u0436\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u043f\u043e\u0437\u0436\u0435, \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0442\u0438\u043a\u0430\u0445 \u0438 \u0442\u043e\u0436\u0435 \u0432\u0441\u0442\u0430\u043d\u0443\u0442 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043f\u043e\u043b\u043e\u0441\u0443.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435, \u0432 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0443\u044e &#171;\u0440\u0430\u0431\u043e\u0442\u0443&#187; (Fiber), \u0430 \u0442\u0430\u043a \u0436\u0435 \u0432\u0435\u0441\u044c Fiber \u0441\u0442\u0430\u0432\u0438\u0442\u0441\u044f \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u044d\u043a\u00a0<code>concurrentQueues<\/code>\u00a0(\u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 Suspenses).<\/p>\n<p>\u041a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 Fiber (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, Root-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440), \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 (\u043d\u043e \u0435\u0449\u0435 \u043d\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044b\u0439) \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043b\u0430\u0433\u0430<\/p>\n<pre><code class=\"javascript\">root.pendingLanes |= updateLane<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438 \u0444\u043b\u0430\u0433\u0438\u00a0<code>suspendedLanes<\/code>, \u0435\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.<\/p>\n<p>\u0412 \u043a\u043e\u043d\u0446\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439 Root-\u043d\u043e\u0434.<\/p>\n<h4>\u041f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a<\/h4>\n<p>\u041f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0437\u0430\u0434\u0430\u0447 (Fiber-\u043e\u0432) \u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0435 \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f. \u041a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u0438\u043c\u0435\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u044e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f\u00a0<code>scheduleMicrotask<\/code>\u00a0\u0432 API \u043f\u0430\u043a\u0435\u0442\u0430\u00a0<code>react-reconciler<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440\u00a0<code>React Native<\/code>\u00a0\u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439\u00a0<code>queueMicrotask<\/code>, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u043e\u0439, \u0430\u00a0<code>React DOM<\/code>\u00a0&#8212; \u043f\u0440\u043e\u043c\u0438\u0441\u044b.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a\u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0430\u0441\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043d\u0430 \u0432\u044b\u0437\u043e\u0432\u0435\u00a0<code>render<\/code>-\u043c\u0435\u0442\u043e\u0434\u0430. \u0414\u0430\u043b\u0435\u0435, \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u044c React-\u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p>\u041e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432, \u043d\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u043c \u0442\u0438\u043a\u0435, \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 Fiber, \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0449\u0438\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u043c\u0435\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u0443 \u043d\u0435\u0433\u043e, \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e Fiber. \u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a \u0436\u0435, \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043c\u0438\u043a\u0440\u043e\u0442\u0430\u0441\u043a\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0440\u044f\u0434 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<p>\u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435, \u043f\u0440\u0438 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u0438\u0438 Fiber-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (Fiber, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442), \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0434\u0430\u043d\u043d\u043e\u0433\u043e Fiber.<\/p>\n<h4>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 Fiber<\/h4>\n<p><em>\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 Fiber \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043f\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043d\u043e\u0434\u0430, \u0445\u0440\u0430\u043d\u0438\u043c\u0430\u044f \u0432\u00a0<\/em><code>Fiber.alternate<\/code>. \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u044d\u0442\u043e\u0442\u00a0<code>Fiber.alternate<\/code>\u00a0\u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u00a0<code>FiberRootNode.current<\/code>. \u0414\u0430\u043b\u0435\u0435, \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 (\u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0439 \u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432 <code>current<\/code> \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0441\u0432\u043e\u0439 <code>alternate<\/code>, \u0430 \u0432\u0441\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043d\u0435\u0439 \u043a\u0430\u043a \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0443, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0435\u043c\u0443\u0441\u044f \u0432 \u0440\u0430\u0431\u043e\u0442\u0435. \u0422\u0430\u043a\u0438 \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u043e\u044f\u0442\u044c \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u0438, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u0442 \u0438\u0445 \u0447\u0435\u0440\u0435\u0434.<\/p>\n<h3>\u0424\u0430\u0437\u044b<\/h3>\n<p>\u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Fiber, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0446\u0435\u043b\u044b\u0439 \u0446\u0438\u043a\u043b \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043d\u0430\u0434 \u043d\u043e\u0434\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u0443\u0441\u043b\u043e\u0432\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u0447\u0435\u0442\u044b\u0440\u0435 \u0444\u0430\u0437\u044b.<\/p>\n<h4>\u0424\u0430\u0437\u0430 begin<\/h4>\n<p>\u042d\u0442\u0430 \u0444\u0430\u0437\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u044b\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u044d\u0442\u0430\u043f\u043e\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u043e\u0434\u044b. \u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0437\u0434\u0435\u0441\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0435\u0442\u043a\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0447\u0443\u0442\u044c \u0440\u0430\u043d\u0435\u0435,<em>\u00a0<\/em><code>Fiber.alternate<\/code>\u00a0\u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u043f\u0443\u0441\u0442\u043e\u0439. \u042d\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440\u0443, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u043e\u0447\u043d\u043e \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b \u043d\u0438 \u0440\u0430\u0437\u0443 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d (\u0438\u043b\u0438 \u0431\u044b\u043b \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0443\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u043e). \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0444\u043b\u0430\u0433\u043e\u043c\u00a0<code>didReceiveUpdate = false<\/code>, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0432\u0441\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043b\u0438\u0447\u0438\u044f<em>\u00a0<\/em><code>Fiber.alternate<\/code>\u00a0\u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435\u00a0<code>memoizedProps \/* old props *\/ !== pendingProps \/* new props *\/<\/code><em>, <\/em>\u0438 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435 \u0440\u0430\u0432\u043d\u044b, \u0437\u0430\u0434\u0430\u0447\u0430 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0444\u043b\u0430\u0433\u043e\u043c<em>\u00a0<\/em><code>didReceiveUpdate = true<\/code>.<\/p>\n<p>\u0421\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430<em>\u00a0<\/em><code>Fiber.tag<\/code>. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435\u00a0<code>Fiber.tag === 3 \/* IndeterminateComponent *\/<\/code>. \u0414\u0430\u043d\u043d\u044b\u0439 \u0442\u044d\u0433 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u043a\u0430 \u0435\u0449\u0435 \u043d\u0435 \u0437\u043d\u0430\u0435\u043c, \u043a\u0430\u043a\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u0441 \u043e\u0436\u0438\u0434\u0430\u0435\u0442, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u043e\u043d \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u0436\u0435 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d.<\/p>\n<p>\u0412\u0441\u0435\u0433\u043e \u0442\u0430\u043a\u0438\u0445 \u0442\u044d\u0433\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043d\u0430 \u043d\u0435\u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 &#8212; \u0442\u0440\u0438<\/p>\n<ul>\n<li>\n<p><u>IndeterminateComponent<\/u><\/p>\n<\/li>\n<li>\n<p><u>LazyComponent<\/u><\/p>\n<\/li>\n<li>\n<p><u>IncompleteClassComponent<\/u><\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u044d\u0442\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435, \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u0442\u0440\u0435\u0445 \u0442\u0438\u043f\u043e\u0432, \u043c\u0435\u0442\u043e\u0434\u044b, \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>\u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u0442\u044d\u0433\u043e\u0432 \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u044e\u0442\u0441\u044f \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u0430\u043f\u0430 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0434\u043b\u044f \u043d\u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b \u043c\u0435\u0442\u043e\u0434\u044b, \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0442\u0438\u043f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c<\/p>\n<pre><code class=\"javascript\">if (   !disableModulePatternComponents &amp;&amp;   typeof value === 'object' &amp;&amp;   value !== null &amp;&amp;   typeof value.render === 'function' &amp;&amp;   value.$$typeof === undefined ) {   workInProgress.tag = ClassComponent;   \/\/... } else {   workInProgress.tag = FunctionComponent;   \/\/... }<\/code><\/pre>\n<p>\u0422.\u0435., \u0443\u043f\u0440\u043e\u0449\u0430\u044f \u0432\u044b\u0448\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435, \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>render<\/code> (\u0432 \u0432\u0438\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438). \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c.<\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0446\u0438\u043a\u043b \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430. \u0422\u0443\u0442 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u044b \u043c\u0435\u0442\u043e\u0434\u044b \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435\u00a0<code>this.state<\/code>\u00a0\u0438\u00a0<code>this.props<\/code>.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u043c\u0438, \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0438\u0445 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u0430 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043c\u0441\u044f \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438\u00a0<code>reconcileChildren<\/code><\/p>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js#L288\" rel=\"noopener noreferrer nofollow\">\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js#L288<\/a><\/p>\n<pre><code class=\"javascript\">export function reconcileChildren(   current: Fiber | null,   workInProgress: Fiber,   nextChildren: any,   renderLanes: Lanes, ) {   if (current === null) {     \/\/ If this is a fresh new component that hasn't been rendered yet, we     \/\/ won't update its child set by applying minimal side-effects. Instead,     \/\/ we will add them all to the child before it gets rendered. That means     \/\/ we can optimize this reconciliation pass by not tracking side-effects.     workInProgress.child = mountChildFibers(       workInProgress,             null,             nextChildren,             renderLanes,           );     } else {         \/\/ If the current child is the same as the work in progress, it means that         \/\/ we haven't yet started any work on these children. Therefore, we use         \/\/ the clone algorithm to create a copy of all the current children.              \/\/ If we had any progressed work already, that is invalid at this point so         \/\/ let's throw it out.         workInProgress.child = reconcileChildFibers(       workInProgress,             current.child,             nextChildren,             renderLanes,         );     } }<\/code><\/pre>\n<p>\u041d\u0435 \u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u043c, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c, \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445. \u041e\u043d\u0430 \u0435\u0449\u0435 \u0440\u0430\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u0435\u00a0<code>current<\/code>\u00a0(\u043e\u043d \u0436\u0435\u00a0<code>Fiber.alternate<\/code>) \u0438 \u0440\u0435\u0448\u0430\u0435\u0442, \u043f\u043e \u043a\u0430\u043a\u043e\u043c\u0443 \u0446\u0438\u043a\u043b\u0443 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u044f\u0446\u0438\u044f.<\/p>\n<h4>\u0424\u0430\u0437\u0430 render<\/h4>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0444\u0430\u0437\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e &#171;\u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430&#187;. \u041c\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u043c \u0442\u0438\u043f Fiber (\u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439, \u0432\u044b\u0437\u043e\u0432 \u0445\u0443\u043a\u0430, \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430). \u0415\u0441\u043b\u0438 Fiber \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u0435\u0433\u043e \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0430\u044f \u0432\u0435\u0442\u043a\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0442\u0430\u043a \u0436\u0435 \u0443\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 (\u0431\u0443\u0434\u0435\u0442 \u043b\u0438 \u043e\u043d \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f).<\/p>\n<p>\u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u043f\u0440\u0438\u043c\u0435\u0440\u0443. \u0420\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e\u00a0<code>reconcileChildren<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0432\u044b\u0437\u0432\u0430\u043b\u0430\u00a0<code>mountChildFibers<\/code>\u00a0\u0438\u043b\u0438\u00a0<code>reconcileChildFibers<\/code>. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438, \u043e\u0431\u0435 \u044d\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e &#8212; \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 <code>ChildReconciler<\/code>, \u0442\u043e\u0447\u043d\u0435\u0435, \u043a\u043b\u0430\u0441\u0441\u0430 \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435\u0442, \u043d\u043e \u0435\u0441\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0442\u0438\u043f, \u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 &#8212; \u043d\u0438 \u0447\u0442\u043e \u0438\u043d\u043e\u0435, \u043a\u0430\u043a \u0432\u044b\u0437\u043e\u0432 \u0444\u0430\u0431\u0440\u0438\u043a\u0438, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0435\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u044d\u0442\u043e\u0433\u043e \u0442\u0438\u043f\u0430.<\/p>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-reconciler\/src\/ReactChildFiber.new.js#L1349\" rel=\"noopener noreferrer nofollow\">\/packages\/react-reconciler\/src\/ReactChildFiber.new.js#L1349<\/a><\/p>\n<pre><code class=\"javascript\">export const reconcileChildFibers = ChildReconciler(true); export const mountChildFibers = ChildReconciler(false);<\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-reconciler\/src\/ReactChildFiber.new.js#L265C1-L265C51\" rel=\"noopener noreferrer nofollow\">\/packages\/react-reconciler\/src\/ReactCh<\/a><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-reconciler\/src\/ReactChildFiber.new.js#L265\" rel=\"noopener noreferrer nofollow\">ildFiber.new.js<\/a><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-reconciler\/src\/ReactChildFiber.new.js#L265C1-L265C51\" rel=\"noopener noreferrer nofollow\">#L265<\/a><\/p>\n<pre><code class=\"javascript\">function ChildReconciler(shouldTrackSideEffects) {   ... }<\/code><\/pre>\n<p>\u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443\u00a0<code>reconcileChildFibers<\/code>\u00a0\u0438\u00a0<code>mountChildFibers<\/code>\u00a0\u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u043b\u0430\u0433\u00a0<code>shouldTrackSideEffects<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b\u00a0<code>ChildReconciler<\/code>, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043b\u0438 \u0443\u0434\u0430\u043b\u0438\u0442\u044c c\u0430\u043c Fiber \u0438\/\u0438\u043b\u0438 \u0435\u0433\u043e \u0434\u0435\u0442\u0435\u0439 (\u043d\u0435\u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043d\u0430\u0434\u043e \u0443\u0434\u0430\u043b\u044f\u0442\u044c, \u043a\u0430\u043a \u0438 \u0435\u0433\u043e \u0434\u0435\u0442\u0435\u0439).<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u0442\u0438\u043f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0435\u0433\u043e \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\/\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043b\u0431\u044d\u043a\u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430 (\u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 ReactDOM), \u0430 \u0440\u0435\u043d\u0434\u0435\u0440, \u0443\u0436\u0435 \u043d\u0430 \u0441\u0432\u043e\u0435\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0441\u043a\u043b\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e Root-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0442.\u0435. \u043a\u043e\u0440\u043d\u044f \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u0434\u043b\u044f \u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e\/\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c\u043e\u0433\u043e Fiber).\u00a0<\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043e\u0431\u0445\u043e\u0434 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f (\u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0435\u0442\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u0430\u043a \u0438 \u043c\u0430\u0441\u0441\u0438\u0432). \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u044f\u0446\u0438\u044e, \u043a\u0430\u043a \u0438 \u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0438, \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0438\u0442\u043e\u0433\u0435, \u043f\u043e\u043f\u0430\u0434\u0435\u0442 \u0432 \u0442\u043e \u0436\u0435 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u0430\u043a \u043e\u0434\u043d\u0430 \u0438\u0437 \u0432\u0435\u0442\u043e\u043a \u0434\u0435\u0440\u0435\u0432\u0430.<\/p>\n<h4>\u0424\u0430\u0437\u0430 commit<\/h4>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0430\u0437\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>\u041d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0442\u0438\u043a\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0435\u0434\u0438\u043d\u0438\u0446\u044b &#171;\u0440\u0430\u0431\u043e\u0442\u044b&#187; \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u044d\u0442\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u0432 \u043c\u043e\u0434\u0443\u043b\u0435\u00a0<code>ReactFiberWorkLoop<\/code>\u00a0\u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0444\u043b\u0430\u0433-\u0441\u0442\u0430\u0442\u0443\u0441<\/p>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js#L299\" rel=\"noopener noreferrer nofollow\">\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js#L299<\/a><\/p>\n<pre><code class=\"javascript\">let workInProgressRootExitStatus: RootExitStatus = RootInProgress;<\/code><\/pre>\n<p>\u041a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c 7 \u0441\u0442\u0430\u0442\u0443\u0441\u043e\u0432<\/p>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js#L269\" rel=\"noopener noreferrer nofollow\">\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js#L269<\/a><\/p>\n<pre><code class=\"javascript\">type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5 | 6; const RootInProgress = 0; const RootFatalErrored = 1; const RootErrored = 2; const RootSuspended = 3; const RootSuspendedWithDelay = 4; const RootCompleted = 5; const RootDidNotComplete = 6;<\/code><\/pre>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u0446\u0438\u043a\u043b\u0430 \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u044f\u0446\u0438\u0438 \u0444\u043b\u0430\u0433 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u00a0<code>RootInProgress<\/code>.<\/p>\n<p>\u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043d\u0435\u043d\u0430\u0434\u043e\u043b\u0433\u043e \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0444\u0430\u0437\u0443\u00a0<code>render<\/code>. \u0422\u0430\u043c, \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u044f \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 Fiber, \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440 \u0441\u0442\u0430\u0432\u0438\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 Root-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 Fiber \u0438 \u0438\u0434\u0435\u0442 \u0433\u043b\u0443\u0431\u0436\u0435, \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e, \u0443\u0436\u0435 \u043f\u043e \u0435\u0433\u043e \u0434\u0435\u0442\u044f\u043c. \u0414\u043e\u0439\u0434\u044f \u0434\u043e \u0441\u0430\u043c\u043e\u0433\u043e \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e Fiber \u0431\u0435\u0437 \u0434\u0435\u0442\u0435\u0439 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0432 \u0435\u0433\u043e, \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043a \u0441\u043e\u0441\u0435\u0434\u043d\u0435\u043c\u0443 \u0440\u0435\u0431\u0435\u043d\u043a\u0443, \u0435\u0441\u043b\u0438 \u043e\u043d \u0438\u043c\u0435\u0435\u0442\u0441\u044f (\u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 Fiber \u0435\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430\u00a0<code>sibling<\/code>). \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0432 \u0432\u0441\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 Fiber \u043d\u0430 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435, \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 Fiber \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u0436\u0435 \u043d\u0430 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435. \u0422\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440 \u043d\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0435\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u0442.\u0435. Fiber, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u043b\u0430\u0433-\u0441\u0442\u0430\u0442\u0443\u0441\u00a0<code>workInProgressRootExitStatus = RootCompleted<\/code>, \u0447\u0442\u043e \u0441\u043b\u0443\u0436\u0438\u0442 \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u043c \u043a \u043d\u0430\u0447\u0430\u043b\u0443 \u0444\u0430\u0437\u044b\u00a0<code>commit<\/code>\u00a0\u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e Root-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u0432 \u0441\u0442\u0430\u0442\u0443\u0441\u00a0<code>RootCompleted<\/code>\u00a0\u043d\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u043c \u0442\u0438\u043a\u0435, \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043b\u0438\u0447\u0438\u044f Suspenses, \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043b\u0431\u044d\u043a \u0440\u0435\u043d\u0434\u0440\u0435\u0440\u0430\u00a0<code>startSuspendingCommit<\/code>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0443 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u0441\u0442\u0435\u0439\u0442 \u0434\u043b\u044f \u043f\u0440\u0438\u0435\u043c\u0430 Suspensey \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c, \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u044d\u0442\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435, \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440 \u043e\u0431\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u0435 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u043b\u0438\u0441\u0442\u043d\u0435\u0440\u044b \u043a\u043e \u0432\u0441\u0435\u043c \u0442\u0430\u043a\u0438\u043c \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c. \u0412\u0441\u0451 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0434\u043d\u043e\u0439 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0435\u0439.<\/p>\n<p>\u041f\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438, \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440, \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0430\u00a0<code>waitForCommitToBeReady<\/code>\u00a0\u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440, \u0433\u043e\u0442\u043e\u0432 \u043b\u0438 \u043e\u043d \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043e\u0436\u0434\u0430\u0442\u044c. \u0420\u0435\u043d\u0434\u0435\u0440, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u043f\u043e\u0434\u043f\u0438\u0441\u0447\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0438\u0442 \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440\u0443, \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, React DOM \u0436\u0434\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 DOM.<\/p>\n<p>\u0415\u0441\u043b\u0438 Suspeney \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442, \u0444\u0430\u0437\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u044d\u0442\u0430\u043f\u0430\u043c.<\/p>\n<p>\u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0444\u043b\u0430\u0433\u0438 \u0438 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u044b. \u041e\u0447\u0438\u0449\u0430\u0435\u0442\u0441\u044f \u043a\u044d\u0448 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u044d\u0442\u0430\u043f\u0430\u043c\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435, \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445\u00a0<code>beforeMutationEffects<\/code>. \u042d\u0442\u0430 \u0441\u0442\u0430\u0434\u0438\u044f \u0440\u0430\u0437\u0431\u0438\u0442\u0430 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u044d\u0442\u0430\u043f\u043e\u0432. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0445\u043e\u0434 \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u043f\u043e \u0432\u0441\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u041f\u043e\u0442\u043e\u043c, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0438\u043f\u0430 Fiber, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u043c Fiber \u0438 \u0434\u0430\u043b\u0435\u0435, \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u043d\u0430 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0447\u0435\u0440\u0435\u0434\u00a0<code>mutationEffects<\/code>. \u041e\u043d\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u043c Fiber.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043b\u0431\u044d\u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u00a0<code>resetAfterCommit<\/code>. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u0434\u0435\u0440\u0435\u0432\u0430 \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u044b \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u0440\u0435\u043d\u0434\u0435\u0440\u0430 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0432 \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0<code>ReactDOM<\/code>\u00a0\u0437\u0434\u0435\u0441\u044c \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u0430, \u0435\u0441\u043b\u0438 \u043e\u043d\u043e \u0431\u044b\u043b\u043e.<\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0443\u0436\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c, \u043d\u043e \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c DOM \u0435\u0449\u0435 \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043e. \u0413\u0440\u0443\u0431\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0<code>componentWillUnmount<\/code><\/p>\n<h4>\u0424\u0430\u0437\u0430 layout<\/h4>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043e, \u0438 \u0432\u0441\u0435 Mutation-\u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b, \u043f\u043e\u0440\u0430 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0435\u0433\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0435 \u043a \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c\u0443 DOM (\u0438\u043b\u0438 \u0432\u044b\u0432\u043e\u0434\u0443 \u0432 output \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c).<\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u0435\u0440 \u0443\u0436\u0435 \u0434\u043e\u0448\u0435\u043b \u0434\u043e Root-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412\u0441\u0451 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043c\u0443\u0442\u0430\u0446\u0438\u044e \u0441\u0430\u043c\u043e\u0433\u043e \u044d\u0442\u043e\u0433\u043e Root-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e, \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u0431\u044d\u043a\u00a0<code>comitMount<\/code>\u00a0\u0440\u0435\u043d\u0434\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u00a0<code>ReactDOM<\/code>, \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0444\u043e\u043a\u0443\u0441, \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u044b\u043b \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c \u043f\u043e\u043b\u0435\u043c \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c\u00a0<code>autoFocus<\/code>\u00a0\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u00a0<code>src<\/code>, \u0435\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u044b\u043b \u0442\u044d\u0433\u043e\u043c\u00a0<code>img<\/code>.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435, \u043d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0434\u043e \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u0432 \u043a\u043e\u043d\u0435\u0446 \u0444\u0440\u0435\u0439\u043c\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Scheduling\/isInputPending\" rel=\"noopener noreferrer nofollow\">navigator.scheduling.isInputPending<\/a>.<\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442 \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 Root-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0441 \u0446\u0435\u043b\u044c\u044e \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0431\u043e\u0440 \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0445\u0441\u044f \u0444\u043b\u0430\u0433\u043e\u0432 \u0438 \u0442\u0430\u0439\u043c\u0435\u0440\u043e\u0432.<\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u044f\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044b\u043c. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0443\u0442 \u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u0430\u043a\u043e\u043c-\u043b\u0438\u0431\u043e \u0438\u0437 Fiber, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e Fiber \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u043d\u043e\u0432\u044b\u0439 \u0446\u0438\u043a\u043b \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u044f\u0446\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0438\u0437\u043c\u0435\u043d\u0435\u043d (\u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d).<\/p>\n<hr\/>\n<p>\u042d\u0442\u0443 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u043e\u0438 \u0441\u0442\u0430\u0442\u044c\u0438, \u0442\u0430\u043a \u0436\u0435, \u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0432 \u043c\u043e\u0435\u043c \u043a\u0430\u043d\u0430\u043b\u0435<\/p>\n<p>RU:\u00a0<a href=\"https:\/\/t.me\/frontend_almanac_ru\" rel=\"noopener noreferrer nofollow\">https:\/\/t.me\/frontend_almanac_ru<\/a><br \/>EN:\u00a0<a href=\"https:\/\/t.me\/frontend_almanac\" rel=\"noopener noreferrer nofollow\">https:\/\/t.me\/frontend_almanac<\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/786102\/\"> https:\/\/habr.com\/ru\/articles\/786102\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u0412 \u0441\u0435\u0442\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0430\u0442\u0435\u0439, \u043c\u0430\u043d\u0443\u0430\u043b\u043e\u0432 \u0438 \u043a\u043d\u0438\u0433 \u043f\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u043c React, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c HelloWorld \u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043e\u0431\u0449\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u043e\u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438, \u043a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435, \u0438 \u043a\u0430\u043a, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0435\u0451 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e.<\/p>\n<p>\u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f React\u00a0<a href=\"https:\/\/github.com\/facebook\/react\/releases\/tag\/v18.2.0\" rel=\"noopener noreferrer nofollow\">18.2.0<\/a>. \u0417\u0430 10 \u043b\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Facebook \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043b\u0438 \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u044b, \u0431\u044b\u043b\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0444\u0438\u0447 \u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043d\u0435 \u043c\u0430\u043b\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439. \u0417\u0430 \u044d\u0442\u0438 \u0433\u043e\u0434\u044b, \u0442\u0430\u043a \u0436\u0435, \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u0438 \u0438 \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u0430\u043b\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u044e \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 React, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0434\u0430\u043d\u043d\u0430\u044f \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432 \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0435 React. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<h3>\u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430<\/h3>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0443\u0441\u043a\u043e\u0432\u044b\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u043e\u043c \u0434\u043b\u044f \u043c\u0430\u0448\u0438\u043d\u044b React. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043d\u0430\u0439\u0434\u0435\u043c \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 React \u044d\u0442\u043e \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e.<\/p>\n<p>\u0411\u0435\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0432\u0441\u0435 \u0442\u0430\u043a, \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u0412\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0439 React-\u043a\u043e\u0434 \u0434\u043b\u044f Web-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">import ReactDOM from 'react-dom\/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(&lt;div>My React App&lt;\/div>);<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0430\u043a\u0435\u0442\u00a0<code>react-dom\/client<\/code>\u00a0\u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f Root-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0438, \u0434\u0430\u043b\u0435\u0435, \u0440\u0435\u043d\u0434\u0435\u0440\u0430\u00a0<code>DIV<\/code>-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u0418\u043c\u0435\u043d\u043d\u043e \u0437\u0434\u0435\u0441\u044c \u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u043f\u0443\u0441\u043a\u043e\u0432\u043e\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c React, \u0442\u043e\u0447\u043d\u0435\u0435, \u0437\u0434\u0435\u0441\u044c \u0438\u0445 \u0441\u0440\u0430\u0437\u0443 \u0434\u0432\u0430: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c\u00a0<code>createRoot<\/code>, \u0438 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435. \u041d\u043e \u043e\u0431\u043e \u0432\u0441\u0435\u043c \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443.<\/p>\n<h3>\u0420\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u044f\u0446\u0438\u044f<\/h3>\n<p>\u041a\u0430\u043a \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u0438\u0437 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u0432, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u043f\u0430\u0434\u0443\u0442 \u0432 DOM, React \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u043c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u043c \u0434\u0435\u0440\u0435\u0432\u0435. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e, \u0443\u0436\u0435 \u044d\u0442\u043e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e &#171;\u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442&#187; \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 DOM. \u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c DOM \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u043a\u043e\u043d\u0441\u0438\u043b\u044f\u0446\u0438\u0435\u0439.<\/p>\n<p>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0443 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u0433\u0434\u0435 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 UI \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u0432\u0435\u0434\u0435\u043d (\u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0438\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u0438\u043b\u0438 \u0444\u0430\u0439\u043b). \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0441\u0430\u043c React \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432 Web, \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 (SSR), \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 (React Native) \u0438 \u0434\u0440.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0432\u044f\u0437\u0438, \u043a\u043e\u043c\u0430\u043d\u0434\u0430 React \u0432\u044b\u0434\u0435\u043b\u0438\u043b\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442\u00a0<code>react-reconcile<\/code>\u00a0\u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0435\u043a\u043e\u0435\u0433\u043e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0433\u043e API. \u041e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0434\u0432\u0443\u0445 \u0440\u0435\u0436\u0438\u043c\u0430\u0445:<\/p>\n<ul>\n<li>\n<p><strong>Mutation mode<\/strong>\u00a0&#8212; \u0434\u043b\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0445 \u043c\u0443\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e (\u0442.\u0435. \u0438\u043c\u0435\u044e\u0442 \u043c\u0435\u0442\u043e\u0434\u044b, \u0441\u0445\u043e\u0436\u0438\u0435 \u0441\u00a0<code>appendChild<\/code>\/<code>removeChild<\/code>)<\/p>\n<\/li>\n<li>\n<p><strong>Persistent mode<\/strong>\u00a0&#8212; \u0434\u043b\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c \u0441 \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u044f\u043c\u0438. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u0432\u0441\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043b\u043e\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0446\u0435\u043b\u0438\u043a\u043e\u043c, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u0441\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u0430\u043c \u044d\u0442\u043e\u0442 \u043f\u0430\u043a\u0435\u0442 \u043d\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u043a DOM, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u043f\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u0438 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0421\u0430\u043c\u0430 \u0436\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043a DOM \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0435\u0433\u043e API \u043f\u0430\u043a\u0435\u0442\u0430\u00a0<code>react-reconciler<\/code>. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u043e\u043c \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0444\u043b\u0430\u0433\u043e\u0432-\u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432-\u043a\u043e\u043b\u0431\u044d\u043a\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a\u00a0<code>createInstance<\/code>,\u00a0<code>appendChild<\/code>,\u00a0<code>removeChild<\/code>\u00a0\u0438 \u0434\u0440.. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c.\u00a0<\/p>\n<h3>\u0420\u0435\u043d\u0434\u0435\u0440\u044b<\/h3>\n<p>\u041f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u044b, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0435 API \u043f\u0430\u043a\u0435\u0442\u0430\u00a0<code>react-reconciler<\/code>, \u0443\u0441\u043b\u043e\u0432\u043d\u043e, \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u044b. \u0422\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043f\u0430\u043a\u0435\u0442\u00a0<code>react-reconciler<\/code>\u00a0\u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0441\u044f \u043a\u0430\u043a \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 API, \u043d\u043e, \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432 2017-\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e \u043d\u0435\u043c\u0443 \u0432\u0435\u0434\u0443\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e, \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u043f\u0430\u043a\u0435\u0442 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f\u00a0<em>unstable<\/em>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441\u0442\u043e\u0438\u0442 \u0441 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>\u0421\u0430\u043c \u0436\u0435 React \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432 &#171;\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438&#187;.<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/main\/packages\/react-dom\/src\/client\/ReactDOM.js\" rel=\"noopener noreferrer nofollow\">React DOM<\/a>\u00a0&#8212; \u044d\u0442\u043e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440 \u043c\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435. \u041e\u043d \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u043a DOM-\u0434\u0435\u0440\u0435\u0432\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\" rel=\"noopener noreferrer nofollow\">React Native<\/a>\u00a0&#8212; \u044d\u0442\u043e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-art\/src\/ReactART.js\" rel=\"noopener noreferrer nofollow\">React ART<\/a>\u00a0&#8212; \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 React. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043e\u0431\u043e\u043b\u043e\u0447\u043a\u043e\u0439 \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438\u00a0<a href=\"https:\/\/github.com\/sebmarkbage\/art\/\" rel=\"noopener noreferrer nofollow\">ART<\/a>.<\/p>\n<\/li>\n<\/ul>\n<h3>Fiber<\/h3>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0434\u0432\u0438\u043d\u0443\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435, \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u0432\u0438\u0436\u043a\u0430 React.<\/p>\n<p><strong>Fiber<\/strong>\u00a0&#8212; \u044d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 React, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0437\u0430\u0434\u0430\u0447\u0443 (&#171;\u0440\u0430\u0431\u043e\u0442\u0443&#187;), \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0434\u0432\u0438\u0436\u043e\u043a \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b \u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u0438\u043b\u0438 \u0443\u0436\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b.<\/p>\n<p>\u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u0442\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442\u00a0<code>react-reconciler<\/code>, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u0447\u0443\u0442\u044c \u0432\u044b\u0448\u0435.<\/p>\n<p><a href=\"https:\/\/github.com\/facebook\/react\/blob\/v18.2.0\/packages\/react-reconciler\/src\/ReactInternalTypes.js#L67\" rel=\"noopener noreferrer nofollow\">\/packages\/react-reconciler\/src\/ReactInternalTypes.js#L67<\/a><\/p>\n<pre><code class=\"javascript\">\/\/ A Fiber is work on a Component that needs to be done or was done. There can \/\/ be more than one per component. export type Fiber = {   \/\/ These first fields are conceptually members of an Instance. This used to   \/\/ be split into a separate type and intersected with the other Fiber fields,   \/\/ but until Flow fixes its intersection bugs, we've merged them into a   \/\/ single type.      \/\/ An Instance is shared between all versions of a component. We can easily   \/\/ break this out into a separate object to avoid copying so much to the   \/\/ alternate versions of the tree. We put this on a single object for now to   \/\/ minimize the number of objects created during the initial render.   \/\/ Tag identifying the type of fiber.   tag: WorkTag,      \/\/ Unique identifier of this child.   key: null | string,      \/\/ The value of element.type which is used to preserve the identity during   \/\/ reconciliation of this child.   elementType: any,      \/\/ The resolved function\/class\/ associated with this fiber.   type: any,      \/\/ The local state associated with this fiber.   stateNode: any,      \/\/ Conceptual aliases   \/\/ parent : Instance -> return The parent happens to be the same as the   \/\/ return fiber since we've merged the fiber and instance.      \/\/ Remaining fields belong to Fiber      \/\/ The Fiber to return to after finishing processing this one.   \/\/ This is effectively the parent, but there can be multiple parents (two)   \/\/ so this is only the parent of the thing we're currently processing.   \/\/ It is conceptually the same as the return address of a stack frame.   return: Fiber | null,    \/\/ Singly Linked List Tree Structure.   child: Fiber | null,   sibling: Fiber | null,   index: number,    \/\/ The ref last used to attach this node.   \/\/ I'll avoid adding an owner field for prod and model that as functions.   ref:     | null     | (((handle: mixed) => void) &amp; {_stringRef: ?string, ...})     | RefObject,      refCleanup: null | (() => void),    \/\/ Input is the data coming into process this fiber. Arguments. Props.   pendingProps: any, \/\/ This type will be more specific once we overload the tag.   memoizedProps: any, \/\/ The props used to create the output.    \/\/ A queue of state updates and callbacks.   updateQueue: mixed,    \/\/ The state used to create the output   memoizedState: any,    \/\/ Dependencies (contexts, events) for this fiber, if it has any   dependencies: Dependencies | null,    \/\/ Bitfield that describes properties about the fiber and its subtree. E.g.   \/\/ the ConcurrentMode flag indicates whether the subtree should be async-by-   \/\/ default. When a fiber is created, it inherits the mode of its   \/\/ parent. Additional flags can be set at creation time, but after that the   \/\/ value should remain unchanged throughout the fiber's lifetime, particularly   \/\/ before its child fibers are created.   mode: TypeOfMode,    \/\/ Effect   flags: Flags,   subtreeFlags: Flags,   deletions: Array&lt;Fiber> | null,    \/\/ Singly linked list fast path to the next fiber with side-effects.   nextEffect: Fiber | null,    \/\/ The first and last fiber with side-effect within this subtree. This allows   \/\/ us to reuse a slice of the linked list when we reuse the work done within   \/\/ this fiber.   firstEffect: Fiber | null,   lastEffect: Fiber | null,    lanes: Lanes,   childLanes: Lanes,    \/\/ This is a pooled version of a Fiber. Every fiber that gets updated will   \/\/ eventually have a pair. There are cases when we can clean up pairs to save   \/\/ memory if we need to.   alternate: Fiber | null,    \/\/ Time spent rendering this Fiber and its descendants for the current update.   \/\/ This tells us how well the tree makes use of sCU for memoization.   \/\/ It is reset to 0 each time we render and only updated when we don't bailout.   \/\/ This field is only set when the enableProfilerTimer flag is enabled.   actualDuration?: number,    \/\/ If the Fiber is currently active in the \"render\" phase,   \/\/ This marks the time at which the work began.   \/\/ This field is only set when the enableProfilerTimer flag is enabled.   actualStartTime?: number,    \/\/ Duration of the most recent render time for this Fiber.   \/\/ This value is not updated when we bailout for memoization purposes.   \/\/ This field is only set when the enableProfilerTimer flag is enabled.   selfBaseDuration?: number,    \/\/ Sum of base times for all descendants of this Fiber.   \/\/ This value bubbles up during the \"complete\" phase.   \/\/ This field is only set when the enableProfilerTimer flag is enabled.   treeBaseDuration?: number,    \/\/ Conceptual aliases   \/\/ workInProgress : Fiber ->  alternate The alternate used for reuse happens   \/\/ to be the same as work in progress.   \/\/ DEV only   _debugSource?: Source | null,   _debugOwner?: Fiber | null,   _debugIsCurrentlyTiming?: boolean,   _debugNeedsRemount?: boolean,    \/\/ Used to verify that the order of hooks does not change between renders.   _debugHookTypes?: Array&lt;HookType> | null, };<\/code><\/pre>\n<p>\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0438\u0445 \u0432\u0441\u0435, \u043d\u043e \u0432\u0437\u0433\u043b\u044f\u043d\u0435\u043c \u043d\u0430 \u0442\u0435, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u043d\u0430\u043c \u043f\u043e\u043d\u044f\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0432\u0438\u0436\u043a\u0430.<\/p>\n<h4>tag<\/h4>\n<p>\u0412\u0430\u0436\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043d\u0430 \u0442\u0438\u043f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0438\u0445 \u0432\u0441\u0435\u0433\u043e 28 \u0448\u0442\u0443\u043a<\/p>\n<pre><code class=\"javascript\">export const FunctionComponent = 0; export const ClassComponent = 1; export const IndeterminateComponent = 2; \/\/ Before we know whether it is function or class export const HostRoot = 3; \/\/ Root of a host tree. Could be nested inside another node. export const HostPortal = 4; \/\/ A subtree. Could be an entry point to a different renderer. export const HostComponent = 5; export const HostText = 6; export const Fragment =<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-365168","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/365168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=365168"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/365168\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=365168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=365168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=365168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}