{"id":321120,"date":"2021-04-08T15:00:37","date_gmt":"2021-04-08T15:00:37","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=321120"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=321120","title":{"rendered":"\u042d\u0432\u043e\u043b\u044e\u0446\u0438\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 UI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432: \u043e\u0442 \u0434\u0438\u043d\u043e\u0437\u0430\u0432\u0440\u043e\u0432 \u043a Jetpack Compose"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/iz\/v9\/7k\/izv97k6ckc5x0uusyiv8ig6h6ga.png\"><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442 Jetpack Compose \u043f\u0440\u0438\u0432\u043b\u0451\u043a \u043c\u043d\u043e\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0432 Android-\u043c\u0438\u0440\u0435, \u0435\u0449\u0451 \u043a\u043e\u0433\u0434\u0430 \u0431\u044b\u043b \u0432 \u0430\u043b\u044c\u0444\u0430-\u0432\u0435\u0440\u0441\u0438\u0438. \u0410 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0434\u043e\u0431\u0440\u0430\u043b\u0441\u044f \u0434\u043e \u0431\u0435\u0442\u044b \u2014 \u0442\u0430\u043a \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435\u043c Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043f\u043e\u0440\u0430 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0434\u043b\u044f \u0425\u0430\u0431\u0440\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0434\u043e\u043a\u043b\u0430\u0434\u0430 <strong>\u041c\u0430\u0442\u0432\u0435\u044f \u041c\u0430\u043b\u044c\u043a\u043e\u0432\u0430<\/strong> \u0441 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 Mobius. \u041c\u0430\u0442\u0432\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Google UK \u0438 \u043b\u0438\u0447\u043d\u043e \u043f\u0440\u0438\u0447\u0430\u0441\u0442\u0435\u043d \u043a Compose, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u0437 \u0434\u043e\u043a\u043b\u0430\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043a\u043e\u0435-\u0447\u0442\u043e \u043e \u00ab\u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445\u00bb \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437 \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u0438\u043c: \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0443\u0434\u0435\u043b\u0435\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Jetpack Compose, \u0430 \u0432\u0441\u0435\u043c\u0443 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443 \u0432 \u0446\u0435\u043b\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0435\u0449\u0451 \u0438 \u043f\u0440\u043e\u0435\u043a\u0442 Compose for Desktop \u043e\u0442 JetBrains. \u0418 \u0441\u043a\u043e\u0440\u043e \u043d\u0430 Mobius \u043e \u043d\u0451\u043c \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043a\u0430\u0437 \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u0440\u0443\u043a: 14 \u0430\u043f\u0440\u0435\u043b\u044f \u043e\u0431 \u044d\u0442\u043e\u043c <a href=\"https:\/\/mobius-piter.ru\/2021\/spb\/talks\/2xc1ghz3mflzjnl1rykk9z\/?utm_source=habr&amp;utm_medium=549008\">\u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u0442<\/a> \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u041d\u0438\u043a\u043e\u043b\u0430\u0439 \u0418\u0433\u043e\u0442\u0442\u0438.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442 \u043b\u0438\u0446\u0430 \u0441\u043f\u0438\u043a\u0435\u0440\u0430.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<div class=\"oembed\"><iframe allowfullscreen id=\"605df655aa2e6ed27439fa51\" src=\"https:\/\/embedd.srv.habr.com\/iframe\/605df655aa2e6ed27439fa51\"><\/iframe><\/div>\n<p>  <\/p>\n<p>\u042f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e Jetpack Compose, \u043d\u043e \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0432 \u0446\u0435\u043b\u043e\u043c \u043f\u0440\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 UI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438: \u043e\u043a\u0443\u043d\u0443\u0442\u044c\u0441\u044f \u0432 \u0438\u0445 \u043f\u0440\u043e\u0448\u043b\u043e\u0435, \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0438 \u0431\u0443\u0434\u0443\u0449\u0435\u0435.<\/p>\n<p>  <\/p>\n<h2 id=\"proshloe-o-deklarativnom-i-imperativnom\">\u041f\u0440\u043e\u0448\u043b\u043e\u0435: \u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u0438 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c<\/h2>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0443\u0436\u0435 \u0431\u044b\u043b\u0438 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0438 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438. \u041b\u044e\u0434\u0438 \u0447\u0430\u0441\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u044f\u0442: \u00ab\u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435\u00bb. \u0412 \u043c\u043e\u0451\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438, \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043d\u0435 \u043b\u0443\u0447\u0448\u0435 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e, \u0430 \u043b\u044e\u0431\u0438\u0442 \u0435\u0433\u043e. \u042d\u0442\u043e \u0434\u0432\u0435 \u0447\u0430\u0441\u0442\u0438 \u043b\u044e\u0431\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043b\u044e\u0431\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430. \u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0442\u0430\u043a, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435.<\/p>\n<p>  <\/p>\n<p>\u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u043d\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044f control flow. \u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043d\u0435 \u00ab\u043a\u0430\u043a\u00bb, \u0430 \u00ab\u0447\u0442\u043e\u00bb \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u042d\u0442\u043e \u0441\u0430\u043c\u043e\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fa\/tr\/fn\/fatrfnf3dqnxj3iskw1om_1su3o.png\"><\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u043f\u043e\u043a\u0430 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0435 \u043f\u0440\u043e UI. \u0427\u0430\u0441\u0442\u044c \u00abHow\u00bb \u2014 \u044d\u0442\u043e \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f. \u041c\u044b \u0431\u0435\u0440\u0435\u043c var \u0438 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0443 \u043d\u0435\u0433\u043e \u0432 \u0446\u0438\u043a\u043b\u0435. \u0418 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u00abWhat\u00bb \u2014 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0433\u0434\u0435 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c: \u0437\u0430\u0440\u0435\u0434\u044c\u044e\u0441\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438. <\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u044c\u043c\u0451\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u043f\u0440\u043e\u0449\u0435:<\/p>\n<p>  <\/p>\n<p>val a = 4<br \/>  val b = -2<br \/>  val result = a + b<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0438 \u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0438\u043b\u0438 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438? \u041e\u0442\u0432\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0441 \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c. \u0420\u0430\u0437 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043f\u0440\u043e\u0448\u043b\u043e\u043c, \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043c, \u043a\u0430\u043a \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u044f\u0437\u044b\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<h2 id=\"pokoleniya-yazykov-programmirovaniya\">\u041f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u044f \u044f\u0437\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ww\/oj\/8a\/wwoj8aqztwgmmed-az3s2ieoh94.png\"><\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e: \u043c\u044b \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c, \u043a\u0430\u043a \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430, \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u043c \u043c\u0430\u0448\u0438\u043d\u0435 \u043d\u0430 \u0435\u0435 \u044f\u0437\u044b\u043a\u0435, \u0431\u0430\u0439\u0442 \u0437\u0430 \u0431\u0430\u0439\u0442\u043e\u043c. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0442\u0443\u0442 \u043e\u0448\u0438\u0431\u043a\u0430: \u044d\u0442\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0432\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u044f, \u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0422\u0440\u0435\u0442\u0438\u0439 \u0441\u0438\u043c\u0432\u043e\u043b \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043d\u0443\u043b\u0451\u043c. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043e\u0447\u0435\u043d\u044c \u043d\u0438\u0437\u043a\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0431\u044f\u0442\u0430 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u0432\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u0435 \u044f\u0437\u044b\u043a\u043e\u0432.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gy\/bs\/ul\/gybsullthpdxhqw6fszzt9dg0x0.png\"><\/p>\n<p>  <\/p>\n<p>\u0410\u0441\u0441\u0435\u043c\u0431\u043b\u0435\u0440\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0440\u0430\u0439\u043d\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f ADD. \u0422\u044b \u043d\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0448\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043c\u0430\u0448\u0438\u043d\u0435, \u0442\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u0448\u044c, \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u2014 \u0441\u043b\u043e\u0436\u0438\u0442\u044c. \u041d\u043e, \u043a\u0430\u043a \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u043e\u0441\u044c, \u044d\u0442\u043e\u0433\u043e \u0442\u043e\u0436\u0435 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3m\/sn\/g9\/3msng989vqhsn_niez67u5-3zzc.png\"><\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0431\u044f\u0442\u0430 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u044f\u0437\u044b\u043a\u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f: Java, Kotlin, C, C++. \u041e\u043d\u0438 \u0442\u043e\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c\u0438 \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u044f\u043c\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u044b \u043d\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0448\u044c \u043c\u0430\u0448\u0438\u043d\u0435, \u0447\u0442\u043e \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0448\u044c: a = 4, b = \u20132 \u0438 result = a + b. \u041d\u043e \u0432\u0441\u0435 \u044d\u0442\u043e \u043f\u0440\u043e\u0448\u043b\u043e\u0435.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ex\/0_\/mj\/ex0_mjivzhfmwyxfj2edyiu-zb4.png\"><\/p>\n<p>  <\/p>\n<p>\u0410 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u044f\u0437\u044b\u043a\u0430\u0445 \u043f\u043e\u0432\u044b\u0448\u0435: \u044d\u0442\u043e \u0432\u0435\u0449\u0438 \u0432\u0440\u043e\u0434\u0435 RxJava \u0438\u043b\u0438 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 UI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438. \u041d\u043e\u0432\u044b\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u043d\u0435 \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0442 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043e\u0431\u0449\u0435\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438. \u041e\u043d\u0438, \u043a\u0430\u043a \u0438 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u044f, \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u0443\u044e\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u0443\u0435\u0442 \u0442\u0440\u0435\u0442\u044c\u0435, \u0442\u0440\u0435\u0442\u044c\u0435 \u2014 \u0432\u0442\u043e\u0440\u043e\u0435, \u0430 \u0432\u0442\u043e\u0440\u043e\u0435 \u2014 \u043f\u0435\u0440\u0432\u043e\u0435. <\/p>\n<p>  <\/p>\n<p>\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043b\u044e\u0431\u043e\u0435 \u043d\u043e\u0432\u043e\u0435 \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u0435 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447. \u041d\u0430\u0448\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0442\u0441\u044f, \u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0435\u0448\u0430\u0442\u044c \u0438\u0445 \u043f\u0440\u043e\u0449\u0435. \u041a\u043e\u0433\u0434\u0430 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043c\u044b \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438, \u043d\u043e\u0432\u044b\u0435 \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0448\u0430\u044e\u0442 \u0438\u0445 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e. \u0412 \u0447\u0438\u0441\u043b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0433\u043e \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u044f \u2014 1C, R, SQL, RegEx. \u0415\u0449\u0451 \u0432 \u0447\u0435\u0442\u0432\u0451\u0440\u0442\u043e\u043c \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u0438 \u0435\u0441\u0442\u044c domain specific languages, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0448\u0430\u044e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b: React, RxJava, JetpackCompose.<\/p>\n<p>  <\/p>\n<p>\u0412\u044b\u0432\u043e\u0434: \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u041a\u0442\u043e-\u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c \u043c\u0430\u0448\u0438\u043d\u0435, \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c\u0443 \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u044e \u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u0443\u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438 \u0447\u0442\u043e. \u0415\u0449\u0435 \u043e\u0434\u043d\u0438\u043c \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u043a\u0442\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u0431\u0435\u0436\u0430\u0442\u044c \u0432 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432. <\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 C++ \u0435\u0441\u0442\u044c intrinsics \u0438\u043b\u0438 inline ASM. \u0412 React \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c reference \u043f\u0440\u044f\u043c\u043e \u043d\u0430 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b. \u041e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0432 RxJava \u2014 PublishSubject. \u0412 Jetpack Compose \u0435\u0441\u0442\u044c imperative drawing, imperative touch-handling, onCommit. \u042d\u0442\u043e \u0434\u0430\u0451\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0440\u0445 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0438 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<h2 id=\"ui-freymvorki-proshloe-i-nastoyaschee\">UI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438: \u043f\u0440\u043e\u0448\u043b\u043e\u0435 \u0438 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435<\/h2>\n<p>  <\/p>\n<p>\u0413\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432 \u0440\u0430\u0437\u0440\u0435\u0437\u0435 Android \u0438 \u0432\u0435\u0431\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0432 UI, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u044e\u0442\u0441\u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u0435\u0441\u0442\u044c \u0438 \u0432 \u0432\u0435\u0431\u0435, \u0438 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 UI-\u043e\u0431\u043b\u0430\u0441\u0442\u044f\u0445. <\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c HTML. \u041c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a, \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u0432\u0430 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430 \u0441 \u0442\u0430\u043a\u0438\u043c-\u0442\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u043c. \u041f\u043e\u0442\u043e\u043c \u0438\u0437 \u044d\u0442\u043e\u0433\u043e HTML \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u0434\u0435\u0440\u0435\u0432\u043e.<br \/>  HTML \u2014 \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430, \u043e\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0447\u0430\u0435\u0442 \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442. \u0418 \u0441 \u044d\u0442\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 HTML \u043a\u0430\u043a \u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u043c UI, \u043d\u0435 \u0431\u0435\u0440\u044f \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0435\u0440\u0435\u0442 \u0444\u0430\u0439\u043b \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 UI.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u044f \u0437\u0430\u043c\u0435\u043d\u044e HTML \u043d\u0430 main_layout.xml, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0441\u0442\u044c \u0443 \u043d\u0430\u0441 \u0443 \u0432\u0441\u0435\u0445 \u0432 Android-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f. \u042d\u0442\u043e \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 \u044f\u0437\u044b\u043a \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0441\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441 HTML \u0434\u043b\u044f Android. \u042d\u0442\u043e \u0442\u043e\u0442 \u0436\u0435 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a UI: \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0448\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e inflate, \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0448\u044c \u0434\u0435\u0440\u0435\u0432\u043e UI.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0436\u0438\u0432\u0435\u043c \u0432 1995 \u0433\u043e\u0434\u0443 \u0438 \u043d\u0435 \u043f\u0438\u0448\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0430\u0439\u0442\u044b, \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0433\u0434\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u0443 \u043d\u0430\u0441 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430. \u041c\u044b \u043f\u0438\u0448\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043c\u043d\u043e\u0433\u043e state \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 UI, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u043b\u0435\u0442\u0443.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435. \u041c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440 \u0438 \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u043d\u0435\u043c \u043f\u043b\u0430\u0448\u043a\u0443 \u0441 \u043d\u0435\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u043c\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/wz\/57\/p2\/wz57p2zoil06xncciau8f96ybx8.png\"><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 Read All, \u0443 \u043d\u0430\u0441 0 \u043d\u0435\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0445. \u0427\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0435\u0440\u0435\u0432\u043e \u043d\u0430\u0448\u0435\u0433\u043e UI (\u0431\u0443\u0434\u044c \u0442\u043e \u0445\u043e\u0442\u044c Android \u0441 \u0432\u0435\u0449\u0430\u043c\u0438 \u0432\u0440\u043e\u0434\u0435 TextView, \u0445\u043e\u0442\u044c \u0445\u043e\u0442\u044c HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0440\u043e\u0434\u0435 div). \u0418 \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u0442\u0430\u043a\u043e\u0439 \u0447\u0435\u043b\u043e\u0432\u0435\u043a, \u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0437\u0432\u0430\u0442\u044c \u041a\u0430\u043f\u0438\u0442\u0430\u043d \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/r0\/ag\/_a\/r0ag_akuievw7rfz8axwbcqux9m.png\"><\/p>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c 100 \u043d\u0435\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u0442 Read All. \u041a\u0430\u043f\u0438\u0442\u0430\u043d \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0431\u0435\u0440\u0435\u0442 UI, \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c, \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u044d\u0442\u043e, \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u043d\u043e\u0432\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0441 child. \u041c\u043e\u043b\u043e\u0434\u0435\u0446!<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/i3\/vm\/cz\/i3vmczku-im5inxpyfmltedg-y0.jpeg\"><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0442\u043e\u043c \u043f\u0440\u0438\u0448\u043b\u043e \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435. \u041d\u0443\u0436\u043d\u043e \u0441\u043d\u043e\u0432\u0430 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u0434\u0432\u0435\u0442\u043a\u0443 UI (\u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u043d\u0435 \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c, \u0430 \u043e\u0434\u043d\u0443 \u0447\u0430\u0441\u0442\u044c), \u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 View.GONE \u0438\u043b\u0438 View.INVISIBLE. \u0418 \u043c\u044b \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0435\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430 undo \u0438\u043b\u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0435\u0449\u0451 \u043d\u043e\u0432\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0432\u0441\u0435\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438. \u0418 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 \u0443\u0436\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0434\u0432\u0430.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">val unreadRoot = document.getElementsByClassName(&quot;unreadRoot&quot;);  val count = document.createElement('div');  count.textContent = 'You have $count unread messages'; unreadRoot.appendChild(count);<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 JavaScript \u0431\u0435\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u043b\u044e\u0434\u0438 \u043f\u0438\u0448\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a: \u043e\u043d\u0438 \u0431\u0435\u0440\u0443\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0438\u0445, \u0441\u0442\u0430\u0432\u044f\u0442 \u0438\u043c \u0442\u0435\u043a\u0441\u0442, \u0430\u043f\u043f\u0435\u043d\u0434\u044f\u0442 childs \u2014 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u041a\u0430\u043f\u0438\u0442\u0430\u043d \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0441\u0442\u044c.<br \/>  \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0443 \u043d\u0430\u0441 \u043d\u0430 \u0430\u043d\u0434\u0440\u043e\u0438\u0434\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">val unreadIcon = findViewById(R.id.unread)  if (unreadCount == 0) {  unreadIcon.setVisibility(GONE)  } else if (unreadCount &gt; 0) {            unreadIcon.setVisibility(VISIBLE)            unreadIcon.setCount(unreadCount)            var hasImportant = unreadMessages.exists(it.isImportant)            if (hasImportant) {            unreadCount.setTextColor(Red)            } else {            unreadCount.setTextColor(Blue)            }  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u042f \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043b unreadIcon \u043d\u0430 null, \u0445\u043e\u0442\u044f \u0441\u0442\u043e\u0438\u043b\u043e. \u0413\u0434\u0435-\u0442\u043e \u044f \u043e\u0431\u043d\u043e\u0432\u0438\u043b TextColor \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0447\u0435\u0433\u043e-\u0442\u043e. \u041d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u0431\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043f\u0440\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434: \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u0442\u044c \u041a\u0430\u043f\u0438\u0442\u0430\u043d\u043e\u043c \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0441\u0442\u044c\u044e, \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0433\u043e\u043b\u043e\u0432\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0435\u0449\u0435\u0439, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e, \u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435. \u0427\u0430\u0441\u0442\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043d\u0430\u043c \u043d\u0435 \u0432\u0430\u0436\u043d\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b, \u043d\u0430\u043c \u0432\u0430\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0432\u0438\u0434\u0435\u043b \u043e\u0434\u043d\u043e, \u043f\u043e\u0442\u043e\u043c \u0443\u0432\u0438\u0434\u0435\u043b \u0432\u0442\u043e\u0440\u043e\u0435, \u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0431\u044b\u043b \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434. <\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043e\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e. <\/p>\n<p>  <\/p>\n<h2 id=\"ui-freymvorki-nastoyaschee-i-buduschee-glavnye-principy\">UI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438: \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0438 \u0431\u0443\u0434\u0443\u0449\u0435\u0435. \u0413\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b<\/h2>\n<p>  <\/p>\n<p>\u041d\u043e\u0432\u044b\u0439 UI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0423\u0431\u0438\u0440\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 (\u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430)<\/li>\n<li>UI \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/li>\n<li>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 markup \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 HTML \u0438\u043b\u0438 XML \u0438\u043b\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u044d\u0442\u043e \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c UI, \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e state.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/cv\/8j\/tu\/cv8jtue6hujtxildv7z_g7tlsiw.png\"><\/p>\n<p>  <\/p>\n<p>\u042f \u0438\u043c\u0435\u044e \u0432 \u0432\u0438\u0434\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u044b \u0441\u043a\u0430\u0440\u043c\u043b\u0438\u0432\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c \u043b\u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0435, \u0431\u0443\u0434\u0435\u0442 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a f(false) \u0438\u043b\u0438 f(true). \u0421\u0442\u0440\u043e\u0438\u043c \u0432 \u044d\u0442\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0434\u0435\u0440\u0435\u0432\u0430.<\/p>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c Markup \u0438 Dynamic, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0430 \u0442\u0440\u0435\u0442\u044c\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 Markup. \u0418 \u0435\u0441\u0442\u044c \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u044d\u0442\u043e \u0443\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, React \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043b HTML \u0438 JavaScript \u0432 React Components. \u0418 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u0438\u043c \u0438\u0434\u0435\u0442 JSX, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 JavaScript \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u0431\u044b HTML.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 Jetpack Compose \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e: Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0443. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/y4\/9h\/2d\/y49h2dmczc5eduah5_9m_r01qw4.png\"><\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Compose, \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0435\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u0435 \u043b\u044e\u0431\u043e\u0439 UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0441 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439 Composable. \u0422\u043e\u043b\u044c\u043a\u043e Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable  fun UnreadSection(count: Int) {             Text(          text = &quot;You have $count unread messages&quot;,           color = if (count &gt; 10) Color.Red else Color.Green           )        if (count &gt; 0) {             ReadAllButton()         }         } <\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u2014 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f UnreadSection \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439. \u0418 \u0434\u0430\u043b\u044c\u0448\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u044f \u043c\u043e\u0433\u0443 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e. \u041c\u043e\u0433\u0443 \u043f\u0440\u044f\u043c\u043e \u0437\u0434\u0435\u0441\u044c \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c. \u041c\u043e\u0433\u0443 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 Kotlin: if \u0438\u043b\u0438 for. \u041c\u043e\u0433\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0438\u043b\u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u0435\u0451. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0435\u0451 visibility, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u0438\u0441\u043a\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0442\u043a\u0443\u0434\u0430-\u0442\u043e \u0438\u0437 XML \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. <\/p>\n<p>  <\/p>\n<p>\u0412\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u043e\u0442 false \u0438 true. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c UnreadSection(count = 100), \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043e\u0434\u043d\u043e \u0434\u0435\u0440\u0435\u0432\u043e, \u0430 \u0435\u0441\u043b\u0438 UnreadSection(count = 0), \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/0z\/20\/co\/0z20coqpbhzt3wam_nzym0gfze4.png\"><\/p>\n<p>  <\/p>\n<p>\u0418 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0433\u0434\u0435 \u0447\u0435\u043c\u0443 \u0440\u0430\u0432\u0435\u043d count. Jetpack Compose \u0442\u0430\u043a \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. <\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441: \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0435? \u041f\u0440\u043e\u0441\u0442\u044b\u043c \u043e\u0442\u0432\u0435\u0442\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c: \u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043c\u0435\u043d\u044f\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e \u043e\u0434\u043d\u043e, \u0430 \u0431\u0430\u0445\u043d\u0435\u043c \u0434\u0440\u0443\u0433\u043e\u0435. \u042d\u0442\u043e \u0442\u0430\u043a \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0423 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u044d\u043a\u0440\u0430\u043d\u0430. \u0415\u0441\u043b\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u043e. \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0432 \u0432\u0435\u0431\u0435: \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u044d\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438. <\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u043a\u0440\u0430\u043d \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u2014 \u0434\u043e\u0440\u043e\u0433\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f. <\/p>\n<p>  <\/p>\n<p>\u0418 \u0440\u0435\u0431\u044f\u0442\u0430 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e, \u0434\u0435\u0448\u0435\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e UI. \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u0442\u0440\u043e\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e. \u0421\u0447\u0438\u0442\u0430\u0435\u043c diff \u043c\u0435\u0436\u0434\u0443 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438. \u0418 \u043d\u0430\u0443\u0447\u0438\u043c \u043d\u0430\u0448 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432\u044b\u0440\u0430\u0436\u0430\u0442\u044c diff \u043a\u0430\u043a \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0434 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c\u0438 UI.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u043a\u0430\u043a \u0432\u043e\u043f\u043b\u043e\u0442\u0438\u0442\u044c \u0438\u0434\u0435\u044e. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/0-\/s9\/3m\/0-s93mpyqmbn_gnyhvm1k0xn_dg.png\"><\/p>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c UI \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0421 \u044d\u0442\u0438\u043c \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u043d\u0430\u0448\u0435\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435. \u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 UI \u2014 \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u0432\u0438\u0434\u0438\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c. \u0418 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0440\u0435\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435. \u0423 \u043d\u0430\u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 true, \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e unread count \u0438\u043b\u0438, \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 false. \u041c\u044b \u0441\u0442\u0440\u043e\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0435\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044e. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c diff \u044d\u0442\u0438\u0445 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0439, \u043d\u0430 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043e\u0434 \u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043d\u0430\u0434 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c UI. \u0412\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pf\/ey\/yf\/pfeyyfrelgmao6b6styv4g8lg0k.png\"><\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0444\u0430\u043a\u0442 \u0437\u0434\u0435\u0441\u044c \u2014 \u044f \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0447\u0442\u043e \u0432 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0435\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0448 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043e\u0434 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00abReconciliation\u00bb, \u043e\u043d \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 \u043d\u0430\u0441 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438. \u0415\u0441\u043b\u0438 Reconciliation \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0432\u0430\u043c \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c, \u0442\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u044d\u0442\u043e \u043a\u0430\u043a \u0410\u0432\u0442\u043e \u041a\u0430\u043f\u0438\u0442\u0430\u043d \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u043e\u0441\u0442\u044c. <\/p>\n<p>  <\/p>\n<p>\u0418 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0443 \u043d\u0430\u0441 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0440\u0435\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u043c\u044b \u0438\u0445 \u0441\u0442\u0440\u043e\u0438\u043c, \u0441\u0442\u0440\u043e\u0438\u043c diff, \u0441\u0442\u0440\u043e\u0438\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 Reconciliation \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0448\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e. \u041d\u043e \u043a\u0430\u043a \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u0442\u0438\u0445 \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Reconciliation, \u043a\u0430\u043a\u0430\u044f \u0432 \u044d\u0442\u043e\u043c \u0437\u0430\u0434\u0430\u0447\u0430 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430.<\/p>\n<p>  <\/p>\n<h2 id=\"reconciliation\">Reconciliation<\/h2>\n<p>  <\/p>\n<p>\u0411\u0430\u0437\u043e\u0432\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0437\u0432\u0443\u0447\u0438\u0442 \u0442\u0430\u043a: \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u0430\u043d\u0434 \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0434\u0435\u0440\u0435\u0432\u0430 \u0410 \u0432 \u0434\u0435\u0440\u0435\u0432\u043e \u0411. <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: <a href=\"https:\/\/grfia.dlsi.ua.es\/ml\/algorithms\/references\/editsurvey_bille.pdf\">\u043e\u0431\u0449\u0438\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c<\/a> \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043d\u0430\u0431\u043e\u0440\u0430 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0434\u0435\u0440\u0435\u0432\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0435, \u0438\u043c\u0435\u0435\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c O(n<sup>3<\/sup>).<\/p>\n<p>  <\/p>\n<p>\u041a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u0441 \u0442\u044b\u0441\u044f\u0447\u0435\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u043d\u0443, \u0441\u0440\u0435\u0434\u043d\u0435\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0442\u0430\u043a\u043e\u0439 UI), \u0442\u043e \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0438\u0445. \u0422\u0430\u043a \u043d\u0435 \u043f\u043e\u0439\u0434\u0451\u0442.<\/p>\n<p>  <\/p>\n<p>\u041e\u043f\u044b\u0442\u043d\u044b\u0435 \u0440\u0435\u0431\u044f\u0442\u0430 \u0437\u043d\u0430\u044e\u0442: \u0435\u0441\u043b\u0438 \u043d\u0430\u0434\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0441\u0442\u0430\u0432\u044c \u043a\u044d\u0448! \u041d\u0443, \u0432 \u043e\u0431\u0449\u0435\u043c, \u043d\u0430\u0434\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f, \u043f\u043e\u043d\u044f\u0442\u044c, \u0433\u0434\u0435 \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0431\u044b\u0441\u0442\u0440\u0435\u0435.<\/p>\n<p>  <\/p>\n<p><em>\u0423\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435 1<\/em> (\u043e\u0447\u0435\u043d\u044c \u043e\u0431\u0449\u0435\u0435 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0432\u0442\u043e\u0440\u044b\u043c \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435\u043c \u0432 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u0432\u0438\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 React, Compose): \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\/\u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u043e \u0442\u0435 \u0436\u0435 \u0441\u0430\u043c\u044b\u0435, \u0442\u043e \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>  <\/p>\n<p><em>\u0423\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435 2<\/em>: \u0435\u0441\u043b\u0438 \u0432\u0445\u043e\u0434\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u0442\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0435\u043c\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442. <\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u0437\u0430 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e \u0410 \u0432 \u0434\u0435\u0440\u0435\u0432\u043e \u0411. <\/p>\n<p>  <\/p>\n<p>\u0412 \u043e\u0431\u0449\u0435\u043c, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c UI \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0442\u043e \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0443 \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438. \u041d\u043e \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043d\u0430\u043c \u0432\u0441\u0451 \u0435\u0449\u0451 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0438 \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e, \u0438\u043d\u0430\u0447\u0435 \u044d\u0442\u043e\u0442 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u041a\u0430\u043a \u043c\u044b \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u0438, \u044d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Reconciliation. <\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043c\u044b \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 Jetpack Compose.<\/p>\n<p>  <\/p>\n<h2 id=\"jetpack-compose-vnutri\">Jetpack Compose \u0432\u043d\u0443\u0442\u0440\u0438<\/h2>\n<p>  <\/p>\n<p>\u0412\u0430\u0436\u043d\u0430\u044f \u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430: \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0430 \u043e\u043d\u0438 \u0438\u043c\u0435\u044e\u0442 \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u044e \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u0435\u0441\u044c \u0441 \u044d\u0442\u0438\u043c \u0434\u043e\u043a\u043b\u0430\u0434\u043e\u043c \u0432 \u0437\u0430\u043f\u0438\u0441\u0438, \u0447\u0442\u043e-\u0442\u043e \u0443\u0436\u0435 \u043c\u043e\u0433\u043b\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f. \u041d\u043e \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u044b\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 core-\u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b (\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c, \u0438\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0451).<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u043c \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u0440\u0435\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043a\u0430\u043a \u0434\u0435\u0440\u0435\u0432\u043e, \u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Gap buffer. \u042d\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f, \u043d\u043e \u043c\u0430\u043b\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u0445 \u0432\u0440\u043e\u0434\u0435 vim \u0438 Emacs. \u0423 \u043d\u0435\u0451 \u0435\u0441\u0442\u044c, \u0433\u0440\u0443\u0431\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u0441\u043f\u0438\u0441\u043e\u043a, \u0438 \u0432 \u044d\u0442\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u0435\u0441\u0442\u044c gap. Gap \u043e\u0434\u0438\u043d, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043b\u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c. \u0418 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0432 \u044d\u0442\u043e\u043c Gap buffer. \u041f\u0435\u0440\u0432\u0430\u044f \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u2014 insert. \u042d\u0442\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u0438 \u043e\u043d\u0430 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043d\u0430\u044f. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/t3\/os\/4d\/t3os4d6wh76wk-ro4iiacrc_3tk.png\"><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c Gap buffer: \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c Gap \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043f\u0443\u0441\u0442\u0438\u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 Gap:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/eg\/ei\/yt\/egeiytdj-ccnj_ysonjplaq4zkg.jpeg\"><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0443 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0440\u0435\u043c\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043d\u043e\u0435. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c Gap buffer \u0438 \u0443\u0431\u0440\u0430\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0431\u044b\u043b\u043e \u0437\u0430 \u043d\u0438\u043c. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/bt\/yq\/kf\/btyqkfnb3t-i_jxcra3wvjizc2a.png\"><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0432\u043a\u043b\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0443 \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u0443\u0434\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u042d\u0442\u043e tradeoff, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0432 Compose \u0441 \u0440\u0430\u0441\u0447\u0435\u0442\u043e\u043c \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043d\u0430\u0448\u0435\u0433\u043e UI \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u0430\u043a \u0447\u0430\u0441\u0442\u043e, \u0440\u0435\u0436\u0435, \u0447\u0435\u043c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0430\u043f\u0434\u0435\u0439\u0442\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 View, \u0438 \u0432 \u043d\u0435\u043c \u0447\u0430\u0449\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u0447\u043a\u0430 \u0442\u0435\u043a\u0441\u0442\u0430, \u0447\u0435\u043c \u043e\u043d \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u043a\u043e\u043d\u043a\u0443. <\/p>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0447\u0442\u043e \u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 Gap buffer. \u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0435: \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Mobius, \u043c\u044b \u043a\u043b\u0438\u043a\u0430\u0435\u043c \u2014 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0447\u0451\u0442\u0447\u0438\u043a. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kl\/yz\/ej\/klyzejfud14qdfmhu44s6gyjqna.gif\" width=\"300\">  <\/p>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e Jetpack Compose? \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044e:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable  fun Counter(title: String) {      var count by state { 0f }      Button(         text = &quot;$title: $count&quot; ,         onClick = { count++ }         )  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c state (\u043f\u043e\u0437\u0436\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2014 \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u043e\u0431\u0451\u0440\u0442\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u043c\u043e\u0433\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043f\u043e \u043a\u043b\u0438\u043a\u0443). \u0418 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Button, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c $title (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Mobius) \u0438 count (\u0441\u043d\u0430\u0447\u0430\u043b\u0430 0, \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435).<\/p>\n<p>  <\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0431\u0443\u043c-\u043c\u043e\u043c\u0435\u043d\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0436\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044f @Composable. \u041e\u043d\u0430 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 \u0442\u0430\u043a\u043e\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">fun Counter($composer:Composer,$key: Int,title: String) {      $composer.start($key)      var count by state($composer,key=123) { 0f }      Button($composer, key=456          text = &quot;$title: $count&quot; ,          onClick = { count++ }       )       $composer.end  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442? \u0423 \u043d\u0430\u0441 \u0437\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c composer, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430 \u043d\u0435\u0433\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u0434\u043e\u0441\u0442\u0443\u043f \u043a Gap buffer. \u0418 \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438: \u0438\u043c \u0432\u0441\u0435\u043c \u043d\u0443\u0436\u0435\u043d Gap buffer, \u0438\u043c \u043d\u0443\u0436\u0435\u043d scope, \u0433\u0434\u0435 \u043e\u043d\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f, \u043d\u0443\u0436\u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0430\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u044f Gap buffer.<\/p>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u043c\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043b\u044e\u0447\u0438. \u042d\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447, \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0440\u0430\u0437\u043d\u044b\u0435, \u0438 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 button \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0438.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 composer.start \u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 composer.end.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0451\u0442, \u0435\u0441\u043b\u0438 \u0432\u043e\u0437\u044c\u043c\u0443 \u044d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044e \u043a UI.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/u5\/gg\/oq\/u5ggoqgtrh9uteeab15s_gh2fbw.png\"><\/p>\n<p>  <\/p>\n<p>Gap buffer \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435, \u0430 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u0440\u0435\u0437\u043e\u043a, \u0433\u0434\u0435 \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0430\u0445\u043e\u0434\u0438\u043c\u0441\u044f. \u041c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e Counter \u0438 \u0438\u0434\u0451\u043c \u043f\u043e \u043d\u0435\u0439:<br \/>  \u2014 \u041c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c: \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c start, \u043a\u043b\u0430\u0434\u0451\u043c \u0442\u0443\u0434\u0430 \u0442\u0430\u043a\u0443\u044e \u0448\u0442\u0443\u043a\u0443, \u043a\u0430\u043a Group($key).<br \/>  \u2014 \u041f\u043e\u0442\u043e\u043c \u0438\u0434\u0451\u043c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u043e\u0447\u043a\u0443, \u0438 \u0442\u0430\u043c \u0435\u0441\u0442\u044c key = 123, \u044d\u0442\u043e \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 Group(123).<br \/>  \u2014 \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, state \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u0451\u0440\u0442\u043a\u0443 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c state \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c 0.<br \/>  \u2014 \u041f\u043e\u0442\u043e\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Button, \u0433\u0434\u0435 \u0435\u0441\u0442\u044c key = 456, \u043a\u043b\u0430\u0434\u0435\u043c \u0442\u0443\u0434\u0430 Group = 456.<br \/>  \u2014 \u0423 Button \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043c\u044b \u043a\u043b\u0430\u0434\u0451\u043c \u0438\u0445 \u0432 slot table.<br \/>  \u2014 \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0443 Button \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u044d\u0442\u043e \u0436\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0412\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0442 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0438 \u043a\u043b\u0438\u043a\u0438. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sl\/oq\/jk\/sloqjkguqi1a-ycsoicxcp1y-qa.png\"><\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0430\u0448 Gap buffer, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u044d\u0442\u043e\u0442 Counter. \u0418 \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044f \u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0442\u043e \u0434\u0430\u0436\u0435 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0435 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u044d\u0442\u043e \u0434\u0435\u0440\u0435\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443 \u043d\u0430\u0441 \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f UI. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Counter \u2014 \u044d\u0442\u043e \u0432\u0441\u044f \u0448\u0442\u0443\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043b\u0438, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c State \u0438 \u043e\u0441\u0442\u0430\u0442\u043e\u043a \u2014 Button. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/jc\/8c\/92\/jc8c92jdrs-76h50kocgunac120.png\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u043f\u043b\u0430\u043d\u0435 \u043c\u044b \u0441\u0442\u0440\u043e\u0438\u043c call stack-\u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435. \u041f\u0440\u0438\u0447\u0451\u043c \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044f \u0435\u0451 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438 \u0443\u0445\u043e\u0434\u044f \u0432\u043d\u0443\u0442\u0440\u044c, \u0442\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u043e depth first traversal-\u0438\u0442\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443. <\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 UI, \u0443 \u043d\u0430\u0441 \u0431\u044b\u0432\u0430\u044e\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0438 \u0432 \u044d\u0442\u043e\u043c Counter \u00abMobius\u00bb \u043d\u0430 \u00abMatvei\u00bb \u0438\u043b\u0438 \u043d\u0430 \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0451. \u041d\u043e\u0432\u044b\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a title \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 \u043d\u043e\u0432\u044b\u0439 Counter \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e. \u041c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e title \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 Group(key), \u0438\u0434\u0435\u043c \u0442\u0443\u0434\u0430. \u0421\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e key=123 \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0441\u044f, \u0437\u043d\u0430\u0447\u0438\u0442, state \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0441\u044f, \u0442\u043e \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u0432\u0435\u0440\u0445 \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 state, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0443 \u043d\u0430\u0441 \u0434\u043e \u044d\u0442\u043e\u0433\u043e. key=456 \u0442\u043e\u0436\u0435 \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0441\u044f, \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 text \u2014 \u043e\u043d \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0441\u044f. \u041b\u044f\u043c\u0431\u0434\u0430 \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0443 \u043c\u0435\u043d\u044f text, \u0430 \u043e\u043d \u0438\u0434\u0435\u0442 \u043f\u043e\u0441\u043b\u0435 \u043a\u043b\u044e\u0447\u0430 button, \u0442\u043e \u0435\u0441\u0442\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c Button, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0439\u0442\u0438 \u0432\u043d\u0443\u0442\u0440\u044c Button \u0438 \u0442\u043e\u0436\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0435\u0433\u043e.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vq\/-u\/nh\/vq-unhztoit4ycnm2lvog7s7qbo.png\"><\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0451 \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c. \u041a\u043b\u044e\u0447\u0438 \u0434\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0442\u0430 \u0436\u0435 \u0441\u0430\u043c\u0430\u044f \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u0438\u043b\u0438 \u043d\u0435\u0442. \u0415\u0441\u043b\u0438 \u043e\u043d\u0430 \u0442\u0430 \u0436\u0435 \u0441\u0430\u043c\u0430\u044f, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u0432\u043d\u0443\u0442\u0440\u044c \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0451. \u0418 \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043c\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 flush, \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044f \u043d\u0443\u0436\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 UI, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0447\u0442\u043e-\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u041a\u0430\u043a \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0441 Compose \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c if else, for \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u0432\u0435\u0449\u0438. \u041c\u044b \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b, \u043a\u043e\u0433\u0434\u0430 \u044f \u043a\u0443\u0434\u0430-\u0442\u043e \u0434\u0432\u0438\u0433\u0430\u044e Gap buffer. <\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable  fun Feeds(items: List&lt;FeedItem&gt;) {     if (items.isEmpty) {           Text(&quot;No feeds&quot;)       } else {          FeedList(items)      }  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Feeds \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0432\u0435\u0449\u0435\u0439, \u0447\u0430\u0442\u043e\u0432 \u0438 \u0447\u0435\u0433\u043e \u0443\u0433\u043e\u0434\u043d\u043e. \u042d\u0442\u0430 Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 <code>List&lt;FeedItem&gt;<\/code>, \u0438 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439. \u041d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e: no feeds, \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0447\u0430\u0442, \u043a\u0430\u043a\u043e\u0439-\u0442\u043e UI.<\/p>\n<p>  <\/p>\n<p>Compose \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u043c \u043a\u043b\u044e\u0447\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Composable-\u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0432 buffer. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/-h\/km\/_j\/-hkm_jo7qj6svlxs_rkqv3nsqa4.png\"><\/p>\n<p>  <\/p>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435\u0442, \u0438\u0434\u0435\u043c \u0432 if (isEmpty == true) \u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u043c \u0432 123, \u0441\u0442\u0430\u0432\u0438\u043c Group(123) \u0438 \u0442\u0435\u043a\u0441\u0442. \u0414\u0430\u043b\u044c\u0448\u0435 \u043d\u0435 \u0438\u0434\u0435\u043c. \u041f\u043e\u0442\u043e\u043c \u0438\u0434\u0435\u043c \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442, \u0438 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f Item: \u043d\u043e\u0432\u044b\u0439 \u0447\u0430\u0442 \u0438\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0435. \u0421\u043d\u043e\u0432\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e Feeds \u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u043c \u0432 else statement, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0447\u0430\u0442. \u0418 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e 456 \u043d\u0435 \u0440\u0430\u0432\u043d\u043e 123. <\/p>\n<p>  <\/p>\n<p>\u0414\u0432\u0438\u0433\u0430\u0435\u043c Gap \u0437\u0430 \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f: \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0434\u043b\u0438\u043d\u043d\u0430\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f, \u043d\u043e \u043c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e UI \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0441\u044f, \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u043e. \u0421\u0442\u0430\u0440\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043d\u0430\u043c \u0443\u0436\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u043c\u043e\u0436\u0435\u043c \u0435\u0433\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c. \u0411\u0435\u0440\u0435\u043c Group(456) \u0438 \u0441\u0442\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u044b\u0435 Feeds. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c conditional-\u043b\u043e\u0433\u0438\u043a\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c UI. \u041f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0434 \u0434\u0435\u0440\u0435\u0432\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e if \u0441\u0442\u0430\u043b else, \u0432\u0441\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/pj\/mn\/tv\/pjmntvmguor-fmndnvweqwd9hlc.png\"><\/p>\n<p>  <\/p>\n<p>\u041a\u043b\u044e\u0447\u0438 \u2014 \u044d\u0442\u043e \u043d\u0435 123 \u0438 456, \u043c\u044b \u043d\u0435 \u0431\u0435\u0440\u0451\u043c \u0438\u0445 \u0441 \u043d\u0435\u0431\u0430. \u041e\u043d\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 \u0432\u0430\u0448\u0435\u0433\u043e Composable. \u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d text, \u0442\u043e \u0443 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 key \u0432\u043d\u0443\u0442\u0440\u0438 if, \u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0446\u0438\u0444\u0440\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0439 \u0432\u0441\u0442\u0440\u0435\u0447\u0438 \u0432 \u043a\u043e\u0434\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f positional memoization. \u042d\u0442\u043e core-\u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0432 Jetpack Compose, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0447\u0442\u043e, \u043a\u0430\u043a \u0438 \u043a\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u0437\u0432\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u0412 positional memoization \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f remember. \u042d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable  fun FilterList(items: List, query: String) {    val filteredItems = remember(items, query) {     items.filter(it.name.contains(query))    }    FeedList(items)  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 items \u0438 query \u0438 \u043b\u044f\u043c\u0431\u0434\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c. \u041c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044e \u0441\u043f\u0438\u0441\u043a\u0430, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c items [\u201cA\u201d, \u201cAB\u201d, \u201cBC\u201d], \u0435\u0441\u0442\u044c query, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0432\u0432\u043e\u0434\u0438\u043c \u0432 \u043f\u043e\u0438\u0441\u043a\u0435, \u201cA\u201d. \u041c\u044b \u0431\u0435\u0440\u0435\u043c \u0438 \u043a\u043b\u0430\u0434\u0435\u043c \u0438\u0445 \u0432 slot table. \u041e\u043d\u0430 \u0437\u0435\u043b\u0435\u043d\u0430\u044f, \u0437\u043d\u0430\u0447\u0438\u0442, \u044d\u0442\u043e \u0442\u043e\u0436\u0435 Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u0418 \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0432 items \u0443 \u043d\u0430\u0441 \u043b\u0435\u0436\u0430\u0442 [\u201cA\u201d, \u201cAB\u201d]. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yr\/qo\/u6\/yrqou6h7moknroariqmqtk8efek.png\"><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u0438\u0437\u043e\u0432\u0435\u043c \u044d\u0442\u043e\u0442 FilterList, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u0442\u043e \u0435\u0441\u043b\u0438 items, query \u0442\u0435 \u0436\u0435 \u0441\u0430\u043c\u044b\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u0438 \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0441\u0440\u0430\u0437\u0443 [\u201cA\u201d, \u201cAB\u201d].<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 FilterList \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 items, \u0443 \u043d\u0438\u0445 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u043e\u0439 remember, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u044b \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u0432 \u043a\u043e\u0434\u0435, \u0443 \u043d\u0438\u0445 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043b\u044e\u0447\u0438 \u0438 \u0440\u0430\u0437\u043d\u044b\u0435 remember.<\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0447\u0442\u043e \u0443 remember \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0431\u044b\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432. \u0418 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0448\u0442\u0443\u043a\u0443:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable  fun Item(name: String) {       val result = remember {       calculation()       }       Text(\u201c$name: $result\u201d)  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c calculation() \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f math.random(). \u0415\u0441\u043b\u0438 \u044f \u0441\u0434\u0435\u043b\u0430\u044e \u0441\u043f\u0438\u0441\u043e\u043a \u044d\u0442\u0438\u0445 item, \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e item \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u043e\u0439 calculation, \u0441\u0432\u043e\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0438 \u043e\u043d \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043d\u0430 \u0432\u0435\u0441\u044c \u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b \u044d\u0442\u043e\u0433\u043e item, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u0443 \u043d\u0435\u0433\u043e \u0438\u043c\u044f. \u041c\u044b \u0431\u0435\u0440\u0451\u043c remember, \u0443 \u043d\u0435\u0433\u043e \u043d\u0435\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 calculation. \u041d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0435\u0433\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0435\u0440\u0432\u044b\u0439 \u0440\u0430\u0437, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u043e\u0433\u0434\u0430 \u0435\u0433\u043e \u043d\u0435 \u0431\u044b\u043b\u043e \u0432 Gap buffer, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u043d \u0435\u0441\u0442\u044c, \u0438 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0435\u0433\u043e. <\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u044d\u0442\u0438 Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u2014 \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435. \u0422\u043e \u0435\u0441\u0442\u044c \u043c\u044b \u0431\u0435\u0440\u0451\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u041f\u043e\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u2014 \u0438\u0434\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438;<\/li>\n<li>\u041d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u2014 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"steyt\">\u0421\u0442\u0435\u0439\u0442<\/h3>\n<p>  <\/p>\n<p>\u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b \u0432\u0430\u043c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Counter, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0442\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c state? <\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable  fun Counter(title: String) {      var count by state { 0f }      Button(          text = &quot;$title: $count&quot; ,          onClick = { count++ }      )  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423 state \u0442\u043e\u0433\u0434\u0430 \u0431\u044b\u043b \u043a\u043b\u044e\u0447 123, \u0438 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u043b\u0438, \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 state \u043f\u0440\u0438 \u0430\u043f\u0434\u0435\u0439\u0442\u0435 counter. \u0412\u0441\u0435 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e state \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e remember. \u042d\u0442\u043e remember \u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 MutableState. \u0418 \u0444\u0443\u043d\u043a\u0446\u0438\u044f mutableStateOf \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043a\u0430\u043a MutableListOf \u0432 Kotlin. <\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable  inline fun state(init: () -&gt; T): MutableState =       remember { mutableStateOf(init()) }  fun mutableStateOf(value: T): MutableState { \u2026 }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 state \u043c\u044b \u0440\u0435\u043c\u0435\u043c\u0431\u0435\u0440\u0438\u043c MutableStateOf, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043e\u043d \u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439. \u0418 \u0435\u0441\u043b\u0438 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c title \u0443 \u043a\u043d\u043e\u043f\u043a\u0438, state \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0442\u0435\u043c \u0436\u0435 \u0441\u0430\u043c\u044b\u043c. \u0422\u043e \u0435\u0441\u0442\u044c \u044f \u043c\u043e\u0433\u0443 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c title \u0441 Mobius \u043d\u0430 Matvei \u0441 counter = 14: title \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0430 counter \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f 14. <\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 MutableState \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 state. <\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">interface MutableState&lt;T&gt; : State&lt;T&gt; {       override var value: T  }  interface State&lt;T&gt; {      val value: T  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0441\u0435, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 MutableStateOf, \u2014 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 MutableState. \u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 Initial, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0433\u043e. \u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u043b\u0430\u0441\u0441 \u0441 <code>&lt;T&gt;<\/code>, \u0445\u043e\u0442\u044f \u0434\u043b\u044f \u043d\u0430\u0441 \u043e\u043d \u0442\u0430\u043a \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442. <\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 MutableState, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0430\u0448\u0435 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435 \u0438 \u043f\u043e\u0442\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0432\u0448\u0438\u0445. \u042d\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0438\u0440\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 Compose \u043c\u044b \u0443\u043c\u0435\u0435\u043c \u0441\u0430\u043c\u0438 \u043f\u0440\u043e\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e Gap buffer \u0438 \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u041d\u043e \u0434\u043b\u044f \u0432\u0430\u0436\u043d\u044b\u0445, \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043a\u0435\u0439\u0441\u043e\u0432 \u044d\u0442\u0430 \u0432\u0435\u0449\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0432\u0448\u0438\u0445 \u0438\u043b\u0438, \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0433\u043e\u0432\u043e\u0440\u044f, \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0442\u044c scoped observations, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0438 \u0432 \u043a\u0430\u043a\u043e\u043c scope \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vb\/uo\/v8\/vbuov8-nfyrjycyhkpiyoq409ma.png\"><\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u043d\u0430\u0448 Counter \u0441 \u043d\u0430\u0448\u0438\u043c \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c slot table. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c \u044d\u0442\u043e\u0442 state \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 state, \u0430 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0435\u0433\u043e \u0432 \u043b\u0438\u0441\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432. Gap buffer \u043f\u043e\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k8\/h5\/gf\/k8h5gf1_kf3iyevv2lqvgapsc98.png\"><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u0442\u043e\u043c, \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438\u043b\u0438 \u043f\u043b\u043e\u0445\u043e\u0439. \u041f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 Counter, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0435\u0433\u043e \u043c\u0435\u043d\u044f\u0442\u044c. \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 MutableState, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0433\u0434\u0435-\u0442\u043e \u0432 text \u0435\u0441\u0442\u044c state.value, \u043c\u044b \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438 value \u0438\u0437 MutableState. \u041c\u044b \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u044d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 scope Counter. \u0417\u0430\u043f\u043e\u043c\u043d\u0438\u043c \u044d\u0442\u043e, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e Counter \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043a\u0440\u043e\u043c\u0435. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/s-\/-n\/4d\/s--n4dsk_0ygychdsistocgx2jw.png\"><\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0437\u0434\u043e\u0440\u043e\u0432\u043e. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ut\/ai\/um\/utaiumi6abdim6rty3wd-9ral7i.gif\" width=\"300\">  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u043a\u043d\u043e\u043f\u043a\u0438, \u0443 \u043d\u0438\u0445 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 counter \u0438 \u043a\u043d\u043e\u043f\u043a\u0430 Increase all, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u043a\u0440\u0438\u0437\u0438\u0442\u044c \u0432\u0441\u0435 counter. \u041e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c MutableState \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c counter, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c App:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">fun App(counterData: Map&lt;String, MutableState&lt;Int&gt;&gt;) {    Column {        counterData.forEach { (title, counterState) -&gt;        Counter(title, counterState)        }        Button(         text = &quot;Increase All!&quot;,         onClick = {         counterData.forEach{ (_, countState) -&gt;              countState.value++          }         }        )      }  } <\/code><\/pre>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u044f \u0433\u043e\u0432\u043e\u0440\u044e, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Column \u0432 Compose, \u0438 \u0437\u0430\u0432\u043e\u0436\u0443 \u0442\u0430\u043c counterData.forEach. \u0418 \u043e\u0442\u0434\u0430\u044e \u0435\u043c\u0443 title (Mobius, Matvei \u0438\u043b\u0438 Memoization) \u0438 counterState \u043d\u0430\u0448\u0435\u043c\u0443 counter. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 Button, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0435 counters, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c. \u0418 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c counters, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0438 Increase all, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0435. <\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 MutableState, \u0438 \u043c\u044b \u0443\u043c\u0435\u0435\u043c \u044d\u0442\u043e \u0432\u0441\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441\u043a\u043e\u0443\u043f\u0430\u043c\u0438. \u041c\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/l-\/u1\/nx\/l-u1nxxfhx4px7uwc71kayyf5r4.png\"><\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u0435, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439, \u0438 \u043f\u043e\u043c\u0438\u043c\u043e counter \u0432\u043d\u0438\u0437\u0443, \u0443 \u043d\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0445 \u043c\u043d\u043e\u0433\u043e UI \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435. Increase all \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u0430\u043b\u0435\u043a\u043e \u0432 \u0448\u0442\u0443\u043a\u0435, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a MutableState.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u0438\u0445 counters \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c count.value, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0432 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u0441\u043a\u043e\u0443\u043f\u0435 \u044d\u0442\u043e\u0433\u043e counter. \u0410 button \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 Increase all forEach \u043f\u043e it.value. \u0417\u0430\u043f\u0438\u0441\u044c \u0432 MutableState \u043d\u0438 \u043d\u0430 \u0447\u0442\u043e \u043d\u0435 \u043e\u0431\u0440\u0435\u043a\u0430\u0435\u0442 \u0442\u0435\u0431\u044f, \u0442\u0435\u0431\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435, \u0435\u0441\u043b\u0438 \u0442\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0448\u044c. <\/p>\n<p>  <\/p>\n<p>\u041a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 Increase all. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c, \u0447\u0442\u043e value \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c, \u043c\u044b \u043d\u0435 \u0431\u0435\u0436\u0438\u043c \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u0434\u0435\u0440\u0435\u0432\u0443, \u043e\u0442 parent, \u043e\u0442 \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0435\u0432 \u044d\u0442\u0438\u0445 MutableState. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0431\u044b\u043b\u043e \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u043a\u043e\u0443\u043f\u043e\u0432 counter, \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0445. \u0415\u0441\u043b\u0438 \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d counter, \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d. \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u0442\u0440\u0438, \u0442\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0442\u0440\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e forEach. \u041c\u044b \u0438\u0437\u0431\u0430\u0432\u0438\u043c\u0441\u044f \u043e\u0442 \u0432\u0441\u0435\u0445 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0439 \u043f\u043e \u0432\u0441\u0435\u043c \u0434\u0435\u0440\u0435\u0432\u044c\u044f\u043c \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u044d\u0442\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0435\u0432\u044c\u044f, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u0431\u043b\u0438\u0437\u043a\u043e\u0433\u043e, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ww\/1-\/ie\/ww1-ie4sxev_rvm-t8tumnnu2sg.png\"><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c compiler-\u043f\u043b\u0430\u0433\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u044d\u0442\u0438 \u043a\u0440\u0443\u0442\u044b\u0435 \u0448\u0442\u0443\u043a\u0438. <\/p>\n<p>  <\/p>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c; \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0443\u043f\u0435\u0440\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434.<\/p>\n<p>  <\/p>\n<p><code>State&lt;T&gt; &amp;MutableState&lt;T&gt;<\/code> \u0432\u0441\u0435 \u043e\u0442 \u043d\u0430\u0441 \u043f\u0440\u044f\u0447\u0443\u0442, \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c state.value \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041d\u0430\u0448\u0430 Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u0430\u043c\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430, \u043d\u0430\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u043e\u0439, \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c composition-bound state \u0432\u043d\u0443\u0442\u0440\u0438 Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438. <\/p>\n<p>  <\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0447\u0442\u043e \u0432 Compose \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0443\u0445\u043e\u0434\u044f\u0442 \u0441\u0442\u0430\u0434\u0438\u0438 layout, redraw, \u043e\u043d\u0438 \u0441\u043f\u0440\u044f\u0442\u0430\u043d\u044b \u0434\u043b\u044f \u043d\u0430\u0441, \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f. \u041d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u044c, \u0433\u0434\u0435 \u0432\u044b \u044d\u0442\u043e \u0447\u0438\u0442\u0430\u0435\u0442\u0435. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u044d\u0442\u043e \u0432 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u043a\u0430\u043a \u043c\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0432 counter, \u0442\u043e \u043c\u044b \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0440\u0443\u0435\u043c \u0432\u0430\u0441, \u043f\u0435\u0440\u0435\u0437\u043e\u0432\u0435\u043c \u0432\u0441\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e. \u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0435\u0442\u0435 value \u0442\u043e\u043b\u044c\u043a\u043e \u0432 layout, \u043a\u0430\u043a \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u043a\u0440\u043e\u043b\u043b\u0435\u0440, \u0442\u043e \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043c \u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e. <\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0438\u0441\u0443\u0435\u0442\u0435 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u0447\u0435\u043a\u0431\u043e\u043a\u0441, \u0438 \u0447\u0438\u0442\u0430\u0435\u0442\u0435 value \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u0442\u0430\u0434\u0438\u0438 \u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u043c\u044b \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u0443\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0448 canvas. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0443\u043f\u0435\u0440\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u044b.<\/p>\n<p>  <\/p>\n<p>\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e Shared MutableState&lt;&gt;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438, \u043d\u0435 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0435 MutableState \u043a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043c\u043e\u0436\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c state \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u0421\u0442\u0430\u043d\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043e\u0431\u0449\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0438 \u043c\u044b \u0440\u0438\u0441\u043a\u0443\u0435\u043c \u043d\u0430\u043f\u043e\u0440\u043e\u0442\u044c\u0441\u044f \u043d\u0430 \u0442\u043e, \u0437\u0430 \u0447\u0442\u043e \u0431\u043e\u0440\u043e\u043b\u0438\u0441\u044c. \u041c\u044b \u0445\u043e\u0442\u0435\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0441\u0442\u0430\u043b\u043e \u043f\u0440\u043e\u0449\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u043d\u043e \u043d\u0430\u0441 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u0442\u044b \u043e\u0442\u0434\u0430\u043b \u0441\u0432\u043e\u0439 state.<\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable fun Counter(     countState: MutableState&lt;Int&gt; ) {     Button(       text = &quot;count: ${countState.value}&quot;,       onClick = { countState.value += 1 }       )  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043c\u044b \u0435\u0433\u043e \u0432\u043e\u0442 \u0442\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable  fun App() {      val counterState: MutableState = state { 0f }      Counter(counterState)  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418 \u043a\u043e\u0433\u0434\u0430 \u044f \u043e\u0442\u0434\u0430\u044e \u044d\u0442\u043e\u0442 state \u0432 Counter, \u044f \u043f\u0440\u043e\u0449\u0430\u044e\u0441\u044c \u0441 \u044d\u0442\u0438\u043c state \u0438 \u043d\u0435 \u0437\u043d\u0430\u044e, \u0447\u0442\u043e \u0441 \u043d\u0438\u043c \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442. \u042f \u043d\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u044e, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 Counter. \u0415\u0433\u043e \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u043a\u0443\u0434\u0430-\u0442\u043e, \u043a\u043e\u043c\u0443-\u0442\u043e \u043e\u0442\u0434\u0430\u0442\u044c. \u042d\u0442\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043d\u043e \u0434\u0430\u0435\u0442 \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0435 \u0448\u0442\u0443\u043a\u0438. <\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c state hosting, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u043c state \u0432\u044b\u0448\u0435, \u0430 \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0435\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043a\u0430\u043a\u043e\u0439-\u0442\u043e parent, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, App. Button \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c <code>State<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435 MutableState, \u043a\u0430\u043a \u0440\u0430\u043d\u044c\u0448\u0435.<\/p>\n<p>  <\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 Controlled components \u2014 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442 state, \u043d\u043e \u0435\u0441\u0442\u044c snapshot \u044d\u0442\u043e\u0433\u043e state. <\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable  fun Counter(      currentCount: Int,      onCountChange: (Int) -&gt; Unit  ) {      Button(         text = &quot;count: $currentCount&quot;,         onClick = { onCountChange(currentCount + 1) }         )  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u0442\u044c \u043d\u0430\u0448 Counter \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u043b currentCount \u0438 \u043b\u044f\u043c\u0431\u0434\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u043d \u0437\u0432\u0430\u043b \u0431\u044b \u043d\u0430 onCountChange. \u0415\u0441\u043b\u0438 \u043c\u043e\u0439 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 Count = 7, \u0442\u043e \u044f \u043f\u043e\u043f\u0440\u043e\u0441\u0438\u043b \u0431\u044b \u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 8. \u042d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0432 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430\u0445, \u0442\u0435\u043a\u0441\u0442\u0444\u0438\u043b\u0434\u0430\u0445 \u0438 \u043f\u0440\u043e\u0447\u0435\u043c. \u042d\u0442\u043e \u0442\u043e, \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0430\u043d\u0434\u0440\u043e\u0438\u0434\u0435, \u043a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c edit text, \u0438 \u043d\u0430\u043c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e MutableState \u0432\u0435\u0437\u0434\u0435 \u0448\u0430\u0440\u0438\u0442\u0441\u044f. \u0422\u0443\u0442 \u0436\u0435 counter \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e snapshot \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043a\u043e\u043c\u0443-\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable  fun App() {    val counterState: MutableState = state { 0f }    Counter(        currentCount = counterState.value,        onCountChange = { counterState.value += 1 }       )  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0423 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c MutableState, \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0432 App: \u0432\u043e\u0442 \u0442\u0435\u0431\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. App \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 state \u0438 \u043d\u0438\u043a\u043e\u043c\u0443 \u043d\u0435 \u043e\u0442\u0434\u0430\u0435\u0442 \u0435\u0433\u043e. \u041f\u043e \u0432\u0437\u0433\u043b\u044f\u0434\u0443 \u043d\u0430 App \u0441\u0440\u0430\u0437\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. \u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c val counterState \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0435\u043b\u0435\u0433\u0430\u0442\u043e\u0432 \u0432 var. \u0418 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u0432\u0430\u0441 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a MutableState. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u0430 \u043e\u0431\u0435\u0440\u0442\u043a\u0430, \u0442\u043e \u044d\u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043b\u0443\u0447\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c state. <\/p>\n<p>  <\/p>\n<pre><code class=\"kotlin\">@Composable  fun App() {     var counterStateValue: Int by state { 0f }     Counter(         currentCount = counterStateValue,         onCountChange = { counterStateValue += 1 }         )  }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0442\u0435\u0440\u044f\u0435\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043b\u0435\u0439\u0430\u0443\u0442\u0438\u0442\u044c, \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e scope. \u041d\u043e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c = \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>  <\/p>\n<p><code>MutableState&lt;T&gt;<\/code> \u2014 \u044d\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0435\u0433\u043e \u0432 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 API, \u043e\u043d\u043e \u0432\u0435\u0434\u0435\u0442 \u043a \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044e \u0432\u043b\u0430\u0434\u0435\u043d\u0438\u044f state. \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u2014 \u044d\u0442\u043e controlled components. <\/p>\n<p>  <\/p>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u2014 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c <code>State&lt;T&gt;<\/code> \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f. \u0422\u043e \u0435\u0441\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u0448 Counter \u043e\u0447\u0435\u043d\u044c \u0443\u043c\u043d\u043e \u0441\u043a\u043e\u0443\u043f\u043e\u043c \u043f\u043e\u0433\u043b\u043e\u0449\u0430\u043b <code>MutableState&lt;T&gt;<\/code>, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u044d\u0442\u043e\u0442 <code>State&lt;T&gt;<\/code> \u0438 \u0447\u0438\u0442\u0430\u0442\u044c \u0435\u0433\u043e \u0442\u0430\u043c, \u0433\u0434\u0435 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e. \u0412\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a \u0436\u0435, \u043c\u044b \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0440\u0443\u0435\u043c, \u043f\u0435\u0440\u0435\u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043c, \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u0443\u0435\u043c. \u041f\u0440\u043e\u0441\u0442\u043e <code>State&lt;T&gt;<\/code> \u043d\u0435 \u0434\u0430\u0435\u0442 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u043e \u0442\u0443\u0434\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0442\u0430\u043c val.<\/p>\n<p>  <\/p>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a \u0438 \u0432\u0441\u0435 \u0442\u0430\u043a\u0436\u0435 \u0447\u0435\u0440\u0435\u0437 control input \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043b\u044f\u043c\u0431\u0434\u0443 onCounterChange, \u0447\u0442\u043e\u0431\u044b \u0434\u0440\u0443\u0433\u0438\u0435 \u043b\u044e\u0434\u0438 \u043c\u043e\u0433\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u043e\u0442 <code>State&lt;T&gt;<\/code>. <\/p>\n<p>  <\/p>\n<p>\u0414\u0440\u0443\u0433\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u2014 \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u0441 \u043d\u0438\u043c\u0438 \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0435\u0442. \u0418 \u0432\u043e\u043e\u0431\u0449\u0435 MutableState \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u043a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u0432\u0430\u0448\u0438 Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0438. <\/p>\n<p>  <\/p>\n<h2 id=\"vmesto-vyvodov\">\u0412\u043c\u0435\u0441\u0442\u043e \u0432\u044b\u0432\u043e\u0434\u043e\u0432<\/h2>\n<p>  <\/p>\n<p>\u0414\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 UI-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u0443\u044e\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f UI, \u0434\u0430\u044e\u0442 \u043d\u0430\u043c UI \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442 \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u0432\u044b\u0432\u043e\u0434\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u044e\u0431\u043e\u0439 \u0442\u0430\u043a\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a: React, Jetpack Compose \u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435. <\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0432\u0430\u0436\u043d\u044b\u043c\u0438 \u0432\u0435\u0449\u0430\u043c\u0438: \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438, \u043d\u043e\u0432\u043e\u0439 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u043d\u043e\u0432\u044b\u043c\u0438 \u0444\u0438\u0447\u0430\u043c\u0438 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438\u043b\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041d\u043e \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0442\u0440\u0435\u0439\u0434-\u043e\u0444\u0444\u044b, \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0432\u0435\u0449\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. <\/p>\n<p>  <\/p>\n<h2 id=\"ssylki\">\u0421\u0441\u044b\u043b\u043a\u0438<\/h2>\n<p>  <\/p>\n<p><a href=\"https:\/\/developer.android.com\/jetpack\/compose\">\u0413\u043b\u0430\u0432\u043d\u0430\u044f<\/a><br \/>  <a href=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-basics#0\">\u0422\u0443\u0442\u043e\u0440\u0438\u0430\u043b<\/a><br \/>  <a href=\"https:\/\/issuetracker.google.com\/issues\/new?component=612128\">\u0411\u0430\u0433\u0442\u0440\u0435\u043a\u0435\u0440<\/a><br \/>  <a href=\"http:\/\/slack.kotlinlang.org\/\">Kotlin slack, #compose channel<\/a><\/p>\n<p>  <\/p>\n<blockquote><p>\u0415\u0441\u043b\u0438 \u0434\u043e\u043a\u043b\u0430\u0434 \u041c\u0430\u0442\u0432\u0435\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0438 \u043d\u0430 \u043d\u043e\u0432\u043e\u043c <strong><a href=\"https:\/\/mobius-piter.ru\/?utm_source=habr&amp;utm_medium=549008\">Mobius<\/a><\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0439\u0434\u0451\u0442 13-16 \u0430\u043f\u0440\u0435\u043b\u044f. <\/p>\n<p>  \u0422\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0438 <a href=\"https:\/\/mobius-piter.ru\/2021\/spb\/talks\/2xc1ghz3mflzjnl1rykk9z\/?utm_source=habr&amp;utm_medium=549008\">\u0434\u043e\u043a\u043b\u0430\u0434<\/a> \u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Compose for Desktop, \u0438 \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0434\u043b\u044f Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432: \u043f\u0440\u043e Gradle, \u043a\u043e\u0440\u0443\u0442\u0438\u043d\u044b \u0432 Kotlin \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u041f\u043e\u043b\u043d\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/mobius-piter.ru\/2021\/spb\/schedule\/?utm_source=habr&amp;utm_medium=549008\">\u043d\u0430 \u0441\u0430\u0439\u0442\u0435<\/a> \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438.<\/p><\/blockquote>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/jugru\/blog\/549008\/\"> https:\/\/habr.com\/ru\/company\/jugru\/blog\/549008\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/iz\/v9\/7k\/izv97k6ckc5x0uusyiv8ig6h6ga.png\"><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442 Jetpack Compose \u043f\u0440\u0438\u0432\u043b\u0451\u043a \u043c\u043d\u043e\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0432 Android-\u043c\u0438\u0440\u0435, \u0435\u0449\u0451 \u043a\u043e\u0433\u0434\u0430 \u0431\u044b\u043b \u0432 \u0430\u043b\u044c\u0444\u0430-\u0432\u0435\u0440\u0441\u0438\u0438. \u0410 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0434\u043e\u0431\u0440\u0430\u043b\u0441\u044f \u0434\u043e \u0431\u0435\u0442\u044b \u2014 \u0442\u0430\u043a \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435\u043c Android-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043f\u043e\u0440\u0430 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0434\u043b\u044f \u0425\u0430\u0431\u0440\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0434\u043e\u043a\u043b\u0430\u0434\u0430 <strong>\u041c\u0430\u0442\u0432\u0435\u044f \u041c\u0430\u043b\u044c\u043a\u043e\u0432\u0430<\/strong> \u0441 \u043d\u0430\u0448\u0435\u0439 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 Mobius. \u041c\u0430\u0442\u0432\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Google UK \u0438 \u043b\u0438\u0447\u043d\u043e \u043f\u0440\u0438\u0447\u0430\u0441\u0442\u0435\u043d \u043a Compose, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u0437 \u0434\u043e\u043a\u043b\u0430\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043a\u043e\u0435-\u0447\u0442\u043e \u043e \u00ab\u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044f\u0445\u00bb \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437 \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u0438\u043c: \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0443\u0434\u0435\u043b\u0435\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Jetpack Compose, \u0430 \u0432\u0441\u0435\u043c\u0443 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443 \u0432 \u0446\u0435\u043b\u043e\u043c.<\/p>\n<p>  <\/p>\n<p>\u041a\u0441\u0442\u0430\u0442\u0438, \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0435\u0449\u0451 \u0438 \u043f\u0440\u043e\u0435\u043a\u0442 Compose for Desktop \u043e\u0442 JetBrains. \u0418 \u0441\u043a\u043e\u0440\u043e \u043d\u0430 Mobius \u043e \u043d\u0451\u043c \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043a\u0430\u0437 \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u0440\u0443\u043a: 14 \u0430\u043f\u0440\u0435\u043b\u044f \u043e\u0431 \u044d\u0442\u043e\u043c <a href=\"https:\/\/mobius-piter.ru\/2021\/spb\/talks\/2xc1ghz3mflzjnl1rykk9z\/?utm_source=habr&amp;utm_medium=549008\">\u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u0442<\/a> \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u041d\u0438\u043a\u043e\u043b\u0430\u0439 \u0418\u0433\u043e\u0442\u0442\u0438.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u043e\u0432\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442 \u043b\u0438\u0446\u0430 \u0441\u043f\u0438\u043a\u0435\u0440\u0430.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-321120","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/321120","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=321120"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/321120\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=321120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=321120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=321120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}