{"id":319304,"date":"2021-03-10T09:00:44","date_gmt":"2021-03-10T09:00:44","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=319304"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=319304","title":{"rendered":"\u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u0432 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0434\u043b\u044f React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u0438\u0445 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445. \u041a\u0430\u043a \u044f \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 &#171;<a href=\"https:\/\/habr.com\/ru\/post\/545368\/\" rel=\"noopener noreferrer nofollow\">\u0422\u0435\u0445\u043d\u0438\u043a\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430<\/a>&#187; \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;<a href=\"https:\/\/habr.com\/ru\/post\/545368\/#ec\" rel=\"noopener noreferrer nofollow\">Entity Component (EC)<\/a>&#171;, \u044f \u043d\u0435 \u0437\u043d\u0430\u044e \u0442\u043e\u0447\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0430. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0431\u0443\u0434\u0443 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e Entity Component (EC). <\/p>\n<p>Entity Component \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0447\u0442\u043e HOC \u0438 Custom hooks \u2013 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043c\u0435\u0436\u0434\u0443&nbsp;\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u043e\u0434\u043d\u043e\u0442\u0438\u043f\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432\/\u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435. \u042d\u0442\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c&nbsp;\u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0434\u0430\u0432\u043d\u043e, \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0440\u0430\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0441 \u043d\u0435\u0439 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0432 \u0432\u0435\u0431\u0435. \u0418 \u0434\u0430\u0432\u043d\u043e \u0431\u044b\u043b\u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u044b \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p>Custom hooks \u0438 Entity Component &#8212; \u043e\u0431\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u043d\u0435\u043a\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. \u0422\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043e\u043d\u0438 \u0431\u043b\u0438\u0437\u043a\u0438 \u043a \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 \u00ab\u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f\u00bb. \u041d\u043e, Entity Component \u2013 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (\u0441\u0443\u0434\u044f \u043f\u043e \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044f \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b), \u0430 Custom hooks &#8212;  \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439. <\/p>\n<p>\u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0432\u0430\u043c \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043d\u0443\u0436\u0434\u044b. \u0423\u0437\u043d\u0430\u0435\u0442\u0435 \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043f\u0440\u0438\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. <br \/>\u0422\u0435, \u043a\u0442\u043e \u043f\u0438\u0448\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u043a\u043b\u0430\u0441\u0441\u044b, \u0443\u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u0447\u0435\u043c HOC, \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043b\u0438\u0448\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u043e\u0431\u0435\u0440\u0442\u043a\u0438.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0442\u043e \u043f\u043e\u0434\u0445\u043e\u0434 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442. \u041d\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044f \u043d\u0435 \u0441\u043c\u043e\u0433\u0443 \u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c. \u041e\u043d \u0434\u0430\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0433\u0435\u0439\u043c\u0434\u0435\u0432\u0435, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 UI. \u0417\u0434\u0435\u0441\u044c \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u043e\u0437\u0440\u0430\u0437\u044f\u0442: &#171;\u044d\u0442\u043e \u0436\u0435 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0438 \u0432\u0440\u044f\u0434 \u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448 \u0432 \u0432\u0435\u0431\u0435&#187;. \u042d\u0442\u043e \u0442\u0430\u043a, \u0435\u0441\u043b\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435  \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f. \u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u043e\u043d\u0438 \u043f\u043e\u0445\u043e\u0436\u0438. \u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (DOM \u0438 \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u0446\u0435\u043d\u044b). \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0432\u0435\u0431\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0438\u0433\u0440\u0430\u0445 \u0442\u043e\u0436\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0432\u0435\u0431\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 (\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b\/\u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0438\u043b\u0438 \u0445\u0443\u043a\u0438), \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0438\u0433\u0440\u0430\u0445 \u0442\u043e\u0436\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445. \u041e\u0442\u043b\u0438\u0447\u0438\u044f \u0435\u0441\u0442\u044c, \u043d\u043e \u043d\u0435 \u0442\u0430\u043a\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u043b\u044c\u0437\u044f \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b. \u041f\u0440\u043e\u0441\u0442\u043e \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c.<\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u043d\u0438\u0436\u0435.<\/p>\n<p><strong>\u041a\u043e\u0434 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438: <\/strong><a href=\"https:\/\/github.com\/sergeysibara\/entity-component-in-react\/tree\/habr-version\" rel=\"noopener noreferrer nofollow\"><strong>github<\/strong><\/a><br \/><strong>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f: <\/strong><a href=\"https:\/\/github.com\/sergeysibara\/entity-component-in-react\" rel=\"noopener noreferrer nofollow\"><strong>github<\/strong><\/a><strong>, <\/strong><a href=\"https:\/\/codesandbox.io\/s\/entity-cmponent-in-react-2021-q41y3\" rel=\"noopener noreferrer nofollow\"><strong>codesanbox<\/strong><\/a><\/p>\n<h4>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h4>\n<ul>\n<li>\n<p><a href=\"#react-hooks\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0445\u0443\u043a\u043e\u0432. \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u043c\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Entity Component.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#programming-entities\" rel=\"noopener noreferrer nofollow\">\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432 \u043c\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Entity Component<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#es-part1\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 1: Event emitter<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#es-part2\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 2: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#es-part3\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 3: \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#es-part4\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 4: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (behaviour) \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#es-part5\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 5: \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0445\u0435\u043c\u0430.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#props\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435. \u0413\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 props.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#directives\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435. \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b &#8212; \u044d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0437\u0430 \u0447\u0442\u043e \u0438\u0445 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442. \u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0435\u0442?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#epilogue\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435. \u0412 \u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 Entity Component \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d.<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"react-hooks\" id=\"react-hooks\"><\/a><\/p>\n<h2>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0445\u0443\u043a\u043e\u0432. \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u043c\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Entity Component<\/h2>\n<p>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0445\u0443\u043a\u043e\u0432 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c. \u0418\u0445 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438. \u041f\u0440\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u044b \u0432 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0438 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0435\u0434\u0443\u0442 \u043a \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c.<\/p>\n<p><strong>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434):<\/strong><\/p>\n<ul>\n<li>\n<p>\u041b\u043e\u0433\u0438\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b \u0441 View. \u041a\u043e\u0433\u0434\u0430-\u0442\u043e view \u0441\u043b\u043e\u0435\u043c \u0431\u044b\u043b\u0430 \u0432\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c. \u0421\u0435\u0439\u0447\u0430\u0441 \u043a View \u0441\u043b\u043e\u044e \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u044f\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0435\u0433\u043e \u043b\u043e\u0433\u0438\u043a\u043e\u0439. \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043c View \u0441\u043b\u043e\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0435\u0437 \u043b\u043e\u0433\u0438\u043a\u0438. \u0412 Vue \u0438 Angular View \u0447\u0430\u0441\u0442\u044c \u0443\u0436\u0435 \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0430 \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u0434\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c (\u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 SOLID). \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a-\u0431\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 (custom hooks), \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e View, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0432\u043e\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c Redux, \u0433\u0434\u0435 \u043c\u043d\u043e\u0433\u043e \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430 \u0438 \u043f\u0440\u043e\u043f\u0430\u0433\u0430\u043d\u0434\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u043e\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0430\u0445. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u0441\u0435 \u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0434\u0430 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 &#8212; \u0433\u0440\u044f\u0437\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0423 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u0442 \u0447\u0435\u0442\u043a\u043e\u0439 \u0437\u043e\u043d\u044b \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u043e\u0438\u0442 \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0431\u043e\u0440\u043e\u043c, \u0433\u0434\u0435 \u043b\u0443\u0447\u0448\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u2013 \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0445\u0443\u043a\u0435 \u0438\u043b\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435. \u041f\u043b\u043e\u0445\u043e, \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u0445, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0430\u0437\u043d\u043e\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0423 \u043a\u043e\u0434\u0430 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u0445\u0443\u043a\u043e\u0432 (\u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434):<\/strong><\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u0434\u0435\u0442\u044c\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0445\u0443\u043a\u0430. \u042d\u0442\u043e \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 SOLID. \u041a \u043a\u0430\u043a\u0438\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f\u043c \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438? \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0432\u044b \u043f\u043e\u043b\u0433\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u0417\u0430\u0442\u0435\u043c \u043e\u0442 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430 \u043f\u0440\u0438\u0448\u043b\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0425\u043e\u0440\u043e\u0448\u043e, \u0435\u0441\u043b\u0438 \u0443 \u0430\u0432\u0442\u043e\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u0441\u0435 \u0440\u0430\u0437\u0431\u0438\u0442\u043e \u043d\u0430 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0445\u0443\u043a\u0438, \u0438 \u043e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0441\u0432\u043e\u0439. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442, \u0442\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043d\u0443\u043b\u044f, \u0438\u043b\u0438 \u0436\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0444\u043e\u0440\u043a. \u0412 \u0442\u0435\u043e\u0440\u0438\u0438 \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0445\u0443\u043a\u0430\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0445 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435. \u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0430\u043c \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 useState(), \u043d\u0430\u0434\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b props useState(props.value). \u0418\u043b\u0438 \u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u0435\u0441\u043b\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0435 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0434\u0430\u043d\u043d\u044b\u0435. <\/p>\n<p>\u0412 \u043a\u043d\u0438\u0433\u0435 \u041a\u0440\u043e\u043a\u0444\u043e\u0440\u0434 \u0414\u0443\u0433\u043b\u0430 \u00ab\u041a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d JavaScript [2019]\u00bb \u0432 \u0433\u043b\u0430\u0432\u0435 \u00ab\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b\u00bb \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0442\u0430\u043a\u043e\u0439 \u0444\u0440\u0430\u0437\u043e\u0439: \u00ab\u0412 Structured Revolution \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u043e\u0442\u043e\u043a\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438 \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c\u0438.\u00bb \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434 \u2013 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439. \u041b\u044e\u0431\u043e\u0439 \u0445\u0443\u043a \u0436\u0435 \u043d\u0430\u0434\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u043a\u0430\u043a  \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u043a\u043e\u0434: If (isFirstRender) { &#8230; } else { &#8230;}. \u0410 \u0432\u0435\u0434\u044c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435-\u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 addEffect(callback, dependencies) \u0438 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u043e\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Entity Component \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 custom hooks \u0438 \u043d\u044b\u043d\u0435\u0448\u043d\u0438\u043c\u0438 react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438:<\/strong><\/p>\n<ul>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 custom hooks. \u0418\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u0432 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>View \u043e\u0442\u0434\u0435\u043b\u0435\u043d \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u0434\u0430\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442\u044b \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u044b \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 useRef, useCallback, \u0442.\u043a. \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u0435\u043c.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u043c\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Entity Component:<\/strong><\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u042f \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439. \u0415\u0441\u043b\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0439 \u043a\u043e\u0434, \u0442\u043e \u043f\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043e\u043d \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0431\u043b\u0438\u0437\u043e\u043a \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c-\u043a\u043b\u0430\u0441\u0441\u0430\u043c. \u0411\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u0431\u044b \u043f\u043e\u0434\u0445\u043e\u0434 \u0431\u044b\u043b \u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0432 \u0441\u0430\u043c\u043e\u043c React.<\/p>\n<\/li>\n<li>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u0447\u0435\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.&nbsp;\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e, \u043a\u0430\u043a \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445-\u043a\u043b\u0430\u0441\u0441\u0430\u0445. <\/p>\n<\/li>\n<li>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f. \u0414\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0422.\u043a. \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u0432 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043f\u043e\u0432\u0435\u0440\u0445 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0442\u0438\u043f\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445, \u0447\u0435\u043c \u043d\u0443\u0436\u043d\u043e. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u044f \u0434\u0435\u043b\u0430\u043b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0441 \u043e\u0431\u043e\u0438\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438-\u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0438 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438).<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u0443-\u0442\u043e \u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u043a \u043c\u0435\u0442\u043e\u0434\u0430\u043c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u042d\u0442\u043e \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e. \u041c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0445\u0443\u043a\u043e\u0432, \u0445\u043e\u0442\u044f, \u0442\u0430\u043a \u0436\u0435 \u043a\u0440\u0430\u0442\u043a\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f. \u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u044d\u0444\u0444\u0435\u043a\u0442\u044b &#8212; \u044d\u0442\u043e \u0434\u0440\u0443\u0433\u0430\u044f \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0430. \u041d\u043e, \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 &#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440 \u043d\u0430\u0434 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430. \u0414\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 &#8212; \u044d\u0442\u043e \u043d\u0435 \u043f\u043b\u043e\u0445\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"programming-entities\" id=\"programming-entities\"><\/a><\/p>\n<h2>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432 \u043c\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Entity Component<\/h2>\n<ul>\n<li>\n<p><strong>React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/strong>\u2013 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0435\u0433\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f react-\u043e\u043c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u041d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435\u043e\u0442\u044a\u0435\u043c\u043b\u0435\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c React. <\/p>\n<\/li>\n<li>\n<p><strong>Container <\/strong>\u2013 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0435\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b behaviours \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439. <\/p>\n<\/li>\n<li>\n<p><strong>Behaviour (\u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435) <\/strong>\u2013 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0438\u043b\u0438 \u0447\u0430\u0441\u0442\u044c\u044e \u043b\u043e\u0433\u0438\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0427\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0445\u0443\u043a\u043e\u0432, \u043d\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c. \u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043a\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b.<\/p>\n<\/li>\n<li>\n<p><strong>render <\/strong>\u2013 \u043f\u0440\u043e\u0441\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441 JSX \u043a\u043e\u0434\u043e\u043c. \u041d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442! \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0430 \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0427\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432 \u0441\u0432\u043e\u0435\u043c \u0442\u0435\u043b\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>Config <\/strong>\u2013 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0417\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u0412 \u043d\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f behaviours \u0438 render-\u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u043f\u0446\u0438\u0438. <\/p>\n<\/li>\n<li>\n<p><strong>Event emitter <\/strong>\u2013 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \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 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 (behaviours).<\/p>\n<\/li>\n<\/ul>\n<p><strong>&nbsp;\u0412\u0430\u0436\u043d\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0425\u043e\u0442\u044c \u044d\u0442\u043e \u0438 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u044b. \u041a\u043b\u0430\u0441\u0441\u044b-\u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0445\u043e\u0442\u044f \u0431\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u044b\u0441\u044f\u0447 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043f\u0430\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u043c \u0434\u0430\u0436\u0435 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445.<\/p>\n<\/li>\n<li>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f init. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c this \u0434\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 super(). \u0418\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u0430\u0445. \u0415\u0441\u043b\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0442\u043e\u0433\u0434\u0430 \u043d\u0435\u043b\u044c\u0437\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c this \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0432 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0435, \u0438 \u043e\u043d \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043b\u0430\u0441\u0441.<\/p>\n<\/li>\n<li>\n<p>field <em>\u2013 <\/em>\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e&nbsp;&#171;_&#187; \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f protected \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u043b\u0438 \u043c\u0435\u0442\u043e\u0434.<\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u0430 \u043a \u043e\u0431\u043e\u0438\u043c \u0442\u0438\u043f\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2013 \u043a \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c-\u043a\u043b\u0430\u0441\u0441\u0430\u043c. \u041e\u0442\u043b\u0438\u0447\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043c\u0435\u0441\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u043e \u0445\u043e\u0434\u0443.<\/p>\n<p><strong>\u0417\u0430 \u0438\u0434\u0435\u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0432 useRef \u0438 \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u0437 \u0445\u0443\u043a\u043e\u0432 \u2013 \u0441\u043f\u0430\u0441\u0438\u0431\u043e @<\/strong><a href=\"https:\/\/habr.com\/users\/Alexandroppolus\/\" rel=\"noopener noreferrer nofollow\"><strong>Alexandroppolus<\/strong><\/a><strong>! \u0415\u0433\u043e <\/strong><a href=\"https:\/\/habr.com\/ru\/post\/541884\/#comment_22689676\" rel=\"noopener noreferrer nofollow\"><strong>\u043a\u043e\u043c\u043c\u0435\u043d\u0442 <\/strong><\/a><strong>\u043c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 \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.<\/strong><\/p>\n<p><a class=\"anchor\" name=\"es-part1\" id=\"es-part1\"><\/a><\/p>\n<h2>\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 1: Event emitter<\/h2>\n<p>\u0422.\u043a. \u043b\u043e\u0433\u0438\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0430 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0432 \u043d\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \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. \u042d\u0442\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u0430\u0441\u0441 EventEmitter. \u0418\u043c\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u043d\u0435\u043c &#8212; \u044d\u0442\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438\u043c\u044f \u043c\u0435\u0442\u043e\u0434\u0430 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0432 behaviours.<\/p>\n<p>\u0412 \u043c\u043e\u0435\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0434\u0432\u0443\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0439 \u044d\u043c\u0438\u0442\u0442\u0435\u0440\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043f\u0440\u043e\u0449\u0435. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 2 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u0430:<br \/>1) callMethodInBehaviour \u2013 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432 behaviour, \u0438\u043c\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<br \/>2) callMethodInAllBehaviours \u2013 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432\u043e \u0432\u0441\u0435\u0445 behaviours \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>EventEmitter<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">export class SimpleEventEmitter {   _behaviourArray;    init(behaviourArray) {     this._behaviourArray = behaviourArray;   }    callMethodInBehaviour(methodName, behaviourInstance, args = []) {     const behaviourMethod = behaviourInstance[methodName];     if (behaviourMethod) {       behaviourMethod.apply(behaviourInstance, args);     }   }    callMethodInAllBehaviours(methodName, args = []) {     this._behaviourArray.forEach(beh =&gt; {       if (beh[methodName]) {         beh[methodName](...args);       }     });   } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0437\u0430\u0434\u0430\u043d \u043f\u0435\u0440\u0435\u0447\u0435\u043d\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430. \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u043e\u0432\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u043f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 behaviour, \u0442.\u043a. \u0442\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>LifeCycleEvents<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">export const LifeCycleEvents = {   BEHAVIOUR_ADDED: 'behaviourAdded',   COMPONENT_INITIALIZED: 'componentInitialized',   COMPONENT_DID_MOUNT: 'componentDidMount',    COMPONENT_DID_UPDATE: 'componentDidUpdate',    \/\/ \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u0438\u0437 useEfect()   COMPONENT_DID_UPDATE_EFFECT: 'componentDidUpdateEffect',    BEHAVIOUR_WILL_REMOVED: 'behaviourWillRemoved',   COMPONENT_WILL_UNMOUNT: 'componentWillUnmount',    \/\/ \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 };<\/code><\/pre>\n<\/div>\n<\/details>\n<p><a class=\"anchor\" name=\"es-part2\" id=\"es-part2\"><\/a><\/p>\n<h3>\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 2: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/h3>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f:<\/p>\n<ul>\n<li>\n<p>\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 behaviours \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043d\u0438\u043c<\/p>\n<\/li>\n<li>\n<p>\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430-\u0441\u043b\u043e\u0432\u0430\u0440\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0435\u0433\u043e behaviours<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f behaviours \u0438\u0437 \u0441\u0432\u043e\u0438\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 config <\/p>\n<\/li>\n<li>\n<p>\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u044d\u043c\u0438\u0442\u0442\u0435\u0440\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 behaviours<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 render \u0438\u0437 config, \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432 \u043d\u0435\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 behaviours, \u0437\u0430\u0442\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u0433\u043e\u0441\u044f JSX \u043a\u043e\u0434\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043c\u0435\u0442\u043e\u0434\u0435 <strong>render<\/strong> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 <strong>mapToMixedRenderData<\/strong>. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c behaviour \u043c\u0435\u0442\u043e\u0434 <strong>mapToRenderData <\/strong>\u0438 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442. \u042d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 <a href=\"https:\/\/vuejs.org\/v2\/guide\/mixins.html#Custom-Option-Merge-Strategies\" rel=\"noopener noreferrer nofollow\">optionMergeStrategies <\/a>\u0432 Vue. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043d \u0443 \u043c\u0435\u043d\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0432\u0435\u0442\u043a\u0435. \u0412 \u043a\u043e\u0434\u0435 \u043a \u0441\u0442\u0430\u0442\u044c\u0435 \u044d\u0442\u0430 \u0447\u0430\u0441\u0442\u044c \u0443\u0431\u0440\u0430\u043d\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0433\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u0432: AbstractContainer<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { LifeCycleEvents } from '.\/LifeCycleEvents'; import { SimpleEventEmitter } from '.\/eventEmitters\/SimpleEventEmitter';  export class AbstractContainer {   _eventEmitter;   _config;    \/\/ Array with all behaviours of component   behaviourArray = [];    \/\/ Object (dictionary) with all behaviours of container.    \/\/ To simplify access to behaviour by name   behs = {};    \/\/ Object (dictionary) with pairs [behaviourName]: behParamsObject   behsParams = {};    get eventEmitter() {     return this._eventEmitter;   }    get config() {     return this._config;   }    get state() {     console.error('container state getter is not implemented');   }    get props() {     console.error('container props getter is not implemented');   }    init(config, props) {     this._eventEmitter = new SimpleEventEmitter();     this._eventEmitter.init(this.behaviourArray);     this._config = config;      this._createBehaviours(props);   }    _createBehaviours(props) {     const defaultBehaviours = props?.defaultBehaviours;     const allBehParams = defaultBehaviours        || this.config.behaviours || [];      \/\/ create behaviours     allBehParams.forEach(oneBehParams =&gt; {       const { behaviour, initData, ...passedBehParams } = oneBehParams;       this.addBehaviour(behaviour, props, initData, passedBehParams);     });      this._eventEmitter.callMethodInAllBehaviours(       LifeCycleEvents.COMPONENT_INITIALIZED,       [props],     );   }    setState(stateOrUpdater){     console.error('container setState is not implemented');   }    addBehaviour(behaviour, props, initData, behaviourParams = {}) {     const newBeh = new behaviour();     this.behaviourArray.push(newBeh);      this.behs[ newBeh.name ] = newBeh;     this.behsParams[ newBeh.name ] = behaviourParams;      if (newBeh.init) {       newBeh.init(this, props, initData, behaviourParams);     }      this._eventEmitter.callMethodInBehaviour(       LifeCycleEvents.BEHAVIOUR_ADDED, newBeh);     return newBeh;   }    removeBehaviour(behaviourInstance) {     const foundIndex = this.behaviourArray.indexOf(behaviourInstance);     if (foundIndex &gt; -1) {       this._eventEmitter.callMethodInBehaviour(         LifeCycleEvents.BEHAVIOUR_WILL_REMOVED, behaviourInstance);        this.behaviourArray.splice(foundIndex, 1);       delete this.behs[behaviourInstance.name];       delete this.behsParams[behaviourInstance.name];      } else {       console.warn(         `removeBehaviour error: ${behaviourInstance.name} not found`       );     }   }    \/\/ Return all behaviours renderData mixed in single object.   _mapToMixedRenderData() {     let retRenderData = this.behaviourArray.reduce((mixedData, beh) =&gt; {       const behRenderData = beh.mapToRenderData();       Object.assign(mixedData, behRenderData);       return mixedData;     }, {});     return retRenderData;   }    render() {     const renderFunc = this.config.render       ? this.config.render       : ({ props }) =&gt; props?.children;      return renderFunc({       props: this.props,       ...this._mapToMixedRenderData(this)     });   }; }<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0418 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041e\u043d\u0438 \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f. \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 <strong>props, state, setState<\/strong>. \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0430\u043c \u0445\u0440\u0430\u043d\u0438\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <strong>props<\/strong>, \u0430 \u0442\u0430\u043a\u0436\u0435 <strong>state <\/strong>\u0438 <strong>setState<\/strong>, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c\u044b\u0435 \u0438\u0437\u0432\u043d\u0435 \u043e\u0442 \u0445\u0443\u043a\u0430 useState.<\/p>\n<details class=\"spoiler\">\n<summary>ContainerForClassComponent \u0438 ContainerForFunctionalComponent<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { AbstractContainer } from '..\/AbstractContainer';  export class ContainerForClassComponent extends AbstractContainer {   _component;    get state() {     return this._component.state;   }    get props() {     return this._component.props;   }    setState = (stateOrUpdater) =&gt;{     this._component.setState(stateOrUpdater);   };    init(config, props, component) {     this._component = component;     super.init(config, props);   } }   import { AbstractContainer } from '..\/AbstractContainer';  export class ContainerForFunctionalComponent    extends AbstractContainer {   _props;   _state;    init(config, props, state, setState) {     this._props = props;     this._state = state;     this.setState = setState;     super.init(config, props);   }    get state() {     return this._state;   }    set state(state) {      this._state = state;   }    get props() {     return this._props;   }    set props(props) {     this._props = props;   } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p><a class=\"anchor\" name=\"es-part3\" id=\"es-part3\"><\/a><\/p>\n<h2>\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 3: \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430<\/h2>\n<p>\u041a\u043b\u0430\u0441\u0441\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u044b. \u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>\u0414\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441 ComponentWithContainer, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u0432 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 \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 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0432 behaviours \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e event emitter-\u0430.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043f\u0438\u0441\u0430\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e createComponentWithContainer.<br \/>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b-\u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0438. \u0414\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u043e\u0431\u0449\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 &#8212; ComponentWithContainer. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432 config.<\/p>\n<details class=\"spoiler\">\n<summary>ComponentWithContainer<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { LifeCycleEvents } from '..\/LifeCycleEvents'; import { ContainerForClassComponent } from '.\/ContainerForClassComponent';  class ComponentWithContainer extends React.Component {   _container;    constructor(props, context, config) {     super(props, context);     this._container = new ContainerForClassComponent();     this._container.init(config, props, this);   }    componentDidMount() {     this._container.eventEmitter.callMethodInAllBehaviours(       LifeCycleEvents.COMPONENT_DID_MOUNT,     );   }    componentDidUpdate(...args) {     this._container.eventEmitter.callMethodInAllBehaviours(       LifeCycleEvents.COMPONENT_DID_UPDATE, args,     );   }    componentWillUnmount() {     this._container.eventEmitter.callMethodInAllBehaviours(       LifeCycleEvents.BEHAVIOUR_WILL_REMOVED,     );     this._container.eventEmitter.callMethodInAllBehaviours(       LifeCycleEvents.COMPONENT_WILL_UNMOUNT,     );   }    render() {     return this._container.render();   } }  export const createComponentWithContainer = (componentName, config) =&gt; {   return class extends ComponentWithContainer {     constructor(props, context) {       super(props, context, config);     }     static displayName = componentName;   }; }; <\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0430\u043d\u0430\u043b\u043e\u0433 \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. <br \/>\u0427\u0442\u043e\u0431\u044b \u0433\u0434\u0435-\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0445\u0443\u043a useRef. <br \/>\u0410 \u0447\u0442\u043e\u0431\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u0431\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0441\u043b\u043e\u0432\u0430\u0440\u044f \u0434\u043b\u044f behaviours \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e, \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0445\u0443\u043a useState.<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \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, \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f&nbsp;\u0445\u0443\u043a useEffect. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0435\u0449\u0435 useLayout \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043d\u043e \u0434\u043b\u044f \u043a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u0438 \u044f \u043f\u0440\u043e\u043f\u0443\u0449\u0443 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442. \u0412 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0442\u043a\u0435 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043e\u0431\u0430 \u0445\u0443\u043a\u0430.<\/p>\n<details class=\"spoiler\">\n<summary>useBehaviours<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { useRef, useState, useEffect } from 'react'; import { LifeCycleEvents } from '..\/LifeCycleEvents'; import { ContainerForFunctionalComponent }    from '.\/ContainerForFunctionalComponent';  export const useBehaviours = (config = {behaviours: []}, props) =&gt;{   let isFirstRender = false;   const ref = useRef();    \/\/ create shared state   const [state, setState] = useState({});    \/\/ get exist or get new passed initial config   const initialConfig = ref.current     ? ref.current.config     : config;    if (!ref.current) {     ref.current = new ContainerForFunctionalComponent();     ref.current.init(initialConfig, props, state, setState);     isFirstRender = true;   } else {     \/\/ update state and props in container     ref.current.state = state;     ref.current.props = props;   }   const container = ref.current;    callLifeCycleEvents(     container.eventEmitter, initialConfig, isFirstRender);   return container.render(); };  const callLifeCycleEvents =    (eventEmitter, initialConfig, isFirstRender) =&gt; {   \/\/ on mount, unmount   useEffect(() =&gt; {     eventEmitter.callMethodInAllBehaviours(       LifeCycleEvents.COMPONENT_DID_MOUNT);     return () =&gt; {       eventEmitter.callMethodInAllBehaviours(         LifeCycleEvents.BEHAVIOUR_WILL_REMOVED);       eventEmitter.callMethodInAllBehaviours(         LifeCycleEvents.COMPONENT_WILL_UNMOUNT);     }   }, []);    \/\/ on update   useEffect(() =&gt; {     if (!isFirstRender) {       eventEmitter.callMethodInAllBehaviours(         LifeCycleEvents.COMPONENT_DID_UPDATE_EFFECT);     }   }); }; <\/code><\/pre>\n<\/div>\n<\/details>\n<p><a class=\"anchor\" name=\"es-part4\" id=\"es-part4\"><\/a><\/p>\n<h2>\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 4: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (behaviour) \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445<\/h2>\n<p>\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u043b, \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u0438 \u0434\u043b\u044f \u0435\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u2013 behaviour. <br \/>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n<details class=\"spoiler\">\n<summary>BaseBehaviour<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import lowerFirst from \"lodash\/lowerFirst\";  export class BaseBehaviour {   \/\/ \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 \u043d\u0430 \u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c   \/\/ \u043f\u043e \u0442\u0438\u043f\u0443.   type = Object.getPrototypeOf(this).constructor.name;    \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440   name = lowerFirst(this.type);    \/\/ \u0414\u0430\u043d\u043d\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u044e    \/\/ mapToRenderData. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c   \/\/ \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f    \/\/ \u0438\u0445 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432 props \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0422\u0430\u043a\u0438\u0445 \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442   \/\/ \u043f\u043e\u043c\u043e\u0447\u044c \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0445 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043e\u043a. useCallback \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435   \/\/ \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u043c.   passedToRender = {};    init(container, props, initData = {}, config) {     this.container = container;     if (initData.defaultState) {       this.defaultState = initData.defaultState;     }   }    \/\/ \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435   get ownProps() {     const propBehaviourName = `bh-${this.name}`;     return this.container.props?.[propBehaviourName];   }    \/\/ \u042d\u043c\u0443\u043b\u044f\u0446\u0438\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e behaviour.   \/\/ \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442-\u0441\u043b\u043e\u0432\u0430\u0440\u044c, \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0439\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435   \/\/ \u0438\u043b\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435. \u041a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435-\u0441\u043b\u043e\u0432\u0430\u0440\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442   \/\/ \u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 behaviour. \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 behaviour \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f   \/\/ \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 mapToRenderData.   get state() {     const defaultValue = this.defaultState;     return this.container.state       ? this.container.state[this.name] || defaultValue       : defaultValue;   }    \/\/ \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 behaviour \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.   \/\/ C\u0438\u0433\u043d\u0430\u0442\u0443\u0440\u0430 \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u0430 \u043c\u0435\u0442\u043e\u0434\u0443 setState    \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-\u043a\u043b\u0430\u0441\u0441\u0430.      setState(stateOrUpdater, callback) {     if (typeof stateOrUpdater === 'function') {       const updater = stateOrUpdater;       this.container.setState((prevState) =&gt; {           return {             ...prevState,             [ this.name ]: updater(prevState[ this.name ])           };         },         callback);       return;     }      const newPartialState = stateOrUpdater;     this.container.setState((prevState) =&gt; {       return {         ...prevState,         [this.name]: newPartialState       };     });   }    \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0443\u0442\u044c\u0441\u044f    \/\/ \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e render, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0443\u044e \u0432 config \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435   mapToRenderData() {     return {       ...this.state,       ...this.passedToRender,     };   }    \/\/ \u041e\u0447\u0438\u0441\u0442\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0438   behaviourWillRemoved() {     this.setState(undefined);   } }<\/code><\/pre>\n<\/div>\n<\/details>\n<p><a class=\"anchor\" name=\"es-part5\" id=\"es-part5\"><\/a><\/p>\n<h2>\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 5: \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0445\u0435\u043c\u0430<\/h2>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u0430 Entity Component \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-\u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \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 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430. \u0411\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438, \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 behaviour<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">import { createComponentWithContainer }    from \"..\/core\/forClassComponent\/createComponentWithContainer\"; import { BaseBehaviour } from \"..\/core\/BaseBehaviour\";  \/\/ \u0417\u0434\u0435\u0441\u044c \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435  \/\/ \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 render class CounterBehaviour extends BaseBehaviour {   defaultState = { count: 0 };   passedToRender = {     setCount: value =&gt; {       this.setState({ count: value });     }   }; }  export const CounterExample = createComponentWithContainer(   'CounterExample', {     behaviours: [{ behaviour: CounterBehaviour }],     render: ({ count, setCount }) =&gt; (       &lt;&gt;         &lt;h3&gt;Counter Example&lt;\/h3&gt;         &lt;p&gt;You clicked {count} times&lt;\/p&gt;         &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;\/button&gt;       &lt;\/&gt;     ),   });  export const CounterExampleWithHooks = (props) =&gt; {   return useBehaviours({       behaviours: [{ behaviour: CounterBehaviour }],       render: ({ count, setCount }) =&gt; (         &lt;&gt;           &lt;h3&gt;Counter Example&lt;\/h3&gt;           &lt;p&gt;You clicked {count} times&lt;\/p&gt;           &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Click me&lt;\/button&gt;         &lt;\/&gt;       ),     },     props); };<\/code><\/pre>\n<\/div>\n<\/details>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, behaviours \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043e\u0431\u043e\u0438\u0445 \u0442\u0438\u043f\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0438\u043c\u0435\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0438\u043c\u0435\u043d\u0430. <\/p>\n<p>\u041e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e render \u0438 \u043e\u0431\u044a\u0435\u043a\u0442 config \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u043e\u0445\u043e\u0436\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>\u0422.\u043a. \u0432 behaviour \u043c\u0435\u0442\u043e\u0434 mapToRenderData \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0432 \u043d\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0443\u043a\u0438. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f, \u0435\u0441\u043b\u0438 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0445\u0443\u043a\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0445\u0443\u043a\u043e\u0432. \u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u0443\u043a\u043e\u0432, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u0441\u0435\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0435\u0441\u0442\u044c \u0432 <a href=\"https:\/\/github.com\/sergeysibara\/entity-component-in-react\/blob\/habr-version\/src\/lifeCycleExampleWithHooks\/LifeCycleExampleWithHooks.js\" rel=\"noopener noreferrer nofollow\">\\src\\LifeCycleExampleWithHooks\\ LifeCycleExampleWithHooks.js <\/a><br \/>\u041d\u043e, \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043d\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c \u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u043e\u0442\u043e\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e,  \u043a\u0430\u043a \u043d\u0430 \u0441\u0445\u0435\u043c\u0435 \u043d\u0438\u0436\u0435. \u0421\u0438\u043d\u0438\u043c \u043e\u0442\u043c\u0435\u0447\u0435\u043d \u043f\u043e\u0442\u043e\u043a \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.  \u0417\u0435\u043b\u0435\u043d\u044b\u043c \u043e\u0442\u043c\u0435\u0447\u0435\u043d \u043f\u043e\u0442\u043e\u043a \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/83b\/075\/2f8\/83b0752f864eb2b248177b88d30855b9.png\" width=\"926\" height=\"453\"><figcaption><\/figcaption><\/figure>\n<ol>\n<li>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 props.<\/p>\n<\/li>\n<li>\n<p>behaviour \u043f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0431\u0435\u0440\u0435\u0442 props \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043b\u0438\u0431\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0438\u0445 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430. <\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f render \u0438\u0437 config, \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 mapToRenderData \u0432 behaviour. mapToRenderData \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b state \u0438 passedToRender, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0438\u0445 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 renderData \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f render \u0432 config-\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 renderData \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0435\u0433\u043e \u0432 JSX \u043a\u043e\u0434\u0435.<\/p>\n<\/li>\n<li>\n<p> \u0414\u0430\u043b\u0435\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u0439 JSX \u043a\u043e\u0434.<\/p>\n<\/li>\n<\/ol>\n<p><a class=\"anchor\" name=\"props\" id=\"props\"><\/a><\/p>\n<h2>\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435. \u0413\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 props<\/h2>\n<p>\u0412 BaseBehaviour \u0432\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u0433\u0435\u0442\u0442\u0435\u0440 ownProps:<\/p>\n<pre><code class=\"javascript\">get ownProps() {   const propBehaviourName = `bh-${this.name}`;   return this.container.props?.[propBehaviourName]; }<\/code><\/pre>\n<p>\u041f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d \u043d\u0443\u0436\u0435\u043d. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c props, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 bahaviour. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">&lt;Form    bh-bindModel={customModel}    bh-formController={{onSubmit: customAction }}  \/&gt; <\/code><\/pre>\n<p>\u0427\u0435\u0440\u0435\u0437 \u043f\u0440\u0435\u0444\u0438\u043a\u0441 &#171;<strong>bh-<\/strong>&#187; \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0438\u043c\u0435\u043d\u0430 2-\u0445 &nbsp;behaviours \u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043c. <\/p>\n<p>\u041c\u0435\u043d\u044f \u043c\u043e\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0433\u0435\u0442\u0442\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c React-Admin. \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e props \u0438 \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043a \u043a\u0430\u043a\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443\/\u0445\u0443\u043a\u0443\/HOC \u043e\u043d\u0438 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f. \u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: <a href=\"https:\/\/github.com\/marmelab\/react-admin\/blob\/master\/packages\/ra-ui-materialui\/src\/form\/SimpleForm.tsx\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/marmelab\/react-admin\/blob\/master\/packages\/ra-ui-materialui\/src\/form\/SimpleForm.tsx<\/a><\/p>\n<p><a class=\"anchor\" name=\"directives\" id=\"directives\"><\/a><\/p>\n<h2>\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435. \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b &#8212; \u044d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0437\u0430 \u0447\u0442\u043e \u0438\u0445 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442. \u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0435\u0442?<\/h2>\n<p>\u0413\u0440\u0443\u0431\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0432 Angular \u0438 \u0432 Vue \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u041e\u0447\u0435\u043d\u044c \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u043d\u043e \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u043c \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u0435\u043c \u0432\u0432\u043e\u0434\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e. \u0414\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0430 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u0432 \u043c\u043e\u0435\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438 \u2013 \u044d\u0442\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 (props \u0432 react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435). \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0432 \u043c\u043e\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u2013 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044f behaviours \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 props. <\/p>\n<p>\u0412 React \u0440\u0435\u0448\u0438\u043b\u0438 \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0443 \u0430\u0432\u0442\u043e\u0440\u043e\u0432 React \u043d\u0435 \u0442\u0430\u043a\u043e\u0435 \u0432\u0438\u0434\u0435\u043d\u044c\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432, \u043a\u0430\u043a \u0443 \u043c\u0435\u043d\u044f. \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b &#8212; \u044d\u0442\u043e \u043d\u0435\u043e\u0442\u044a\u0435\u043c\u043b\u0435\u043c\u0430\u044f \u0447\u0430\u0441\u0442\u044c HTML. \u0412\u043f\u043e\u043b\u043d\u0435 \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.  \u0414\u0430, \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437 \u043d\u0438\u0445. \u041d\u043e \u0442\u043e\u0433\u0434\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f 5 \u0442\u0438\u043f\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 5 \u0442\u0438\u043f\u043e\u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 50-\u0442\u0438 \u0442\u0438\u043f\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. <\/p>\n<p>\u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043c\u043e\u0435\u043c\u0443 \u043a\u043e\u0434\u0443. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0432\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">_createBehaviours(props) {   const defaultBehaviours = props?.defaultBehaviours;   const allBehParams = defaultBehaviours || this.config.behaviours || [];<\/code><\/pre>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c behaviours \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <strong>defaultBehaviours<\/strong>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c behaviours, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0442\u0438\u043f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u043e \u0441 \u0440\u0430\u0437\u043d\u044b\u043c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>CounterBehaviour \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u044b\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0442\u0430\u043a, \u0430 \u043d\u0435 \u0432 \u043a\u043e\u0434\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;CounterExample defaultBehaviours={[      {behaviour: CounterBehaviour, initData: {count: 0}    ]}  \/&gt;<\/code><\/pre>\n<p><a class=\"anchor\" name=\"epilogue\" id=\"epilogue\"><\/a><\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435. \u0412 \u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 Entity Component \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d<\/h2>\n<p>\u042f \u043e\u0441\u043e\u0431\u043e \u043d\u0435 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0415\u0441\u043b\u0438 \u043a\u0442\u043e-\u0442\u043e \u0441 \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0445\u043e\u0447\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043b\u0438\u0447\u043a\u0443. <\/p>\n<p>\u041a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0435\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434 Entity Component \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u0441\u0442\u0435\u043a\u0435 \u0438 \u043e\u0446\u0435\u043d\u0438\u0432\u0448\u0435\u043c\u0443 \u0435\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430, \u043c\u043d\u0435 \u0431\u044b\u043b\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u043e \u0441\u0445\u043e\u0436\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439 (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0438 \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438) \u0438 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c.<\/p>\n<p>\u042f \u043d\u0435 \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0432 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435. \u041f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043d\u0435 \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c. \u0414\u043b\u044f \u043f\u0440\u043e\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u0438\u043b \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e \u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u043e&nbsp;\u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0446\u0435\u043b\u044f\u0445 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u0430. \u0425\u043e\u0442\u044f, \u0438 \u044d\u0442\u043e\u0433\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. <\/p>\n<p>\u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u0445, \u0433\u0434\u0435 \u043d\u0435 \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0430 \u0433\u0434\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b. EC \u0433\u0438\u0431\u0447\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0432 \u0432\u0435\u0431\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432, \u0442.\u043a. \u043e\u043d \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u043d\u0435 \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0430 \u043d\u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043d\u0438\u0436\u0435 &#8212; \u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. <br \/>\u0422\u0430\u043a\u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u0435\u043d, \u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b (React Native \u0438 Web) \u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u044b\u0439 JSX \u043a\u043e\u0434.  \u042f \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u043b \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">const renderButtonWeb = ({ propA, propB, ...props}) =&gt; (&lt;div&gt; ... &lt;\/div&gt;); const renderButtonNative = ({ propA, propB, ...props}) =&gt; (&lt;div&gt; ... &lt;\/div&gt;);  const WebButton = createContainerComponent(\"WebButton\", {   behaviours: [      { behaviour: CommonButtonMethods },      { behaviour: WebButtonMethods }   ],    render: renderButtonWeb });  const NativeButton = createContainerComponent(\"NativeButton\", {     behaviours: [      { behaviour: CommonButtonMethods },      { behaviour: NativeButtonMethods }    ],     render: renderButtonNative  });<\/code><\/pre>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/545064\/\"> https:\/\/habr.com\/ru\/post\/545064\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0434\u043b\u044f React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u0438\u0445 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445. \u041a\u0430\u043a \u044f \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 &#171;<a href=\"https:\/\/habr.com\/ru\/post\/545368\/\" rel=\"noopener noreferrer nofollow\">\u0422\u0435\u0445\u043d\u0438\u043a\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u0434\u0430<\/a>&#187; \u0432 \u0433\u043b\u0430\u0432\u0435 &#171;<a href=\"https:\/\/habr.com\/ru\/post\/545368\/#ec\" rel=\"noopener noreferrer nofollow\">Entity Component (EC)<\/a>&#171;, \u044f \u043d\u0435 \u0437\u043d\u0430\u044e \u0442\u043e\u0447\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0430. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0431\u0443\u0434\u0443 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e Entity Component (EC). <\/p>\n<p>Entity Component \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0447\u0442\u043e HOC \u0438 Custom hooks \u2013 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u043c\u0435\u0436\u0434\u0443&nbsp;\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u043e\u0434\u043d\u043e\u0442\u0438\u043f\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432\/\u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435. \u042d\u0442\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c&nbsp;\u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0434\u0430\u0432\u043d\u043e, \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0440\u0430\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0441 \u043d\u0435\u0439 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0432 \u0432\u0435\u0431\u0435. \u0418 \u0434\u0430\u0432\u043d\u043e \u0431\u044b\u043b\u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u044b \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p>Custom hooks \u0438 Entity Component &#8212; \u043e\u0431\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u043d\u0435\u043a\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. \u0422\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043e\u043d\u0438 \u0431\u043b\u0438\u0437\u043a\u0438 \u043a \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 \u00ab\u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f\u00bb. \u041d\u043e, Entity Component \u2013 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (\u0441\u0443\u0434\u044f \u043f\u043e \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044f \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b), \u0430 Custom hooks &#8212;  \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439. <\/p>\n<p>\u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0432\u0430\u043c \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d, \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043d\u0443\u0436\u0434\u044b. \u0423\u0437\u043d\u0430\u0435\u0442\u0435 \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043f\u0440\u0438\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. <br \/>\u0422\u0435, \u043a\u0442\u043e \u043f\u0438\u0448\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u043a\u043b\u0430\u0441\u0441\u044b, \u0443\u0437\u043d\u0430\u0435\u0442, \u043a\u0430\u043a \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u0447\u0435\u043c HOC, \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043b\u0438\u0448\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b-\u043e\u0431\u0435\u0440\u0442\u043a\u0438.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0442\u043e \u043f\u043e\u0434\u0445\u043e\u0434 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442. \u041d\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044f \u043d\u0435 \u0441\u043c\u043e\u0433\u0443 \u0435\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c. \u041e\u043d \u0434\u0430\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0433\u0435\u0439\u043c\u0434\u0435\u0432\u0435, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 UI. \u0417\u0434\u0435\u0441\u044c \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u043e\u0437\u0440\u0430\u0437\u044f\u0442: &#171;\u044d\u0442\u043e \u0436\u0435 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0438 \u0432\u0440\u044f\u0434 \u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448 \u0432 \u0432\u0435\u0431\u0435&#187;. \u042d\u0442\u043e \u0442\u0430\u043a, \u0435\u0441\u043b\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435  \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f. \u0417\u0434\u0435\u0441\u044c \u0436\u0435 \u043e\u043d\u0438 \u043f\u043e\u0445\u043e\u0436\u0438. \u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 \u0432 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0441\u0446\u0435\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (DOM \u0438 \u0434\u0435\u0440\u0435\u0432\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0441\u0446\u0435\u043d\u044b). \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0432\u0435\u0431\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0438\u0433\u0440\u0430\u0445 \u0442\u043e\u0436\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 \u0432\u0435\u0431\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 (\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b\/\u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0438\u043b\u0438 \u0445\u0443\u043a\u0438), \u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0438\u0433\u0440\u0430\u0445 \u0442\u043e\u0436\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445. \u041e\u0442\u043b\u0438\u0447\u0438\u044f \u0435\u0441\u0442\u044c, \u043d\u043e \u043d\u0435 \u0442\u0430\u043a\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0435\u043b\u044c\u0437\u044f \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b. \u041f\u0440\u043e\u0441\u0442\u043e \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c.<\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u043d\u0438\u0436\u0435.<\/p>\n<p><strong>\u041a\u043e\u0434 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438: <\/strong><a href=\"https:\/\/github.com\/sergeysibara\/entity-component-in-react\/tree\/habr-version\" rel=\"noopener noreferrer nofollow\"><strong>github<\/strong><\/a><br \/><strong>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f: <\/strong><a href=\"https:\/\/github.com\/sergeysibara\/entity-component-in-react\" rel=\"noopener noreferrer nofollow\"><strong>github<\/strong><\/a><strong>, <\/strong><a href=\"https:\/\/codesandbox.io\/s\/entity-cmponent-in-react-2021-q41y3\" rel=\"noopener noreferrer nofollow\"><strong>codesanbox<\/strong><\/a><\/p>\n<h4>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h4>\n<ul>\n<li>\n<p><a href=\"#react-hooks\" rel=\"noopener noreferrer nofollow\">\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0445\u0443\u043a\u043e\u0432. \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u043c\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Entity Component.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#programming-entities\" rel=\"noopener noreferrer nofollow\">\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432 \u043c\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Entity Component<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#es-part1\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 1: Event emitter<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#es-part2\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 2: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#es-part3\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 3: \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#es-part4\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 4: \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 (behaviour) \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#es-part5\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 5: \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0445\u0435\u043c\u0430.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#props\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435. \u0413\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 props.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#directives\" rel=\"noopener noreferrer nofollow\">\u0414\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435. \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b &#8212; \u044d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0437\u0430 \u0447\u0442\u043e \u0438\u0445 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442. \u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u0431\u044b \u0438 \u043d\u0435\u0442?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#epilogue\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435. \u0412 \u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 Entity Component \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d.<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"react-hooks\" id=\"react-hooks\"><\/a><\/p>\n<h2>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0445\u0443\u043a\u043e\u0432. \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u043c\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Entity Component<\/h2>\n<p>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0445\u0443\u043a\u043e\u0432 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0441\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c. \u0418\u0445 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438. \u041f\u0440\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u044b \u0432 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0438 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0435\u0434\u0443\u0442 \u043a \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c.<\/p>\n<p><strong>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434):<\/strong><\/p>\n<ul>\n<li>\n<p>\u041b\u043e\u0433\u0438\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b \u0441 View. \u041a\u043e\u0433\u0434\u0430-\u0442\u043e view \u0441\u043b\u043e\u0435\u043c \u0431\u044b\u043b\u0430 \u0432\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0430\u044f \u0447\u0430\u0441\u0442\u044c. \u0421\u0435\u0439\u0447\u0430\u0441 \u043a View \u0441\u043b\u043e\u044e \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u044f\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u0435\u0433\u043e \u043b\u043e\u0433\u0438\u043a\u043e\u0439. \u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043c View \u0441\u043b\u043e\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0435\u0437 \u043b\u043e\u0433\u0438\u043a\u0438. \u0412 Vue \u0438 Angular View \u0447\u0430\u0441\u0442\u044c \u0443\u0436\u0435 \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0430 \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u0434\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c (\u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 SOLID). \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a-\u0431\u044b \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 (custom hooks), \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e View, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0432\u043e\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c Redux, \u0433\u0434\u0435 \u043c\u043d\u043e\u0433\u043e \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0430 \u0438 \u043f\u0440\u043e\u043f\u0430\u0433\u0430\u043d\u0434\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u043e\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0432 \u0440\u0435\u0434\u044c\u044e\u0441\u0435\u0440\u0430\u0445. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u0441\u0435 \u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0434\u0430 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 &#8212; \u0433\u0440\u044f\u0437\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u0423 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u0442 \u0447\u0435\u0442\u043a\u043e\u0439 \u0437\u043e\u043d\u044b \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438. \u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u043e\u0438\u0442 \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0431\u043e\u0440\u043e\u043c, \u0433\u0434\u0435 \u043b\u0443\u0447\u0448\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u2013 \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0445\u0443\u043a\u0435 \u0438\u043b\u0438 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435. \u041f\u043b\u043e\u0445\u043e, \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u0445, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0430\u0437\u043d\u043e\u0435 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0423 \u043a\u043e\u0434\u0430 \u043b\u044e\u0431\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u0445\u0443\u043a\u043e\u0432 (\u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434):<\/strong><\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f, \u043f\u0440\u0438\u0434\u0435\u0442\u044c\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0445\u0443\u043a\u0430. \u042d\u0442\u043e \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 SOLID. \u041a \u043a\u0430\u043a\u0438\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f\u043c \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438? \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c \u0432\u044b \u043f\u043e\u043b\u0433\u043e\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u0417\u0430\u0442\u0435\u043c \u043e\u0442 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0430 \u043f\u0440\u0438\u0448\u043b\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0425\u043e\u0440\u043e\u0448\u043e, \u0435\u0441\u043b\u0438 \u0443 \u0430\u0432\u0442\u043e\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u0441\u0435 \u0440\u0430\u0437\u0431\u0438\u0442\u043e \u043d\u0430 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0445\u0443\u043a\u0438, \u0438 \u043e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0437 \u043d\u0438\u0445 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0441\u0432\u043e\u0439. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442, \u0442\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u043b\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043d\u0443\u043b\u044f, \u0438\u043b\u0438 \u0436\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0444\u043e\u0440\u043a. \u0412 \u0442\u0435\u043e\u0440\u0438\u0438 \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0445\u0443\u043a\u0430\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0445 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435. \u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043e\u0448\u0438\u0431\u043a\u0430\u043c \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 useState(), \u043d\u0430\u0434\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b props useState(props.value). \u0418\u043b\u0438 \u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u0435\u0441\u043b\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0435 \u043c\u0435\u043c\u043e\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u0434\u0430\u043d\u043d\u044b\u0435. <\/p>\n<p>\u0412 \u043a\u043d\u0438\u0433\u0435 \u041a\u0440\u043e\u043a\u0444\u043e\u0440\u0434 \u0414\u0443\u0433\u043b\u0430 \u00ab\u041a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d JavaScript [2019]\u00bb \u0432 \u0433\u043b\u0430\u0432\u0435 \u00ab\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b\u00bb \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0442\u0430\u043a\u043e\u0439 \u0444\u0440\u0430\u0437\u043e\u0439: \u00ab\u0412 Structured Revolution \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u043f\u043e\u0442\u043e\u043a\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438 \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u043c\u0438.\u00bb \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434 \u2013 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439. \u041b\u044e\u0431\u043e\u0439 \u0445\u0443\u043a \u0436\u0435 \u043d\u0430\u0434\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u043a\u0430\u043a  \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u043a\u043e\u0434: If (isFirstRender) { &#8230; } else { &#8230;}. \u0410 \u0432\u0435\u0434\u044c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435-\u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 addEffect(callback, dependencies) \u0438 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u043e\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f Entity Component \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 custom hooks \u0438 \u043d\u044b\u043d\u0435\u0448\u043d\u0438\u043c\u0438 react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438:<\/strong><\/p>\n<ul>\n<li>\n<p>\u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 custom hooks. \u0418\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u0432 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>View \u043e\u0442\u0434\u0435\u043b\u0435\u043d \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u0434\u0430\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442\u044b \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u044b \u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u0432 \u0441\u0430\u043c\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 useRef, useCallback, \u0442.\u043a. \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0443 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u0435\u043c.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u043c\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Entity Component:<\/strong><\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u042f \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439. \u0415\u0441\u043b\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0439 \u043a\u043e\u0434, \u0442\u043e \u043f\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043e\u043d \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0431\u043b\u0438\u0437\u043e\u043a \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c-\u043a\u043b\u0430\u0441\u0441\u0430\u043c. \u0411\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u0431\u044b \u043f\u043e\u0434\u0445\u043e\u0434 \u0431\u044b\u043b \u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0432 \u0441\u0430\u043c\u043e\u043c React.<\/p>\n<\/li>\n<li>\n<p>\u0411\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u0447\u0435\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445.&nbsp;\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e, \u043a\u0430\u043a \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445-\u043a\u043b\u0430\u0441\u0441\u0430\u0445. <\/p>\n<\/li>\n<li>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f. \u0414\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0422.\u043a. \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043e \u0432 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u043f\u043e\u0432\u0435\u0440\u0445 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0442\u0438\u043f\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435\u0435 \u0447\u0438\u0441\u043b\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445, \u0447\u0435\u043c \u043d\u0443\u0436\u043d\u043e. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u044f \u0434\u0435\u043b\u0430\u043b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0441 \u043e\u0431\u043e\u0438\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 (\u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438-\u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438 \u0438 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438).<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043c\u0443-\u0442\u043e \u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u043a \u043c\u0435\u0442\u043e\u0434\u0430\u043c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 \u0432\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432. \u042d\u0442\u043e \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e. \u041c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0430\u043b\u043e\u0433\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0445\u0443\u043a\u043e\u0432, \u0445\u043e\u0442\u044f, \u0442\u0430\u043a \u0436\u0435 \u043a\u0440\u0430\u0442\u043a\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f. \u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u044d\u0444\u0444\u0435\u043a\u0442\u044b &#8212; \u044d\u0442\u043e \u0434\u0440\u0443\u0433\u0430\u044f \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0430. \u041d\u043e, \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 &#8212; \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440 \u043d\u0430\u0434 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430. \u0414\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u043e\u0433\u043e \u0446\u0438\u043a\u043b\u0430 &#8212; \u044d\u0442\u043e \u043d\u0435 \u043f\u043b\u043e\u0445\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"programming-entities\" id=\"programming-entities\"><\/a><\/p>\n<h2>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432 \u043c\u043e\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Entity Component<\/h2>\n<ul>\n<li>\n<p><strong>React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <\/strong>\u2013 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0435\u0433\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f react-\u043e\u043c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u041d\u0443\u0436\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435\u043e\u0442\u044a\u0435\u043c\u043b\u0435\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c React. <\/p>\n<\/li>\n<li>\n<p><strong>Container <\/strong>\u2013 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0435\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0431\u044a\u0435\u043a\u0442\u044b behaviours \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439. <\/p>\n<\/li>\n<li>\n<p><strong>Behaviour (\u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435) <\/strong>\u2013 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0438\u043b\u0438 \u0447\u0430\u0441\u0442\u044c\u044e \u043b\u043e\u0433\u0438\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0427\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0445\u0443\u043a\u043e\u0432, \u043d\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c. \u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043a\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b.<\/p>\n<\/li>\n<li>\n<p><strong>render <\/strong>\u2013 \u043f\u0440\u043e\u0441\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441 JSX \u043a\u043e\u0434\u043e\u043c. \u041d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442! \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0430 \u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0427\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432 \u0441\u0432\u043e\u0435\u043c \u0442\u0435\u043b\u0435.<\/p>\n<\/li>\n<li>\n<p><strong>Config <\/strong>\u2013 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0417\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u0412 \u043d\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f behaviours \u0438 render-\u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043e\u043f\u0446\u0438\u0438. <\/p>\n<\/li>\n<li>\n<p><strong>Event emitter <\/strong>\u2013 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \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 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 (behaviours).<\/p>\n<\/li>\n<\/ul>\n<p><strong>&nbsp;\u0412\u0430\u0436\u043d\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0425\u043e\u0442\u044c \u044d\u0442\u043e \u0438 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u044b. \u041a\u043b\u0430\u0441\u0441\u044b-\u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0445\u043e\u0442\u044f \u0431\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u044b\u0441\u044f\u0447 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043f\u0430\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u043c \u0434\u0430\u0436\u0435 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445.<\/p>\n<\/li>\n<li>\n<p>\u0412\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 \u0432 \u043a\u043b\u0430\u0441\u0441\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f init. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c this \u0434\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430 super(). \u0418\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u0430\u0445. \u0415\u0441\u043b\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0442\u043e\u0433\u0434\u0430 \u043d\u0435\u043b\u044c\u0437\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c this \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0432 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0435, \u0438 \u043e\u043d \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043b\u0430\u0441\u0441.<\/p>\n<\/li>\n<li>\n<p>field <em>\u2013 <\/em>\u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e&nbsp;&#171;_&#187; \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f protected \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u043b\u0438 \u043c\u0435\u0442\u043e\u0434.<\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u0430 \u043a \u043e\u0431\u043e\u0438\u043c \u0442\u0438\u043f\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u2013 \u043a \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c-\u043a\u043b\u0430\u0441\u0441\u0430\u043c. \u041e\u0442\u043b\u0438\u0447\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043c\u0435\u0441\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u043f\u043e \u0445\u043e\u0434\u0443.<\/p>\n<p><strong>\u0417\u0430 \u0438\u0434\u0435\u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0432 useRef \u0438 \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u0437 \u0445\u0443\u043a\u043e\u0432 \u2013 \u0441\u043f\u0430\u0441\u0438\u0431\u043e @<\/strong><a href=\"https:\/\/habr.com\/users\/Alexandroppolus\/\" rel=\"noopener noreferrer nofollow\"><strong>Alexandroppolus<\/strong><\/a><strong>! \u0415\u0433\u043e <\/strong><a href=\"https:\/\/habr.com\/ru\/post\/541884\/#comment_22689676\" rel=\"noopener noreferrer nofollow\"><strong>\u043a\u043e\u043c\u043c\u0435\u043d\u0442 <\/strong><\/a><strong>\u043c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 \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.<\/strong><\/p>\n<p><a class=\"anchor\" name=\"es-part1\" id=\"es-part1\"><\/a><\/p>\n<h2>\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u0427\u0430\u0441\u0442\u044c 1: Event emitter<\/h2>\n<p>\u0422.\u043a. \u043b\u043e\u0433\u0438\u043a\u0430 <\/p>\n<\/p>\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-319304","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319304","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=319304"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/319304\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=319304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=319304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=319304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}