{"id":400065,"date":"2024-06-29T15:02:03","date_gmt":"2024-06-29T15:02:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=400065"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-06-29T15:02:03","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=400065","title":{"rendered":"<span>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0410\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u043e \u043f\u043e\u0441\u0442 &#8212; \u0442\u0440\u0435\u0442\u0438\u0439 \u0438\u0437 \u0441\u0435\u0440\u0438\u0438 \u043f\u043e\u0441\u0442\u043e\u0432 \u043e\u0431 <strong>\u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0435<\/strong> &#8212; \u043d\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 Ember.js. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0435\u0440\u0438\u0438 \u044f \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u044e \u043e\u0431\u0449\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u0442\u043e, \u043a\u0430\u043a \u043e\u043d\u0438 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043c\u0438\u0440\u0435 Javascript.<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/post\/488530\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/post\/489530\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0445\u043e\u0440\u043e\u0448\u0435\u0439?<\/a> <\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u2190 \u042d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442<\/p>\n<\/li>\n<li>\n<p>\u041a\u0435\u0439\u0441 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u2014 TrackedMap<\/p>\n<\/li>\n<li>\n<p>\u041a\u0435\u0439\u0441 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u2014 @localCopy<\/p>\n<\/li>\n<li>\n<p>\u041a\u0435\u0439\u0441 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u2014 RemoteData<\/p>\n<\/li>\n<li>\n<p>\u041a\u0435\u0439\u0441 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u2014 effect()<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0432\u0435\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<ol>\n<li>\n<p>\u0414\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0432\u044b \u0432 \u043d\u0435\u0433\u043e \u043f\u0440\u0438\u0448\u043b\u0438, \u0432\u044b\u0432\u043e\u0434 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 <\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <\/p>\n<\/li>\n<li>\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <\/p>\n<\/li>\n<li>\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u043e\u0442\u0435\u0440\u044e \u0446\u0435\u043b\u043e\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <\/p>\n<\/li>\n<\/ol>\n<p>\u042d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433, \u0438 \u043a\u0430\u043a \u043e\u043d \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u0435\u0442 \u0432\u044b\u0448\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c.<\/p>\n<h2>\u0417\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435<\/h2>\n<p>\u0412 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437 \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438 \u043d\u0430 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u044f\u0437\u044b\u043a\u0430 Elm \u0438 \u043d\u0430 \u0442\u043e\u043c \u043a\u0430\u043a (\u043a\u0430\u043a \u044f \u0434\u0443\u043c\u0430\u043b) \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <em>\u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 (memoization)<\/em> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0417\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 &#8212; \u044d\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u043a\u0430, \u0433\u0434\u0435 \u0432\u044b \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0431\u044b\u043b\u0430 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b. \u0417\u0430\u0442\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.\u00a0<\/p>\n<p>\u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u044f \u043e\u0448\u0438\u0431\u0430\u043b\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e Elm \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u044d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041e\u0434\u0438\u043d \u0438\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Elm \u043a \u0441\u0447\u0430\u0441\u0442\u044c\u044e \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u043c\u043d\u0435, \u0447\u0442\u043e Elm <em>\u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442<\/em> \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0445\u043e\u0447\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c. \u042f \u0436\u0435 \u043f\u0440\u0438\u043d\u044f\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0431 Elm \u0431\u0435\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438, \u0431\u0435\u0437 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1e9\/e07\/8c7\/1e9e078c7d05c23c9d8a22259816e0d5.png\" alt=\"\u041a\u043e\u0435-\u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0441 2012 \u0433\u043e\u0434\u0430\" title=\"\u041a\u043e\u0435-\u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0441 2012 \u0433\u043e\u0434\u0430\" width=\"1816\" height=\"1122\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1e9\/e07\/8c7\/1e9e078c7d05c23c9d8a22259816e0d5.png\"\/><figcaption>\u041a\u043e\u0435-\u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0441 2012 \u0433\u043e\u0434\u0430<\/figcaption><\/figure>\n<p>\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 &#8212; \u044d\u0442\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433. \u0418, \u043a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u043f\u0440\u0438\u0447\u0438\u043d\u044b, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c Elm \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u0442\u0435\u043c \u0441\u043e\u0440\u0442\u043e\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u0430\u043a \u0440\u0430\u0437 \u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430\u043c!<\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b <em>\u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430<\/em> \u0432 Javascript. \u041a\u0430\u043a \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u043d\u0435 \u0440\u0430\u0432\u043d\u044b \u043e\u0434\u0438\u043d \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.\u00a0  <\/p>\n<pre><code class=\"javascript\">let object1 = { foo: 'bar' };   let object2 = { foo: 'bar' };   object1 === object2; \/\/ false<\/code><\/pre>\n<p>\u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u0440\u0438 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0438 \u044d\u0442\u043e \u0441\u0442\u0430\u0432\u0438\u0442 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u0434\u0438\u043b\u0435\u043c\u043c\u0443. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u0438\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 &#8212; \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u0430\u043a \u0432\u044b \u043f\u043e\u0439\u043c\u0435\u0442\u0435, \u0447\u0442\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u0435\u0433\u043e \u043f\u043e\u043b\u0435\u0439 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c? \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u0441\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">\/\/ Basic memoization in JS let lastArgs; let lastResult;  function memoizedRender(...args) { \u00a0 if (deepEqual(lastArgs, args)) { \u00a0 \u00a0 \/\/ Args \u00a0 \u00a0 return lastResult; \u00a0 } \u00a0 lastResult = render(...args); \u00a0 lastArgs = args; \u00a0 return lastResult; }<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>deepEqual<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e <code>lastArgs<\/code> \u0438 <code>args<\/code>. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 (\u0434\u043b\u044f \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u043c\u0435\u0441\u0442\u0430), \u043d\u043e \u043e\u043d\u0430 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e \u0432\u0441\u0435\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0425\u043e\u0442\u044f \u044d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0441\u0430\u043c\u0430 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 Elm-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0433\u0434\u0435 \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u044b \u0432\u043e\u0432\u043d\u0435. \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0430\u0447\u043d\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u043e\u043b\u044c\u0448\u0435.\u00a0<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u043a\u0430\u0436\u0435\u043c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e! \u041a\u0430\u043a\u0438\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b? \u0427\u0442\u043e \u0436, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430 (deep-equality), \u0442\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 <em>\u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 (referential equality)<\/em>. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0442\u043e\u0442 \u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442, \u0447\u0442\u043e \u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e, \u0442\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<pre><code class=\"javascript\">let state = { \u00a0 items: [ \u00a0 \u00a0 { name: 'Banana' }, \u00a0 \u00a0 { name: 'Orange' }, \u00a0 ], };  const ItemComponent = memoize((itemState) => { \u00a0 return `&lt;li>${itemState.name}&lt;\/li>`; });  const ListComponent = memoize((state) => { \u00a0 let items = state.items.map(item => \u00a0 \u00a0 ItemComponent(item) \u00a0 ); \u00a0 return `&lt;ul>${items.join('')}&lt;\/ul>`; });  let output = ListComponent(state);<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 HTML (\u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 DOM, \u043d\u043e \u044d\u0442\u043e \u0442\u0435\u043c\u0430 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430). \u0421\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u043c\u044f \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441\u043f\u0438\u0441\u043a\u0430?\u00a0<\/p>\n<p>\u041e\u0442\u0432\u0435\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442: \u044d\u0442\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435. \u041c\u044b \u043c\u043e\u0436\u0435\u043c:<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u043e\u0432\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442 state \u0438\u043b\u0438.. <\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 state <\/p>\n<\/li>\n<\/ol>\n<p>\u0421\u043e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439 1, \u0435\u0441\u043b\u0438 \u043c\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u043d\u0430\u0448\u0435 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 <em>\u0432\u0441\u0435\u0433\u0434\u0430<\/em> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c. \u0418 \u043d\u0430\u0448\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>ListComponent<\/code> \u0438 <code>ItemComponent<\/code> \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>\u0410 \u0447\u0442\u043e \u043d\u0430\u0441\u0447\u0435\u0442 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 2? \u041c\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e name \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430.\u00a0<\/p>\n<pre><code class=\"javascript\">state.items[0].name = 'Strawberry'; let output = ListComponent(state);<\/code><\/pre>\n<p>\u041d\u043e \u0438 \u044d\u0442\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442 <code>state<\/code> \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>ListComponent<\/code> \u0432\u0435\u0440\u043d\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.\u00a0<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b\u00a0\u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u043c\u0430\u0441\u0441\u0438\u0432, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c \u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0442\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c\u0438. \u0412 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0435\u043c \u043c\u043d\u043e\u0433\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u043c \u0438 \u043f\u043e\u0447\u0442\u0438 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u0434\u043e\u0440\u043e\u0433\u0438\u043c \u043a\u0430\u043a \u0438 <code>deepEqual<\/code>.<\/p>\n<pre><code class=\"javascript\">\/\/ This only gets worse in the general case let [firstItem, restItems] = state.items;  state = {   ...state,   items: [     { ...firstItem, name: 'Strawberry' },     ...restItems   ] };<\/code><\/pre>\n<p>\u0422\u0430\u043a \u0447\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0442\u043e\u0436\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0432\u043e\u0432\u043d\u0435 \u043d\u0430\u0448\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u0430 \u0434\u043b\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<p>\u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0430 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c, \u0435\u0441\u043b\u0438 TC39 \u0441\u043c\u043e\u0436\u0435\u0442 \u0432\u0432\u0435\u0441\u0442\u0438 <a href=\"https:\/\/github.com\/tc39\/proposal-record-tuple\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043f\u0438\u0441\u0438 \u0438 \u041a\u043e\u0440\u0442\u0435\u0436\u0438<\/a>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c <em>\u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0443 \u043f\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e<\/em> \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e- \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u043e-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445  \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u0434\u043d\u0430\u043a\u043e, \u044d\u0442\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u0442\u0438\u0432\u0430 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0430 \u0421\u0442\u0430\u0434\u0438\u0438 1, \u0438 \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u044f\u0442\u0430, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f Elm-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u044d\u043a\u0441\u0442\u0440\u0435\u043c\u0430\u043b\u044c\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u043e\u0432\u043d\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0435, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435. <\/p>\n<p>\u0410 \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u0437\u043d\u0430\u043b\u0438 \u043a\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <em>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c<\/em> \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430? \u0418 \u0435\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043d\u0435\u0434\u043e\u0440\u043e\u0433\u043e \u0443\u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u043d\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c? \u041e\u0442\u043a\u0440\u044b\u043b\u043e \u0431\u044b \u044d\u0442\u043e \u043d\u0430\u043c \u043a\u0430\u043a\u0438\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438? <\/p>\n<h2>\u0412\u0445\u043e\u0434\u0438\u043c \u0432 \u0437\u043e\u043d\u0443 \u0410\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430<\/h2>\n<p>\u0410\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u0432\u043e\u043a\u0440\u0443\u0433 \u0438\u0434\u0435\u0438 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u043e\u0432 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 <em>\u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c (memoize)<\/em> \u044d\u0442\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u043c\u0438\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f memoize \u0437\u043d\u0430\u0435\u0442 \u043e\u0431 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0435. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>InventoryComponent<\/code> \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433. <\/p>\n<pre><code class=\"javascript\">class Item {   @tracked name;    constructor(name) {     this.name = name;   } }  class State {   @tracked showItems = true;    @tracked selectedType = 'Fruits';    @tracked itemTypes = [     'Fruits',     'Vegetables',   ]    @tracked fruits = [     new Item('Banana'),     new Item('Orange'),   ];    @tracked vegetables = [     new Item('Celery'),     new Item('Broccoli'),   ]; }  const OptionComponent = memoize((name) => {   return `&lt;option>${name}&lt;\/option>`; });  const ListItemComponent = memoize((text) => {   return `&lt;li>${text}&lt;\/li>`; });  const InventoryComponent = memoize((state) => {   if (!state.showItems) return '';    let { selectedType } = state;    let typeOptions = state.itemTypes.map(type =>     OptionComponent(type)   );    let items = state[selectedType.toLowerCase()];    let listItems = items.map(item =>     ListItemComponent(item.name)   );    return `     &lt;select>${typeOptions.join('')}&lt;\/select>     &lt;ul>${listItems.join('')}&lt;\/ul>   `; });  let state = new State(); let output = InventoryComponent(state);<\/code><\/pre>\n<p>\u0412 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u043c \u043c\u0438\u0440\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f memoize \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441 \u043f\u043e\u043c\u0435\u0442\u043a\u043e\u0439 <code>@tracked<\/code>. \u0412 <em>\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435<\/em> \u043a \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b, \u043e\u043d\u0430 <em>\u0442\u0430\u043a\u0436\u0435<\/em> \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c \u043b\u0438 \u043e\u043d\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>name<\/code>, \u043a\u0430\u0436\u0434\u0430\u044f \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0449\u0430\u044f (memoized) \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u043d\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u0430 \u043b\u0438 \u043d\u043e\u0432\u0430\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430. <\/p>\n<pre><code class=\"javascript\">state.fruits[0].name = 'Strawberry';  \/\/ \u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f InventoryComponent, \u0430 \u0442\u0430\u043a\u0436\u0435 \/\/ \u043f\u0435\u0440\u0432\u044b\u0439 ListItemComponent. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435  \/\/ ListItem \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f  let output = InventoryComponent(state);<\/code><\/pre>\n<p>\u0417\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0439 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e. \u0410 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e\u0449\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043e \u043d\u0430 \u0441\u0442\u0430\u0434\u0438\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f (reconciliation) (\u043c\u043e\u0433\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e Elm \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439)<\/p>\n<p>\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e <em>\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e<\/em>? \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043b\u0435\u0437\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430.<\/p>\n<h2>\u0420\u0435\u0432\u0438\u0437\u0438\u0438 \u0438 \u0442\u0435\u0433\u0438<\/h2>\n<p>\u0410\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0432\u043e\u043a\u0440\u0443\u0433 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430. \u042d\u0442\u043e \u0447\u0438\u0441\u043b\u043e &#8212; <em>\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0440\u0435\u0432\u0438\u0437\u0438\u0438. <\/em><\/p>\n<pre><code class=\"javascript\">let CURRENT_REVISION: number = 0;<\/code><\/pre>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u0443\u043c\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043a\u0430\u043a \u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 &#171;\u0447\u0430\u0441\u0430\u0445&#187;. \u0422\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u044b \u043e\u0442\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442 \u0432\u0440\u0435\u043c\u044f, \u0430 \u043c\u044b &#8212; <em>\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f<\/em>. \u041a\u043e\u0433\u0434\u0430 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043d\u0430\u0448\u0438\u0445 \u0447\u0430\u0441\u043e\u0432 \u043d\u0430 1.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9fa\/0fe\/f6f\/9fa0fef6fdb6228a33f8806bdc6fdf2c.png\" width=\"1316\" height=\"578\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9fa\/0fe\/f6f\/9fa0fef6fdb6228a33f8806bdc6fdf2c.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u043b\u0438\u0446\u0435\u0442\u0432\u043e\u0440\u044f\u0435\u0442 <em>\u0432\u0435\u0440\u0441\u0438\u044e<\/em> \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u0435\u0431\u044b\u0432\u0430\u043b\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412\u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u044b \u0431\u044b\u043b\u0438 \u0432 \u0432\u0435\u0440\u0441\u0438\u0438 0. \u041f\u043e\u0442\u043e\u043c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0438 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 <em>\u0432\u0435\u0440\u0441\u0438\u044e 1.<\/em> \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u0438 \u043c\u044b \u0441\u043b\u0435\u0434\u0438\u043c \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ba2\/4b1\/c4d\/ba24b1c4d492d910e44d8d09ab2ff3a7.png\" width=\"1332\" height=\"558\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ba2\/4b1\/c4d\/ba24b1c4d492d910e44d8d09ab2ff3a7.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0431\u044b\u043b\u0438 \u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0442\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u044b\u043b\u043e \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435, \u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435. \u041d\u043e \u044d\u0442\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432 \u043d\u0430\u0448\u0435\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u0441 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435\u043c. \u041c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438, \u0432\u0435\u0434\u044c \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043a \u0434\u0440\u0443\u0433\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u0447\u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0447\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <em>\u0432\u043d\u0443\u0442\u0440\u0438<\/em> \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <em>\u0442\u0435\u0433\u0438<\/em>. <\/p>\n<p>\u0422\u0435\u0433\u0438 \u043e\u043b\u0438\u0446\u0435\u0442\u0432\u043e\u0440\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0433\u043e \u043a\u0443\u0441\u043e\u0447\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0435\u0433 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e. <\/p>\n<blockquote>\n<p>\u0422\u0435\u0433\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043e\u0442 <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTTP_ETag\" rel=\"noopener noreferrer nofollow\">ETags<\/a> \u0438\u0437 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e HTTP. ETags \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u043b\u0438 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0434\u043e \u0442\u043e\u0433\u043e, \u043a\u0430\u043a  \u0435\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c. \u041d\u0430\u0448\u0438 \u0442\u0435\u0433\u0438 \u043a\u043e\u043d\u0446\u0435\u043f\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438. <\/p>\n<\/blockquote>\n<p>\u0423 \u0442\u0435\u0433\u043e\u0432 \u0435\u0441\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0447\u0430\u0441\u043e\u0432. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0435 \u043a \u0442\u0435\u0433\u0443, \u043c\u044b &#171;\u0437\u0430\u0433\u0440\u044f\u0437\u043d\u044f\u0435\u043c&#187; \u0442\u0435\u0433. \u041c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0447\u0430\u0441\u043e\u0432 \u0438 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u0433\u0443. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/11a\/862\/223\/11a8622239c50072e35bd2ad834fd1c1.png\" width=\"1388\" height=\"548\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/11a\/862\/223\/11a8622239c50072e35bd2ad834fd1c1.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0442\u0435\u0433 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 <em>\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435<\/em> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0447\u0430\u0441\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u0434\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043e. <\/p>\n<p>\u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044e. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0430\u0448\u0443 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043c\u044b \u0438\u0445 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439. \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u0441\u044f <em>\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435\u043c (consumption)<\/em> \u0442\u0435\u0433\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ad6\/c60\/820\/ad6c6082009f45edbe4ce5ca2ec5d94b.png\" width=\"1762\" height=\"1268\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ad6\/c60\/820\/ad6c6082009f45edbe4ce5ca2ec5d94b.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c <em>\u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/em> \u0438\u0437 \u0432\u0441\u0435\u0445 \u0442\u0435\u0433\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438. \u042d\u0442\u043e \u0447\u0438\u0441\u043b\u043e \u043e\u043b\u0438\u0446\u0435\u0442\u0432\u043e\u0440\u044f\u0435\u0442 \u0432\u0435\u0440\u0441\u0438\u044e \u0432\u0441\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u041e\u043d\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0432 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\u0445 <em>\u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/em> \u044d\u0442\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c5b\/cb7\/6f0\/c5bcb76f066222882f3fb3aded07e407.png\" width=\"1834\" height=\"920\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c5b\/cb7\/6f0\/c5bcb76f066222882f3fb3aded07e407.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u044d\u0442\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435, \u043c\u044b \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0442\u0435\u0433\u043e\u0432 \u0438 \u0435\u0441\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 &#171;\u0433\u0440\u044f\u0437\u043d\u044b\u043c&#187;, \u0435\u0433\u043e \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0442\u0430\u043d\u0435\u0442 <em>\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439<\/em> \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0432\u0441\u0435\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430. \u0418 \u043e\u043d\u0430 <em>\u0432\u0441\u0435\u0433\u0434\u0430<\/em> \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435.  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/14c\/c9f\/ba6\/14cc9fba671f83967a3b77722966fdda.png\" width=\"1824\" height=\"944\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/14c\/c9f\/ba6\/14cc9fba671f83967a3b77722966fdda.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u043e\u0441\u044c, \u0437\u043d\u0430\u0447\u0438\u0442 \u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u043a\u043e\u0433\u0434\u0430 \u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0447\u0430\u0441\u043e\u0432 \u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u043c \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u0433\u0443 \u0438\u0437\u043c\u0435\u043d\u0438\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/367\/147\/468\/3671474688840a5035cf3e5249a25bcd.png\" width=\"1904\" height=\"990\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/367\/147\/468\/3671474688840a5035cf3e5249a25bcd.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f \u043f\u043e\u0439\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <em>\u0441\u0432\u043e\u0438\u0445<\/em> \u0442\u0435\u0433\u043e\u0432, \u043e\u043d\u0438 \u0432\u0435\u0440\u043d\u0443\u0442 \u0442\u0435 \u0436\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0418\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u043e\u0439\u043c\u0435\u0442, \u0447\u0442\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f <em>\u0442\u043e\u043b\u044c\u043a\u043e<\/em> \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e.<\/p>\n<h3>\u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 <\/h3>\n<p>\u0422\u0430\u043a\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0438\u0437\u043a\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0438\u0437\u0434\u0435\u0440\u0436\u043a\u0438. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:<\/p>\n<ol>\n<li>\n<p><strong>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0422\u0435\u0433\u043e\u0432<\/strong>. \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043e\u0434\u043d\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u0443\u0441\u043e\u0447\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0433\u043e <em>\u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/em> (root state), \u0432 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0438 \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u0422\u0435\u0433\u043e\u0432<\/strong>. \u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u0431\u0435\u0440\u0435\u043c \u043d\u0430\u0431\u043e\u0440 (<code>Set<\/code>) \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0442\u0443\u0434\u0430 \u0442\u0435\u0433\u0438. <\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u0433\u0440\u044f\u0437\u043d\u0435\u043d\u0438\u0435 \u0422\u0435\u0433\u043e\u0432.<\/strong> \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (<code>++<\/code>) \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043e\u0434\u043d\u043e \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u043d\u0438\u0435. <\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0422\u0435\u0433\u043e\u0432<\/strong>. \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435, \u043c\u044b \u0431\u0435\u0440\u0435\u043c \u0432\u0441\u0435 \u0440\u0435\u0432\u0438\u0437\u0438\u0438 (<code>Array.map<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f) \u0438 \u0438\u0449\u0435\u043c \u0441\u0440\u0435\u0434\u0438 \u043d\u0438\u0445 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c (<code>Math.max<\/code>). \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0435\u0449\u0435 \u0440\u0430\u0437.  <\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0441\u0435 \u044d\u0442\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u0435\u0448\u0435\u0432\u044b \u0432 \u043f\u043b\u0430\u043d\u0435 \u0437\u0430\u0442\u0440\u0430\u0442 \u043d\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0438 \u043f\u0430\u043c\u044f\u0442\u044c. \u0418 \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f \u0434\u0435\u0448\u0435\u0432\u044b\u043c\u0438 \u043f\u0440\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438. \u041f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043c\u044b \u043d\u0435 \u0441\u0442\u0430\u043d\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439, \u043e\u043d\u0438 \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u044b\u043c\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0442\u0440\u0430\u0442 \u043d\u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435. <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043d\u0430\u0448\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u0435\u043c \u0442\u0440\u0435\u0442\u0438\u0439 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b:<\/p>\n<blockquote>\n<p>3. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443.<\/p>\n<\/blockquote>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445.<\/p>\n<h2>\u041f\u0440\u0438\u043d\u0446\u0438\u043f 1: \u041f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u0432\u044b\u0432\u043e\u0434<\/h2>\n<blockquote>\n<p>1. \u0414\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u044b \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0438 \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0432\u044b\u0432\u043e\u0434 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432<\/p>\n<\/blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u044d\u0442\u043e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>ListComponent<\/code> \u0438\u0437 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430, \u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <code>@tracked<\/code> <\/p>\n<pre><code class=\"javascript\">class Item {   @tracked name;    constructor(name) {     this.name = name;   } }  class State {   @tracked items = [     new Item('Banana'),     new Item('Orange'),   ]; }  const ItemComponent = memoize((itemState) => {   return `&lt;li>${itemState.name}&lt;\/li>`; });  const ListComponent = memoize((state) => {   let items = state.items.map(item =>     ItemComponent(item)   );    return `&lt;ul>${items.join('')}&lt;\/ul>`; });  let state = new State() let output = ListComponent(state);<\/code><\/pre>\n<p><code>ListComponent<\/code> &#8212; \u044d\u0442\u043e \u0447\u0438\u0441\u0442\u0430\u044f (pure) \u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u041e\u043d\u0430 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0435 \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u0438. \u041c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435, \u0442\u043e \u043f\u0440\u0438 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0438 \u0442\u043e\u043c \u0436\u0435 <code>state<\/code> \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e\u043f\u0440\u043e\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0435 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f. \u041d\u043e \u044d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e \u0432\u044b\u0432\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c \u0438 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c, \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u043f\u043e\u043c\u0435\u0442\u043a\u0438 \u0432\u0441\u0435\u0445 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043c\u0435\u0442\u043a\u043e\u0439 <code>@tracked<\/code> .<\/p>\n<p>\u041d\u0430\u0448 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u041d\u043e \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u043c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e? \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u043d\u0430\u0448\u0438\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 <code>if<\/code>.<\/p>\n<pre><code class=\"javascript\">class Item {   @tracked name;    constructor(name) {     this.name = name;   } }  class State {   @tracked showItems = false;    @tracked items = [     new Item('Banana'),     new Item('Orange'),   ]; }  const ItemComponent = memoize((itemState) => {   return `&lt;li>${itemState.name}&lt;\/li>`; });  const ListComponent = memoize((state) => {   if (state.showItems) {     let items = state.items.map(item =>       ItemComponent(item)     );      return `&lt;ul>${items.join('')}&lt;\/ul>`;   }    return ''; });  let state = new State(); let output = ListComponent(state);<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043c\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u0432\u044b\u0432\u043e\u0434, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <code>showItems<\/code> \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 <code>false<\/code>. \u041d\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u0436\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432 <code>items<\/code> \u0438 \u0438\u043c\u0435\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0411\u0443\u0434\u0435\u0442 \u043b\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0435\u043d, \u0435\u0441\u043b\u0438 \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u043e\u0434\u0438\u043d \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u044d\u0442\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u0430? <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0415\u0441\u043b\u0438 <code>showItems<\/code> \u043b\u043e\u0436\u043d\u043e, \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f <code>showItems<\/code>, \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0438 \u0432\u044b\u0432\u043e\u0434, \u0438 <em>\u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442<\/em> \u043f\u0440\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 <em>\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435<\/em> \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e. <\/p>\n<p>\u0417\u043d\u0430\u0447\u0438\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441 \u0432\u0435\u0442\u0432\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u0446\u0438\u043a\u043b\u0430\u043c\u0438 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e. \u0410 \u043a\u0430\u043a \u043d\u0430\u0441\u0447\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b? \u041c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0441\u0432\u043e\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u0445, \u044d\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e <em>\u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043e<\/em> \u0432 Javascript.  \u0411\u0443\u0434\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043e \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u043e\u043c? \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">class Locale {   @tracked currentLocale;    constructor(locale) {     this.currentLocale = locale;   }    get(message) {     return this.locales[this.currentLocale][message];   }    locales = {     en: {       greeting: 'Hello',     },      sp: {       greeting: 'Hola'     }   }; }  class Person {   @tracked firstName;   @tracked lastName;    constructor(firstName, lastName) {     this.firstName = firstName;     this.lastName = lastName;   } }  let locale = new Locale('en'); let liz = new Person('Liz', 'Hewell');  const WelcomeComponent = memoize((person) => {   return `${locale.get('greeting')}, ${person.firstName}!`; });  let output = WelcomeComponent(liz);<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 <code>WelcomeComponent<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435. \u041d\u043e \u043c\u044b \u0442\u0430\u043a\u0436\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>locale<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u043c \u043a\u043b\u0430\u0441\u0441\u0430 <code>Locale<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430. <\/p>\n<p>\u0427\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u043c \u044f\u0437\u044b\u043a? \u041e\u0431\u043d\u043e\u0432\u0438\u0442 \u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>WelcomeComponent<\/code> \u0441\u0432\u043e\u0439 \u0432\u044b\u0432\u043e\u0434 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435? <\/p>\n<p>\u041e\u0442\u0432\u0435\u0442 \u0438 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 &#8212; <em>\u0434\u0430<\/em>. \u0422\u0435\u0433, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 <code>currentLocale<\/code> , \u0431\u044b\u043b \u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d \u0432 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u0445 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u044b\u043b \u0432\u043d\u0435\u0448\u043d\u0438\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043d\u0430 <code>'sp'<\/code> \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442 <code>WelcomeComponent<\/code> \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0438\u0441\u043f\u0430\u043d\u0441\u043a\u043e\u043c, \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0441 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u0421\u043d\u043e\u0432\u0430, \u043f\u043e\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438  <em>\u043f\u043e\u043c\u0435\u0447\u0435\u043d\u044b<\/em> \u043d\u0430 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435, \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e.<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0439? \u042d\u0442\u043e\u0442 \u043a\u0435\u0439\u0441 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u0440\u043d\u0435\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0430\u043a\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>ListComponent<\/code>:<\/p>\n<pre><code class=\"javascript\">class State {   @tracked items = []; }  const ListComponent = memoize((state) => {   state.items = [...state.items, Math.random()];    let items = state.items.map(item => `&lt;li>${item}&lt;\/li>`);    return `&lt;ul>${items}&lt;\/ul>`; });  let state = new State(); let output = ListComponent(state);<\/code><\/pre>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a, \u0431\u0443\u0434\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043b\u043e\u043c\u0430\u0435\u0442 \u043d\u0430\u0448\u0443 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f, \u043e\u043d \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0410 \u0442\u0430\u043a \u043a\u0430\u043a \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0446\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043f\u043e\u0445\u043e\u0436\u0435, \u0447\u0442\u043e \u0432\u044b\u0432\u043e\u0434 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u043a\u0430 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0435\u0449\u0435 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u043c\u0430\u0441\u0441\u0438\u0432 <code>items<\/code>. \u0421\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430, \u0435\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u0438 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u0430\u0431\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 &#8212; \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u0435\u0433\u043e \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443. \u041c\u044b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, <em>\u043c\u043e\u0433\u043b\u0438 \u0431\u044b<\/em> \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <em>\u0432\u043e \u0432\u0440\u0435\u043c\u044f<\/em> \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f. \u041d\u043e \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0442\u0430\u043a \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0442\u044c. \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u044f \u0438\u0441\u0441\u043b\u0435\u0434\u0443\u044e \u0442\u0430\u043a\u0438\u0435 \u043a\u0435\u0439\u0441\u044b \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e. <\/p>\n<p>\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043e\u0431\u044b\u0447\u043d\u043e \u043c\u044b \u043d\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0440\u0430\u0441\u0442\u0443\u0449\u0438\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0435.<\/p>\n<pre><code class=\"javascript\">class State {   @tracked items = []; }  const ListComponent = memoize((state) => {   if (state.items.length === 0) {     state.items = ['Empty List'];   }    let items = state.items.map(item => `&lt;li>${item}&lt;\/li>`);    return `&lt;ul>${items}&lt;\/ul>`; });  let output = ListComponent(new State());<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0447\u0442\u043e-\u0442\u043e \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u043e\u043d \u043f\u0443\u0441\u0442. \u042d\u0442\u043e \u0447\u0443\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0437\u0430\u0445\u043e\u0447\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c, \u043d\u043e \u044d\u0442\u043e \u043a\u043e\u0434 \u0432\u0441\u0435 \u0436\u0435 \u0441\u043b\u0435\u0433\u043a\u0430 \u0444\u043e\u043d\u0438\u0442. \u0422\u0430\u043a\u0430\u044f \u043c\u0443\u0442\u0430\u0446\u0438\u044f \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0437\u043d\u0430\u0442\u044c \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u043e\u043a\u0430 \u0432\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f. <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0435\u0440\u0435\u0436\u0435\u0442 \u043d\u0430\u0441 \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430. \u0412 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u0433\u0438\u043d\u0433\u0435 \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043c\u043e\u0442\u0438\u0432\u0438\u0440\u0443\u044e\u0449\u0435\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u0434 &#8212; \u0435\u0441\u043b\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043e, \u043e\u043d\u043e \u0443\u0436\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0430\u043a\u0438\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">if (state.items.length === 0) {   state.items = ['Empty List']; }<\/code><\/pre>\n<p>\u041f\u043e\u0440\u043e\u0434\u0438\u0442 \u043e\u0448\u0438\u0431\u043a\u0443. \u0412\u0435\u0434\u044c \u043c\u044b \u0443\u0436\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438 <code>state.items<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0443\u0436\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0445 \u043c\u0435\u043d\u044f\u0442\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f. <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u0432\u044b\u0432\u043e\u0434 \u0432 <em>\u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435<\/em> \u0437\u0434\u043e\u0440\u043e\u0432\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439, \u0430 \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u0432\u044b\u0432\u043e\u0434. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0442\u0440\u0443\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0435, <em>\u043e\u0431\u044b\u0447\u043d\u043e <\/em>\u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043d\u0430 \u044d\u0442\u043e \u043e\u0448\u0438\u0431\u043a\u0443 (\u0445\u043e\u0442\u044f \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043f\u043e\u043a\u0440\u044b\u0442\u044b\u0445 \u043a\u0435\u0439\u0441\u043e\u0432). <\/p>\n<p>\u042f \u0441\u0447\u0438\u0442\u0430\u044e, \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e! \u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 (computed properties) \u0432 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c Ember \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438 \u0432 \u044d\u0442\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 (\u0430 \u0442\u0430\u043a\u0436\u0435 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 <em>\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f<\/em> \u0432 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0438), \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u043d\u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u043e\u0442 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 \u0438 \u043e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430. \u041f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Rx.js \u0438\u043b\u0438 MobX \u0442\u0430\u043a\u0436\u0435 \u0441\u0442\u0440\u0430\u0434\u0430\u044e\u0442 \u043e\u0442 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0439. \u0414\u0430\u0436\u0435 Elm \u0441\u0442\u0440\u0430\u0434\u0430\u043b \u0431\u044b \u043e\u0442 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0431\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u043b \u043c\u0443\u0442\u0430\u0446\u0438\u0438 \u043a\u0430\u043a \u0432 JS (\u044d\u0442\u043e \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430).<\/p>\n<h2>\u041f\u0440\u0438\u043d\u0446\u0438\u043f 2: \u0421\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u044c<\/h2>\n<blockquote>\n<p>2. \u0427\u0442\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e<\/p>\n<\/blockquote>\n<p>\u0410\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0441\u043d\u043e\u0432\u0430\u043d \u043d\u0430 <em>\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0438. <\/em> \u0422\u0435\u0433\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c (\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e), \u0438 <em>\u0442\u043e\u043b\u044c\u043a\u043e<\/em> \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442. \u041d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0435\u0433\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0438\u0437\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u043e\u0442 \u0446\u0435\u043b\u043e\u0433\u043e \u043f\u043b\u0430\u0441\u0442\u0430 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u0443\u0436\u0434\u0430\u044e\u0449\u0435\u0435\u0441\u044f \u0432 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438.<\/p>\n<p>\u041a \u0442\u043e\u043c\u0443 \u0436\u0435, \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 &#171;\u0437\u0430\u0433\u0440\u044f\u0437\u043d\u044f\u0435\u0442&#187; \u0442\u0435\u0433\u0438 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0437\u0430\u0431\u044b\u0442\u044c \u043e\u043f\u043e\u0432\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043a\u043e\u0433\u0434\u0430 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0430\u043c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c <em>\u0441\u0434\u0435\u043b\u0430\u0442\u044c<\/em> \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043c\u044b \u0443\u0437\u043d\u0430\u043b\u0438 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445. \u0412 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f API <code>setOnTagDirtied<\/code> <\/p>\n<pre><code class=\"javascript\">let currentRender = false;  setOnTagDirtied(() => {   if (currentRender) return;    currentRender = setTimeout(() => {     render();     currentRender = false;   }); });<\/code><\/pre>\n<p>\u042d\u0442\u043e\u0442 \u043a\u043e\u043b\u043b\u0431\u044d\u043a \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0442\u0441\u044f \u0432 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 <em>\u043b\u044e\u0431\u043e\u0435<\/em> \u0438\u0437 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0433\u0440\u044f\u0437\u043d\u0435\u043d\u043e, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433. \u041e\u043d \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a\u043e\u0439 \u0442\u0435\u0433 \u0431\u044b\u043b \u0437\u0430\u0433\u0440\u044f\u0437\u043d\u0435\u043d, \u0447\u0442\u043e \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u043c \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c, \u0432\u043d\u043e\u0441\u044f \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u042d\u0442\u043e \u043e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435 \u043d\u0430\u043c \u0437\u0430\u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 \u0432\u044b\u0432\u043e\u0434 \u0431\u044b\u043b \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u0441 \u0432\u0432\u043e\u0434\u043e\u043c. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0442\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0442 <em>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/em>. <\/p>\n<blockquote>\n<p>\u0417\u0430\u043c\u0435\u0442\u043a\u0430: \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c \u0432 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u0435 Glimmer (<em>\u043f\u0440\u0438\u043c \u043f\u0435\u0440.: \u0434\u0432\u0438\u0436\u043e\u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 Ember.js<\/em>) \u044d\u0442\u043e API \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>setPropertyDidChange<\/code> . \u042f \u0438\u0437\u043c\u0435\u043d\u0438\u043b \u0438\u043c\u044f \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u043e\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043d\u043e \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0442\u0435\u0433\u043e\u0432. <\/p>\n<\/blockquote>\n<h2>\u041f\u0440\u0438\u043d\u0446\u0438\u043f 4: \u041d\u0435\u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/h2>\n<blockquote>\n<p>4. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0432\u043e\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/p>\n<\/blockquote>\n<p>\u041c\u044b \u0443\u0436\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438, \u043a\u0430\u043a \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0438 \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043d\u044b\u043c \u0433\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u043c \u0441\u043b\u0443\u0447\u0430\u044f\u043c. \u0421\u0430\u043c\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0442\u0438 &#8212; \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0432\u044b\u0439 \u0432\u044b\u0432\u043e\u0434 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u043c\u0435\u0442\u044c \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443 \u043d\u043e\u0432\u043e\u043c\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435 \u0443\u0441\u043f\u0435\u043b\u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f.<\/p>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043a \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 React:<\/p>\n<pre><code class=\"javascript\">class Example extends React.Component {   state = {     value: 123;   };    render() {     let part1 = &lt;div>{this.state.value}&lt;\/div>      this.setState({ value: 456 });      let part2 = &lt;div>{this.state.value}&lt;\/div>      return (       &lt;div>         {part1}         {part2}       &lt;\/div>     );   } }<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, <code>setState<\/code> \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <em>\u0434\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e<\/em> \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e \u0447\u0430\u0441\u0442\u0438 2 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u0441\u0435 \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 <code>123<\/code>. \u0412\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0432\u043e. \u041d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u044d\u0442\u043e \u0432 \u0433\u043e\u043b\u043e\u0432\u0435, \u043b\u044e\u0431\u044b\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 <code>setState<\/code> \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. <\/p>\n<p>\u0410\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0432\u043e\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c. \u041a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438, \u043e\u043d <em>\u0437\u043d\u0430\u0435\u0442<\/em>, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437 \u0438 <em>\u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442<\/em> \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">class Example extends Component {   @tracked value;    get derivedProp() {     let part1 = this.doSomethingWithValue();      \/\/ This will throw an error!     this.value = 123;      let part2 = this.doSomethingElseWithValue();      return [part1, part2];   }    \/\/ ... }<\/code><\/pre>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f, \u0435\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c &#8212; \u043f\u043e \u0441\u0443\u0442\u0438 \u043e\u043d\u043e \u0441\u0442\u0430\u043d\u0435\u0442 \u0437\u0430\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c. \u042d\u0442\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u0434 \u0438 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0432\u043e\u0441\u0442\u044c \u0432 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0432\u043e\u0434\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435. \u042d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0442\u043e\u043b\u043f\u043e\u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439, \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u0434 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.  <\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0441\u0435 4 \u0440\u0430\u043d\u0435\u0435 \u0441\u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b. \u0418 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u0432 \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435 \u0441 \u043c\u0430\u043b\u044b\u043c\u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u043c\u0438 \u0440\u0430\u0441\u0445\u043e\u0434\u0430\u043c\u0438. <\/p>\n<h2>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f: \u041b\u0443\u0447\u0448\u0435 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0435\u043c \u0441\u0442\u043e \u0440\u0430\u0437 \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c<\/h2>\n<p>\u0410\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0432\u0438\u0433\u0430\u0442\u0435\u043b\u0435\u043c Ember.js \u0438 Glimmer VM. \u0420\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c &#8212; \u044d\u0442\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u041e\u043d\u043e \u043f\u0440\u043e\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0430\u0441\u043f\u0435\u043a\u0442\u044b. \u0425\u043e\u0440\u043e\u0448\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043b\u0443\u0436\u0438\u0442 \u0432\u0441\u044e \u043e\u0441\u0442\u0430\u0432\u0448\u0443\u044e\u0441\u044f \u0436\u0438\u0437\u043d\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043f\u043b\u043e\u0445\u0430\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u043e\u043b\u0433, \u0441\u043b\u0443\u0436\u0438\u0442 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u043e\u043c \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u0432\u044b\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0447\u0430\u0441\u044b \u0434\u0435\u0431\u0430\u0433\u0430. <\/p>\n<p>\u0423 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439, \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u0435\u0440\u0435 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043d\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. \u041c\u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0443\u0432\u0438\u0434\u0435\u0442\u044c (\u0438 \u043f\u043e\u043c\u043e\u0447\u044c \u0434\u043e\u0432\u0435\u0441\u0442\u0438 \u0434\u043e \u0444\u0438\u043d\u0438\u0448\u0430) \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 Ember. \u042f \u0432\u0438\u0434\u0435\u043b, \u043a\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u0431\u044b\u043b\u043e \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043d\u0430 \u0446\u0435\u043f\u043e\u0447\u043a\u0430\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u042f \u0432\u0438\u0434\u0435\u043b \u043c\u043d\u043e\u0433\u043e, <em>\u043c\u043d\u043e\u0433\u043e<\/em> \u043e\u0448\u0438\u0431\u043e\u043a, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0445 \u0434\u0430\u0436\u0435 \u043e\u0442 \u0441\u0430\u043c\u044b\u0445 \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b. \u041c\u043d\u0435 \u0434\u043e\u0432\u0435\u043b\u043e\u0441\u044c \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043a\u0438\u0445 \u0431\u0430\u0433\u043e\u0432 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u0418 \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 Ember \u0431\u043e\u043b\u0435\u0435 7 \u043b\u0435\u0442, \u044f \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0441\u044f \u0441 \u044d\u0442\u0438\u043c\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c\u0438 \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>\u041d\u0430 \u0444\u043e\u043d\u0435 \u044d\u0442\u043e\u0433\u043e, \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 &#8212; \u0433\u043b\u043e\u0442\u043e\u043a \u0441\u0432\u0435\u0436\u0435\u0433\u043e \u0432\u043e\u0437\u0434\u0443\u0445\u0430. \u0427\u0430\u0441\u0442\u0438\u0447\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u0435\u043d. \u0427\u0430\u0441\u0442\u0438\u0447\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044f \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 pull, \u043e\u043d \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u0435\u043d\u0438\u044f \u043e \u043a\u043e\u0434\u0435, \u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445. \u0418, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u043c\u044b\u0435 \u0438\u043c \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0442\u0438\u0432\u0438\u0440\u0443\u044e\u0442 \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u0435\u0440\u0435\u0436\u043b\u0438\u0432\u044b\u0439 \u0438 \u043d\u0435\u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0432\u044b\u0439 \u043a\u043e\u0434. <\/p>\n<p>\u041d\u043e, \u043f\u043e-\u043c\u043e\u0435\u043c\u0443, \u0441\u0430\u043c\u0430\u044f \u0441\u0438\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 &#8212; \u044d\u0442\u043e \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430. \u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0443 \u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f  \u0441\u043c\u043e\u0433 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c:<\/p>\n<pre><code class=\"javascript\">type Revision = number;  let CURRENT_REVISION: Revision = 0;  \/\/\/\/\/\/\/\/\/\/  const REVISION = Symbol('REVISION');  class Tag {   [REVISION] = CURRENT_REVISION; }  export function createTag() {   return new Tag(); }  \/\/\/\/\/\/\/\/\/\/  let onTagDirtied = () => {};  export function setOnTagDirtied(callback: () => void) {   onTagDirtied = callback; }  export function dirtyTag(tag: Tag) {   if (currentComputation.has(tag)) {     throw new Error('Cannot dirty tag that has been used during computation');   }    tag[REVISION] = ++CURRENT_REVISION;   onTagDirtied(); }  \/\/\/\/\/\/\/\/\/\/  let currentComputation: null | Set&lt;Tag> = null;  export function consumeTag(tag: Tag) {   if (currentComputation !== null) {     currentComputation.add(tag);   } }  function getMax(tags: Tag[]) {   return Math.max(tags.map(t => t[REVISION])); }  export function memoizeFunction&lt;T>(fn: () => T): () => T {   let lastValue: T | undefined;   let lastRevision: Revision | undefined;   let lastTags: Tag[] | undefined;    return () => {     if (lastTags &amp;&amp; getMax(lastTags) === lastRevision) {       if (currentComputation &amp;&amp; lastTags.length > 0) {         currentComputation.add(...lastTags);       }        return lastValue;     }      let previousComputation = currentComputation;     currentComputation = new Set();      try {       lastValue = fn();     } finally {       lastTags = Array.from(currentComputation);       lastRevision = getMax(lastTags);        if (previousComputation &amp;&amp; lastTags.length > 0) {         previousComputation.add(...lastTags)       }        currentComputation = previousComputation;     }      return lastValue;   }; }<\/code><\/pre>\n<p>\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c 80 \u0441\u0442\u0440\u043e\u0447\u0435\u043a \u043a\u043e\u0434\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u044f. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0443 \u043d\u0430\u0441 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 API, \u0432\u0435\u0441\u044c\u043c\u0430 \u0441\u0445\u043e\u0436\u0438\u0439 \u0441 \u0442\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0432 Ember, \u0441 \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 (\u0431\u0435\u0437 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 legacy). <\/p>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0435\u0433\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>createTag()<\/code>, \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 &#171;\u0433\u0440\u044f\u0437\u043d\u044b\u0435&#187; \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>dirtyTag(tag)<\/code>, \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0435\u043c \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>consumeTag()<\/code>. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>memoizeFunction()<\/code>. \u041a\u0430\u0436\u0434\u0430\u044f \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0449\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043b\u044e\u0431\u044b\u043c\u0438 \u0442\u0435\u0433\u0430\u043c\u0438, \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u043c\u0438 \u0441 <code>consumeTag()<\/code> \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f. <\/p>\n<pre><code class=\"javascript\">let tag = createTag();  let memoizedLog = memoizeFunction(() => {   console.log('ran!');   consumeTag(tag); });  memoizedLog(); \/\/ logs 'ran!' memoizedLog(); \/\/ nothing is logged  dirtyTag(tag); memoizedLog(); \/\/ logs 'ran!'<\/code><\/pre>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e API \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <code>@tracked<\/code>:<\/p>\n<pre><code class=\"javascript\">export function tracked(prototype, key, desc) {   let { initializer } = desc;    let tags = new WeakMap();   let values = new WeakMap();    return {     get() {       if (!values.has(this)) {         values.set(this, initializer.call(this));         tags.set(this, createTag());       }        consumeTag(tags.get(this));        return values.get(this);     },      set(value) {       values.set(this, value);        if (!tags.has(this)) {         tags.set(this, createTag());       }        dirtyTag(tags.get(this));     }   } }<\/code><\/pre>\n<p>\u0415\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e API \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u043e\u0441\u0442\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043b\u0430\u0441\u0441 <code>TrackedMap<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0441\u0440\u0435\u0434\u0438 \u043f\u0440\u043e\u0447\u0438\u0445 \u0432 \u0430\u0434\u0434\u043e\u043d\u0435<a href=\"https:\/\/github.com\/pzuraq\/tracked-built-ins\" rel=\"noopener noreferrer nofollow\"> tracked-built-ins<\/a>. <\/p>\n<p>\u0412 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u044f\u0434\u0440\u0430 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0442 API \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u043c. \u0412 \u0446\u0435\u043b\u043e\u043c \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a\u0436\u0435, \u0445\u043e\u0442\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u0442\u043a\u043b\u043e\u043d\u0435\u043d\u0438\u044f. \u042f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 API \u0432 \u043c\u043e\u0438\u0445 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u043e\u0441\u0442\u0430\u0445 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445. \u0417\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u0438\u0445 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u044f \u0434\u0430\u043c \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e. <\/p>\n<p>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<ol>\n<li>\n<p>\u0427\u0442\u043e\u0431\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0440\u0435\u0432\u0438\u0437\u0438\u044e \u0442\u0435\u0433\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u0438\u043c\u0432\u043e\u043b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u0435\u0442\u0430\u043b\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430. \u041f\u043e \u044d\u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 <code>Tag<\/code> \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>createTag<\/code>. \u0425\u043e\u0442\u044f \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>memoizeFunction<\/code> \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 <code>memoize<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u043c\u043d\u043e\u044e \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0435\u0435 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043e <em>\u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e<\/em> \u043d\u0430 \u0442\u0435\u0433\u0430\u0445 \u0438 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0435. \u0417\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0441\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u043f\u0440\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u043e\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u0441\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0447\u0442\u043e \u0441\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0430\u043c\u044f\u0442\u0438. \u0425\u043e\u0442\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>memoize<\/code> \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u0430\u0448 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 API. <\/p>\n<\/li>\n<\/ol>\n<h2>\u0417\u0430\u043c\u0435\u0442\u043a\u0430 \u043e \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445 \u0447\u0430\u0441\u0430\u0445<\/h2>\n<p>\u0415\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u043d\u0430\u0437\u0432\u0430\u043b \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a &#171;\u0447\u0430\u0441\u0430\u043c\u0438&#187;. \u0412 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 (concurrent programming) \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%92%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D0%BD%D1%8B%D0%B5_%D1%87%D0%B0%D1%81%D1%8B\" rel=\"noopener noreferrer nofollow\">\u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0435 \u0447\u0430\u0441\u044b<\/a>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0430\u044f\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043f\u0438\u0441\u043a\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0412\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0435 \u0447\u0430\u0441\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u0448\u0438\u043d \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u0438 \u043d\u0430\u0448\u0438 \u0447\u0430\u0441\u044b, \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0435 \u0447\u0430\u0441\u044b  &#171;\u0442\u0438\u043a\u0430\u044e\u0442&#187; \u043f\u043e \u043c\u0435\u0440\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0442 \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u0442\u0435\u043a\u0443\u0449\u0438\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u0442\u0441\u044f \u0432 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438. \u041d\u043e \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0438 \u043e\u0442 \u043d\u0430\u0448\u0438\u0445 \u0447\u0430\u0441\u043e\u0432, \u043c\u043e\u0436\u0435\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u0442\u0430\u043a\u0438\u0445 \u0447\u0430\u0441\u043e\u0432 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4ba\/0a8\/b79\/4ba0a8b799e6240a535de2def55c279a.png\" width=\"1394\" height=\"762\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4ba\/0a8\/b79\/4ba0a8b799e6240a535de2def55c279a.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0441 \u044d\u0442\u0438\u043c \u0434\u0435\u043b\u043e, \u0438 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e, \u043d\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u044d\u0442\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Web_Workers_API\/Using_web_workers\" rel=\"noopener noreferrer nofollow\">web worker<\/a>&#8216;\u044b \u0438\u043b\u0438 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/Service_Worker_API\/Using_Service_Workers\" rel=\"noopener noreferrer nofollow\">service worker<\/a>&#8216;\u044b. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0443 \u0432\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0447\u0435\u043c \u043e\u0434\u0438\u043d \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u0443 \u0432\u0430\u0441 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442 \u0435\u0434\u0438\u043d\u044b\u0445 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u0441\u043e\u0432. <\/p>\n<p>\u0414\u043e \u044d\u0442\u043e\u0433\u043e \u0435\u0449\u0435 \u0434\u0430\u043b\u0435\u043a\u043e, \u043d\u043e \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c. \u0423 \u043c\u0435\u043d\u044f \u0431\u044b\u043b \u043e\u043f\u044b\u0442 \u0441 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\u043c\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043c\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Ticketfly, \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0438\u0440\u0438\u043d\u0433\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u043b\u0435\u0442\u043e\u0432. \u042d\u0442\u043e \u0431\u044b\u043b\u0430 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u0435\u0441\u0435\u043b\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0438\u0437 \u0442\u0435\u0445, \u043d\u0430\u0434 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. <\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b, \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0439 \u0432\u043e\u0441\u0445\u0438\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0437 \u0440\u0435\u0434\u0430\u043a\u0446\u0438\u0438 Ember Octane. \u041d\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u0435\u043d\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u043e\u0441\u043c\u044b\u0441\u043b\u0438\u0432\u0430\u044e\u0442 \u0441\u0432\u043e\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u0415\u0441\u043b\u0438 \u0447\u0435\u0441\u0442\u043d\u043e, \u043c\u043d\u0435 \u043d\u0430 \u0443\u043c \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u043e <em>\u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438<\/em> \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438. <\/p>\n<p>\u041c\u043e\u0435 \u043c\u043d\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u043e\u0432\u043e, \u0447\u0442\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0443, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u0435 Ember-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043e\u0434\u0432\u0435\u0440\u0436\u0435\u043d\u043e \u043e\u0448\u0438\u0431\u043a\u0430\u043c, \u0438 \u0438\u0445 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0434\u043e\u0441\u0442\u0438.<\/p>\n<p>\u042f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u044d\u0442\u043e \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0432 \u0432\u043e\u043f\u0440\u043e\u0441. \u0421 \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043d\u0438\u0435\u043c \u0445\u043e\u0447\u0443 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0441\u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043d\u043e\u0432\u043e\u0435 \u044f\u0434\u0440\u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u042f \u0436\u0435 \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0435 \u043d\u0435\u0434\u0435\u043b\u0438 \u043d\u0430\u0447\u043d\u0443 \u043f\u0440\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u0435\u0439\u0441\u044b, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u043a\u0430\u043a \u0438\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0435, \u0434\u0430\u0439\u0442\u0435 \u043c\u043d\u0435 \u0437\u043d\u0430\u0442\u044c!<\/p>\n<blockquote>\n<p><em>\u041e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430: \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043e\u0431\u0441\u0443\u0434\u0438\u0442\u044c \u0441 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u043c\u0438 Ember-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438 \u043d\u043e\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 Ember, \u043f\u043e\u043c\u0438\u043c\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u043f\u043e\u0434 \u044d\u0442\u0438\u043c \u043f\u043e\u0441\u0442\u043e\u043c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u043c \u0432 <\/em><a href=\"https:\/\/t.me\/ember_js\" rel=\"noopener noreferrer nofollow\"><em>\u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c\u043c-\u0447\u0430\u0442<\/em><\/a><em>.<\/em><\/p>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/589553\/\"> https:\/\/habr.com\/ru\/articles\/589553\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u042d\u0442\u043e \u043f\u043e\u0441\u0442 &#8212; \u0442\u0440\u0435\u0442\u0438\u0439 \u0438\u0437 \u0441\u0435\u0440\u0438\u0438 \u043f\u043e\u0441\u0442\u043e\u0432 \u043e\u0431 <strong>\u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0435<\/strong> &#8212; \u043d\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 Ember.js. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0435\u0440\u0438\u0438 \u044f \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u044e \u043e\u0431\u0449\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438 \u0442\u043e, \u043a\u0430\u043a \u043e\u043d\u0438 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043c\u0438\u0440\u0435 Javascript.<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/post\/488530\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/post\/489530\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0445\u043e\u0440\u043e\u0448\u0435\u0439?<\/a> <\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u2190 \u042d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442<\/p>\n<\/li>\n<li>\n<p>\u041a\u0435\u0439\u0441 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u2014 TrackedMap<\/p>\n<\/li>\n<li>\n<p>\u041a\u0435\u0439\u0441 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u2014 @localCopy<\/p>\n<\/li>\n<li>\n<p>\u041a\u0435\u0439\u0441 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u2014 RemoteData<\/p>\n<\/li>\n<li>\n<p>\u041a\u0435\u0439\u0441 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430 \u2014 effect()<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u043f\u043e\u0441\u0442\u0435 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0432\u0435\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<ol>\n<li>\n<p>\u0414\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0432\u044b \u0432 \u043d\u0435\u0433\u043e \u043f\u0440\u0438\u0448\u043b\u0438, \u0432\u044b\u0432\u043e\u0434 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 <\/p>\n<\/li>\n<li>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u0435\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <\/p>\n<\/li>\n<li>\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <\/p>\n<\/li>\n<li>\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u043e\u0442\u0435\u0440\u044e \u0446\u0435\u043b\u043e\u0441\u0442\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <\/p>\n<\/li>\n<\/ol>\n<p>\u042d\u0442\u043e\u0442 \u043f\u043e\u0441\u0442 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433, \u0438 \u043a\u0430\u043a \u043e\u043d \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u044f\u0435\u0442 \u0432\u044b\u0448\u0435\u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c.<\/p>\n<h2>\u0417\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435<\/h2>\n<p>\u0412 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437 \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438 \u043d\u0430 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u044f\u0437\u044b\u043a\u0430 Elm \u0438 \u043d\u0430 \u0442\u043e\u043c \u043a\u0430\u043a (\u043a\u0430\u043a \u044f \u0434\u0443\u043c\u0430\u043b) \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <em>\u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 (memoization)<\/em> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0417\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 &#8212; \u044d\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u043a\u0430, \u0433\u0434\u0435 \u0432\u044b \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0431\u044b\u043b\u0430 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b. \u0417\u0430\u0442\u0435\u043c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.\u00a0<\/p>\n<p>\u041e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u044f \u043e\u0448\u0438\u0431\u0430\u043b\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e Elm \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u044d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u041e\u0434\u0438\u043d \u0438\u0437 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Elm \u043a \u0441\u0447\u0430\u0441\u0442\u044c\u044e \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u043c\u043d\u0435, \u0447\u0442\u043e Elm <em>\u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442<\/em> \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 \u0442\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0437\u0430\u0445\u043e\u0447\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c. \u042f \u0436\u0435 \u043f\u0440\u0438\u043d\u044f\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0435 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0431 Elm \u0431\u0435\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438, \u0431\u0435\u0437 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.\u00a0<\/p>\n<figure class=\"full-width\"><figcaption>\u041a\u043e\u0435-\u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0441 2012 \u0433\u043e\u0434\u0430<\/figcaption><\/figure>\n<p>\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 &#8212; \u044d\u0442\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433. \u0418, \u043a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u043f\u0440\u0438\u0447\u0438\u043d\u044b, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c Elm \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u0442\u0435\u043c \u0441\u043e\u0440\u0442\u043e\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u0430\u043a \u0440\u0430\u0437 \u0440\u0435\u0448\u0430\u044e\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430\u043c!<\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b <em>\u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430<\/em> \u0432 Javascript. \u041a\u0430\u043a \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u044b \u043d\u0435 \u0440\u0430\u0432\u043d\u044b \u043e\u0434\u0438\u043d \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.\u00a0  <\/p>\n<pre><code class=\"javascript\">let object1 = { foo: 'bar' };   let object2 = { foo: 'bar' };   object1 === object2; \/\/ false<\/code><\/pre>\n<p>\u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043f\u0440\u0438 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0438 \u044d\u0442\u043e \u0441\u0442\u0430\u0432\u0438\u0442 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u0434\u0438\u043b\u0435\u043c\u043c\u0443. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u0438\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 &#8212; \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u0430\u043a \u0432\u044b \u043f\u043e\u0439\u043c\u0435\u0442\u0435, \u0447\u0442\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u0435\u0433\u043e \u043f\u043e\u043b\u0435\u0439 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c? \u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u0441\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">\/\/ Basic memoization in JS let lastArgs; let lastResult;  function memoizedRender(...args) { \u00a0 if (deepEqual(lastArgs, args)) { \u00a0 \u00a0 \/\/ Args \u00a0 \u00a0 return lastResult; \u00a0 } \u00a0 lastResult = render(...args); \u00a0 lastArgs = args; \u00a0 return lastResult; }<\/code><\/pre>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>deepEqual<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e <code>lastArgs<\/code> \u0438 <code>args<\/code>. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0430 (\u0434\u043b\u044f \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u043c\u0435\u0441\u0442\u0430), \u043d\u043e \u043e\u043d\u0430 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e \u0432\u0441\u0435\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438\u043b\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u0430. \u0425\u043e\u0442\u044f \u044d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0441\u0430\u043c\u0430 \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 Elm-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0433\u0434\u0435 \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u044b \u0432\u043e\u0432\u043d\u0435. \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0443\u0442 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0430\u0447\u043d\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u043e\u043b\u044c\u0448\u0435.\u00a0<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u043a\u0430\u0436\u0435\u043c\u0441\u044f \u043e\u0442 \u044d\u0442\u043e\u0433\u043e! \u041a\u0430\u043a\u0438\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b? \u0427\u0442\u043e \u0436, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0433\u043e \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430 (deep-equality), \u0442\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 <em>\u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 (referential equality)<\/em>. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0442\u043e\u0442 \u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442, \u0447\u0442\u043e \u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e, \u0442\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043d\u0430 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<pre><code class=\"javascript\">let state = { \u00a0 items: [ \u00a0 \u00a0 { name: 'Banana' }, \u00a0 \u00a0 { name: 'Orange' }, \u00a0 ], };  const ItemComponent = memoize((itemState) => { \u00a0 return `&lt;li>${itemState.name}&lt;\/li>`; });  const ListComponent = memoize((state) => { \u00a0 let items = state.items.map(item => \u00a0 \u00a0 ItemComponent(item) \u00a0 ); \u00a0 return `&lt;ul>${items.join('')}&lt;\/ul>`; });  let output = ListComponent(state);<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 HTML (\u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 DOM, \u043d\u043e \u044d\u0442\u043e \u0442\u0435\u043c\u0430 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430). \u0421\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0438 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0430 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u043c\u044f \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441\u043f\u0438\u0441\u043a\u0430?\u00a0<\/p>\n<p>\u041e\u0442\u0432\u0435\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442: \u044d\u0442\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435. \u041c\u044b \u043c\u043e\u0436\u0435\u043c:<\/p>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u043e\u0432\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442 state \u0438\u043b\u0438.. <\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 state <\/p>\n<\/li>\n<\/ol>\n<p>\u0421\u043e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439 1, \u0435\u0441\u043b\u0438 \u043c\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0435, \u043d\u0430\u0448\u0435 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 <em>\u0432\u0441\u0435\u0433\u0434\u0430<\/em> \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c. \u0418 \u043d\u0430\u0448\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>ListComponent<\/code> \u0438 <code>ItemComponent<\/code> \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>\u0410 \u0447\u0442\u043e \u043d\u0430\u0441\u0447\u0435\u0442 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 2? \u041c\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e name \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430.\u00a0<\/p>\n<pre><code class=\"javascript\">state.items[0].name = 'Strawberry'; let output = ListComponent(state);<\/code><\/pre>\n<p>\u041d\u043e \u0438 \u044d\u0442\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0430\u043c \u043e\u0431\u044a\u0435\u043a\u0442 <code>state<\/code> \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>ListComponent<\/code> \u0432\u0435\u0440\u043d\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.\u00a0<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b\u00a0\u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u043c\u0430\u0441\u0441\u0438\u0432, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u043c \u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0442\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u043c\u0438. \u0412 \u0431\u043e\u043b\u044c\u0448\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0435\u043c \u043c\u043d\u043e\u0433\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u043c \u0438 \u043f\u043e\u0447\u0442\u0438 \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u0434\u043e\u0440\u043e\u0433\u0438\u043c \u043a\u0430\u043a \u0438 <code>deepEqual<\/code>.<\/p>\n<pre><code class=\"javascript\">\/\/ This only gets worse in the general case let [firstItem, restItems] = state.items;  state = {   ...state,   items: [     { ...firstItem, name: 'Strawberry' },     ...restItems   ] };<\/code><\/pre>\n<p>\u0422\u0430\u043a \u0447\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0442\u043e\u0436\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0432\u043e\u0432\u043d\u0435 \u043d\u0430\u0448\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u043c\u044b \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u0430 \u0434\u043b\u044f \u043c\u0435\u043c\u043e\u0438\u0437\u0430\u0446\u0438\u0438. <\/p>\n<p>\u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0430 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c, \u0435\u0441\u043b\u0438 TC39 \u0441\u043c\u043e\u0436\u0435\u0442 \u0432\u0432\u0435\u0441\u0442\u0438 <a href=\"https:\/\/github.com\/tc39\/proposal-record-tuple\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u043f\u0438\u0441\u0438 \u0438 \u041a\u043e\u0440\u0442\u0435\u0436\u0438<\/a>. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c <em>\u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u0443 \u043f\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e<\/em> \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043e- \u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u043e-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445  \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u0434\u043d\u0430\u043a\u043e, \u044d\u0442\u0430 \u0438\u043d\u0438\u0446\u0438\u0430\u0442\u0438\u0432\u0430 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0430 \u0421\u0442\u0430\u0434\u0438\u0438 1, \u0438 \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u044f\u0442\u0430, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f Elm-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u044d\u043a\u0441\u0442\u0440\u0435\u043c\u0430\u043b\u044c\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0443 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u043e\u0432\u043d\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0435, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435. <\/p>\n<p>\u0410 \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u0437\u043d\u0430\u043b\u0438 \u043a\u0430\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <em>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c<\/em> \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430? \u0418 \u0435\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u043d\u0435\u0434\u043e\u0440\u043e\u0433\u043e \u0443\u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u0434\u043d\u043e \u0438\u0437 \u043d\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c? \u041e\u0442\u043a\u0440\u044b\u043b\u043e \u0431\u044b \u044d\u0442\u043e \u043d\u0430\u043c \u043a\u0430\u043a\u0438\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438? <\/p>\n<h2>\u0412\u0445\u043e\u0434\u0438\u043c \u0432 \u0437\u043e\u043d\u0443 \u0410\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430<\/h2>\n<p>\u0410\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u0432\u043e\u043a\u0440\u0443\u0433 \u0438\u0434\u0435\u0438 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0441\u0447\u0435\u0442\u043e\u0432 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 <em>\u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c (memoize)<\/em> \u044d\u0442\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c \u043c\u0438\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f memoize \u0437\u043d\u0430\u0435\u0442 \u043e\u0431 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0435. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>InventoryComponent<\/code> \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433. <\/p>\n<pre><code class=\"javascript\">class Item {   @tracked name;    constructor(name) {     this.name = name;   } }  class State {   @tracked showItems = true;    @tracked selectedType = 'Fruits';    @tracked itemTypes = [     'Fruits',     'Vegetables',   ]    @tracked fruits = [     new Item('Banana'),     new Item('Orange'),   ];    @tracked vegetables = [     new Item('Celery'),     new Item('Broccoli'),   ]; }  const OptionComponent = memoize((name) => {   return `&lt;option>${name}&lt;\/option>`; });  const ListItemComponent = memoize((text) => {   return `&lt;li>${text}&lt;\/li>`; });  const InventoryComponent = memoize((state) => {   if (!state.showItems) return '';    let { selectedType } = state;    let typeOptions = state.itemTypes.map(type =>     OptionComponent(type)   );    let items = state[selectedType.toLowerCase()];    let listItems = items.map(item =>     ListItemComponent(item.name)   );    return `     &lt;select>${typeOptions.join('')}&lt;\/select>     &lt;ul>${listItems.join('')}&lt;\/ul>   `; });  let state = new State(); let output = InventoryComponent(state);<\/code><\/pre>\n<p>\u0412 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u043c \u043c\u0438\u0440\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f memoize \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0441 \u043f\u043e\u043c\u0435\u0442\u043a\u043e\u0439 <code>@tracked<\/code>. \u0412 <em>\u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435<\/em> \u043a \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0435\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u044b, \u043e\u043d\u0430 <em>\u0442\u0430\u043a\u0436\u0435<\/em> \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c \u043b\u0438 \u043e\u043d\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>name<\/code>, \u043a\u0430\u0436\u0434\u0430\u044f \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0449\u0430\u044f (memoized) \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u043d\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u0430 \u043b\u0438 \u043d\u043e\u0432\u0430\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430. <\/p>\n<pre><code class=\"javascript\">state.fruits[0].name = 'Strawberry';  \/\/ \u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f InventoryComponent, \u0430 \u0442\u0430\u043a\u0436\u0435 \/\/ \u043f\u0435\u0440\u0432\u044b\u0439 ListItemComponent. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435  \/\/ ListItem \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f  let output = InventoryComponent(state);<\/code><\/pre>\n<p>\u0417\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0439 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u0440\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e. \u0410 \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e\u0449\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043e \u043d\u0430 \u0441\u0442\u0430\u0434\u0438\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f (reconciliation) (\u043c\u043e\u0433\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e Elm \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0447\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439)<\/p>\n<p>\u041d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e <em>\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e<\/em>? \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043b\u0435\u0437\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0430\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433\u0430.<\/p>\n<h2>\u0420\u0435\u0432\u0438\u0437\u0438\u0438 \u0438 \u0442\u0435\u0433\u0438<\/h2>\n<p>\u0410\u0432\u0442\u043e\u0442\u0440\u0435\u043a\u0438\u043d\u0433 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0432\u043e\u043a\u0440\u0443\u0433 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0447\u0438\u0441\u043b\u0430. \u042d\u0442\u043e \u0447\u0438\u0441\u043b\u043e &#8212; <em>\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0440\u0435\u0432\u0438\u0437\u0438\u0438. <\/em><\/p>\n<pre><code class=\"javascript\">let CURRENT_REVISION: number = 0;<\/code><\/pre>\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u0443\u043c\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043a\u0430\u043a \u043e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 &#171;\u0447\u0430\u0441\u0430\u0445&#187;. \u0422\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u044b \u043e\u0442\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442 \u0432\u0440\u0435\u043c\u044f, \u0430 \u043c\u044b &#8212; <em>\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f<\/em>. \u041a\u043e\u0433\u0434\u0430 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u043d\u0430\u0448\u0438\u0445 \u0447\u0430\u0441\u043e\u0432 \u043d\u0430 1.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u043b\u0438\u0446\u0435\u0442\u0432\u043e\u0440\u044f\u0435\u0442 <em>\u0432\u0435\u0440\u0441\u0438\u044e<\/em> \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u0435\u0431\u044b\u0432\u0430\u043b\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412\u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u044b \u0431\u044b\u043b\u0438 \u0432 \u0432\u0435\u0440\u0441\u0438\u0438 0. \u041f\u043e\u0442\u043e\u043c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0438 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 <em>\u0432\u0435\u0440\u0441\u0438\u044e 1.<\/em> \u0423\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u0438 \u043c\u044b \u0441\u043b\u0435\u0434\u0438\u043c \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0431\u044b\u043b\u0438 \u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u0415\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0442\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u044b\u043b\u043e \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0435, \u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435. \u041d\u043e \u044d\u0442\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432 \u043d\u0430\u0448\u0435\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435 \u0441 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435\u043c. \u041c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u0438\u0441\u044c \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438, \u0432\u0435\u0434\u044c \u044d\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043a \u0434\u0440\u0443\u0433\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043d\u0435 \u0443\u0447\u0430\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0443\u0447\u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u0447\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f <em>\u0432\u043d\u0443\u0442\u0440\u0438<\/em> \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <em>\u0442\u0435\u0433\u0438<\/em>. <\/p>\n<p>\u0422\u0435\u0433\u0438 \u043e\u043b\u0438\u0446\u0435\u0442\u0432\u043e\u0440\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u043e\u0433\u043e \u043a\u0443\u0441\u043e\u0447\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0435\u0433 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e. <\/p>\n<blockquote>\n<p>\u0422\u0435\u0433\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043e\u0442 <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTTP_ETag\" rel=\"noopener noreferrer nofollow\">ETags<\/a> \u0438\u0437 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e HTTP. ETags \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f<\/p>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-400065","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/400065","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=400065"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/400065\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=400065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=400065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=400065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}