{"id":338571,"date":"2022-09-21T09:00:34","date_gmt":"2022-09-21T09:00:34","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=338571"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=338571","title":{"rendered":"<span>\u041f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0443 Mobx. \u041f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u044e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0441 \u043d\u0443\u043b\u044f<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b92\/f23\/410\/b92f23410f0fb9851398aef63ef30708.png\" width=\"1740\" height=\"971\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b92\/f23\/410\/b92f23410f0fb9851398aef63ef30708.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435 \u043c\u043e\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 Mobx \u043d\u0430\u0447\u0430\u043b\u043e\u0441\u044c \u0441 \u0443\u0434\u0438\u0432\u043b\u0435\u043d\u0438\u044f. \u042f \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043b \u0432\u0441\u044e \u043c\u0430\u0433\u0438\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0437\u0430\u0434\u0430\u0432\u0430\u043b \u0441\u0435\u0431\u0435 \u0432\u043e\u043f\u0440\u043e\u0441: \u201c\u0410 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e?\u201d. \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0432 \u043d\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u043e\u0434\u043a\u0430\u043f\u043e\u0442\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 JS \u0438\u043b\u0438 Mobx \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u044f\u0437\u044b\u043a\u0435.\u00a0<\/p>\n<p>\u0418 \u0432\u043e\u0442, \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 3 \u043c\u0435\u0441\u044f\u0446\u0430 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445, \u044f \u0440\u0430\u0437\u0432\u0435\u044f\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u043c\u0430\u0433\u0438\u044e. Mobx \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 JS \u0438 \u0434\u0430\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0432\u0437\u043e\u0440\u0432\u0430\u043b\u0441\u044f.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439 Mobx \u0441 \u043d\u0443\u043b\u044f, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0441\u0432\u044f\u0436\u0435\u043c \u0435\u0433\u043e \u0441 React, \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 HOC observer. \u0412 \u043a\u043e\u043d\u0446\u0435 \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0449\u0435\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u0438\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Mobx, \u043d\u043e \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432.<\/p>\n<h2>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p><a href=\"#under_hood\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u0433\u043b\u044f\u043d\u0435\u043c Mobx \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#mobx_structure\" rel=\"noopener noreferrer nofollow\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u043e\u0438\u0442 Mobx.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%81%D0%B2%D1%8F%D0%B7%D1%8C%20%D0%BD%D0%B0%D0%B1%D0%BB%D1%8E%D0%B4%D0%B0%D0%B5%D0%BC%D1%8B%D1%85%20%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B9\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u044f\u0437\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%87%D1%82%D0%BE%20%D0%BC%D1%8B%20%D1%81%20%D0%B2%D0%B0%D0%BC%D0%B8%20%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D0%BC\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BA%D1%80%D0%B0%D1%82%D0%BA%D0%BE%D0%B5%20%D0%BE%D0%B1%D1%8A%D1%8F%D1%81%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BB%D0%BE%D0%B3%D0%B8%D0%BA%D0%B8%20%D1%81%D0%B2%D1%8F%D0%B7%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\">\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 &#171;\u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f&#187;<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a href=\"#%D0%92%D0%B0%D1%88%20Mobx\" rel=\"noopener noreferrer nofollow\">\u0412\u0430\u0448 Mobx<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5%20%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Autorun\" rel=\"noopener noreferrer nofollow\">Autorun<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#ObservableValue\" rel=\"noopener noreferrer nofollow\">ObservableValue<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20ObservableValue\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableValue<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#ObservableObject\" rel=\"noopener noreferrer nofollow\">ObservableObject<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D1%80%D0%BE%D0%BA%D1%81%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%20enhancer%20%D0%B2%20ObservableValue\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c enhancer \u0432 ObservableValue<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20ObservableObject\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableObject  <\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#ObservableArray\" rel=\"noopener noreferrer nofollow\">ObservableArray<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D1%80%D0%BE%D0%BA%D1%81%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9E%D0%B1%D0%BD%D0%BE%D0%B2%D0%BB%D1%8F%D0%B5%D0%BC%20enhancer%20%D0%B2%20ObservableValue\" rel=\"noopener noreferrer nofollow\">\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c enhancer \u0432 ObservableValue  <\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Atom\" rel=\"noopener noreferrer nofollow\">Atom<\/a>  <\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20ObservableArray\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableArray  <\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%92%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D0%BE%D1%82%D0%BF%D0%B8%D1%81%D0%BE%D0%BA%20Reaction\" rel=\"noopener noreferrer nofollow\">\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u043e\u043a Reaction<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A1%D0%B2%D1%8F%D0%B7%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B8%20%D1%81%20react\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441 react<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20c%D0%B2%D1%8F%D0%B7%D0%BA%D0%B8%20%D1%81%20React\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b c\u0432\u044f\u0437\u043a\u0438 \u0441 React<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a href=\"#%D0%A7%D1%82%D0%BE%20%D0%BD%D0%B5%20%D0%BF%D0%BE%D0%BF%D0%B0%D0%BB%D0%BE%20%D0%B2%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D1%83?\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u043d\u0435 \u043f\u043e\u043f\u0430\u043b\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443?<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%9F%D0%BE%D0%BB%D0%BD%D0%BE%D1%86%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5%20Observable-%D1%81%D1%83%D1%89%D0%BD%D0%BE%D1%81%D1%82%D0%B8\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 Observable-\u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Computed%20Values\" rel=\"noopener noreferrer nofollow\">Computed Values  <\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Actions\" rel=\"noopener noreferrer nofollow\">Actions<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a href=\"#%D0%98%D1%82%D0%BE%D0%B3%D0%B8\" rel=\"noopener noreferrer nofollow\">\u0418\u0442\u043e\u0433\u0438<\/a><\/p>\n<h2>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u044f<\/h2>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430 \u043d\u0430 \u043b\u044e\u0434\u0435\u0439, \u0440\u0430\u0431\u043e\u0442\u0430\u0432\u0448\u0438\u0445 \u0441 Mobx, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u0432\u043e\u0442 \u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/p>\n<p><a href=\"https:\/\/mobx.js.org\/getting-started\" rel=\"noopener noreferrer nofollow\">Getting-started<\/a>, <a href=\"https:\/\/mobx.js.org\/the-gist-of-mobx.html\" rel=\"noopener noreferrer nofollow\">the-gist-of-Mobx<\/a>, <a href=\"https:\/\/mobx.js.org\/api.html\" rel=\"noopener noreferrer nofollow\">Mobx Api<\/a><\/p>\n<p>\u041f\u0438\u0441\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043c\u044b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u0430\u043c\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0443\u043c. \u041d\u0430\u0448\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0433\u0434\u0435-\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e\u0439 \u0438 \u043d\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u043a \u043f\u0440\u043e\u0434\u0443.<\/p>\n<p><a class=\"anchor\" name=\"under_hood\" id=\"under_hood\"><\/a><\/p>\n<h2>\u0417\u0430\u0433\u043b\u044f\u043d\u0435\u043c Mobx \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430, \u043f\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u0437\u0430 Mobx. <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<pre><code class=\"javascript\">import { observable, autorun } from \"mobx\";  const counter = observable({ count: 0 });  console.log(counter);  function listener()     console.log(counter.count) }  autorun(listener);  function increment() {   counter.count++; }  \/\/\u043a\u0430\u0436\u0434\u044b\u0435 \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a setInterval(increment, 500);<\/code><\/pre>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/61f\/880\/ab7\/61f880ab7db0fa27c5938577790b8250.png\" alt=\"\u041a\u0430\u0436\u0434\u044b\u0435 \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a.\" title=\"\u041a\u0430\u0436\u0434\u044b\u0435 \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a.\" width=\"729\" height=\"354\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/61f\/880\/ab7\/61f880ab7db0fa27c5938577790b8250.png\"\/><figcaption>\u041a\u0430\u0436\u0434\u044b\u0435 \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/codesandbox.io\/s\/mobx-work-example-forked-d7s1hf?file=\/src\/index.js\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0432 counter \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u0432 observable \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p>observable \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c <code>listener<\/code>, \u043e\u0431\u044b\u043a\u043d\u043e\u0432\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u043e\u043b\u0435 count.<\/p>\n<\/li>\n<li>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>listener<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432 autorun \u0438 \u0443\u0436\u0435 \u0432 autorun \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0441\u0432\u044f\u0437\u043a\u0430 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u043f\u043e\u043b\u044f count \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>listener<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 count \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f , \u0431\u0443\u0434\u0435\u0442 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>listener<\/code>.   <\/p>\n<\/li>\n<\/ul>\n<h3>\u0427\u0442\u043e \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442?  <\/h3>\n<p><a class=\"anchor\" name=\"mobx_structure\" id=\"mobx_structure\"><\/a><\/p>\n<h4> \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u043e\u0438\u0442 Mobx.<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0432\u044b\u0437\u043e\u0432\u0435\u043c\u00a0 <code>console.log(counter)<\/code>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u0442\u0430\u043a\u043e\u0439 Proxy-\u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u043e\u0436\u043d\u043e. \u0421\u0442\u043e\u043b\u044c\u043a\u043e Mobx \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/404\/575\/1a9\/4045751a9d2d86817e7168a2c5a253f8.png\" width=\"480\" height=\"434\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/404\/575\/1a9\/4045751a9d2d86817e7168a2c5a253f8.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442 \u0432 Proxy, \u0432 \u043d\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u043e\u043b\u0435 <code>count<\/code>. \u041f\u0440\u0438\u0447\u0435\u043c, \u043e\u043d\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437. \u0412\u043d\u0443\u0442\u0440\u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 values, \u043a\u043e\u043f\u0438\u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a\u0430\u0436\u0434\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u043e \u0432 <code>ObservableValue<\/code>.<\/p>\n<p><code>ObservableValue<\/code> \u044d\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438. \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0445\u0440\u0430\u043d\u0438\u043c\u043e\u043c\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e. \u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u0440\u0433\u0430\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438.<\/p>\n<p>\u0421\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 <code>ObservableValue<\/code> \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0420\u0435\u0430\u043a\u0446\u0438\u0439 (<code>Reaction<\/code>). <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f listener, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u0432 autorun. <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/17b\/a9d\/9cc\/17ba9d9cc2169be86688e7dad75074a4.png\" alt=\"listener\" title=\"listener\" width=\"411\" height=\"557\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/17b\/a9d\/9cc\/17ba9d9cc2169be86688e7dad75074a4.png\"\/><figcaption>listener<\/figcaption><\/figure>\n<p>\u0420\u0435\u0430\u043a\u0446\u0438\u0438 \u0442\u043e\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c, \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0441\u0435\u0431\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0440\u0435\u0430\u043a\u0446\u0438\u0438, \u0430 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043d\u0443\u044e \u043e\u0442\u043f\u0438\u0441\u043a\u0443.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c7a\/426\/645\/c7a4266454a34e2458a6ac7c9961e702.png\" width=\"459\" height=\"680\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c7a\/426\/645\/c7a4266454a34e2458a6ac7c9961e702.png\"\/><figcaption><\/figcaption><\/figure>\n<p><a class=\"anchor\" name=\"%D1%81%D0%B2%D1%8F%D0%B7%D1%8C%20%D0%BD%D0%B0%D0%B1%D0%BB%D1%8E%D0%B4%D0%B0%D0%B5%D0%BC%D1%8B%D1%85%20%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B9\" id=\"\u0441\u0432\u044f\u0437\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439\"><\/a><\/p>\n<h4>\u0421\u0432\u044f\u0437\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439<\/h4>\n<p>\u041c\u044b \u0441 \u0432\u0430\u043c\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u043b\u0438 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442 Mobx, \u043f\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u043b\u0438 \u0437\u0430 \u0442\u0435\u043c \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043e\u043d \u0441\u0442\u0440\u043e\u0438\u0442.\u00a0\u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u0432\u0441\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0443\u0436\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b. \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441 &#8212;\u00a0\u0430 \u043a\u0430\u043a \u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u044f \u044d\u0442\u0430 \u0441\u0432\u044f\u0437\u044c \u0432\u043d\u0443\u0442\u0440\u0438? <\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Mobx \u0432 \u0440\u0430\u0431\u043e\u0442\u0435, \u043c\u044b \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u0442\u043e \u044f\u0432\u043d\u043e,\u00a0\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 \u043d\u0430\u0441. \u042d\u0442\u043e \u0435\u0435 \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0444\u0438\u0448\u043a\u0430, \u043e\u043d\u0430 \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0432\u0441\u044e \u0441\u0430\u043c\u0443\u044e \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0438 \u0433\u0440\u044f\u0437\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043a\u043e\u0434\u0435, \u0430 \u043d\u0435 \u043d\u0430 \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0435.\u00a0<\/p>\n<p>\u041d\u043e\u00a0 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043c\u0430\u0433\u0438\u0438 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442. \u0415\u0441\u043b\u0438 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043e\u0434\u0430 \u043c\u044b \u0437\u0430\u0431\u0443\u0434\u0438\u043c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0430\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>listener<\/code> \u0432\u00a0 <code>autorun<\/code>, \u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0412\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u201c\u0441\u043b\u0443\u0448\u0430\u0442\u044c\u201d \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b \u0432 autorun \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438.<\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440. \u041c\u044b \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0437\u0430\u0431\u044b\u043b\u0438 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c <code>listener<\/code> \u0432 <code>autorun<\/code>.\u00a0\u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u0443\u0441\u0442\u043e \u0438 setInterval \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0445\u043e\u043b\u043e\u0441\u0442\u0443\u044e.<\/p>\n<pre><code class=\"javascript\">import { observable, autorun } from \"mobx\";  const counter = observable({ count: 0 });  console.log(counter);  function listener() {   console.log(counter.count); }  function increment() {   counter.count++; }  setInterval(increment, 500);<\/code><\/pre>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u044b\u0432\u043e\u0434, \u0447\u0442\u043e \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438 \u0441 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0430. \u0412 Mobx \u044d\u0442\u043e <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/api\/autorun.ts#L36\" rel=\"noopener noreferrer nofollow\">autorun<\/a> \u0438 <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/core\/reaction.ts#L53\" rel=\"noopener noreferrer nofollow\">Reaction<\/a>. \u0412 Mobx-react \u044d\u0442\u043e HOC <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx-react-lite\/src\/observer.ts#L60\" rel=\"noopener noreferrer nofollow\">observer<\/a>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0440\u044b\u0442\u044c\u0441\u044f \u0432 \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445, \u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e autorun \u0438 observer \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0432\u0441\u0435 \u0442\u043e\u0442 \u0436\u0435 Reaction.<\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/api\/autorun.ts#L69\" rel=\"noopener noreferrer nofollow\">\u0412 autorun \u0442\u0443\u0442. <\/a><\/p>\n<p>\u0412 HOC observer \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx-react-lite\/src\/observer.ts#L104\" rel=\"noopener noreferrer nofollow\">useObserver<\/a>. <\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/f0e066f427d573cbef4b92f3310eb069c3aca205\/packages\/mobx-react-lite\/src\/useObserver.ts#L43\" rel=\"noopener noreferrer nofollow\">\u0418 \u0432\u043e\u0442 \u0432 \u043d\u0435\u043c \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Reaction<\/a>.<\/p>\n<p>Reaction &#8212; \u043a\u043b\u044e\u0447\u0435\u0432\u0430\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BA%D1%80%D0%B0%D1%82%D0%BA%D0%BE%D0%B5%20%D0%BE%D0%B1%D1%8A%D1%8F%D1%81%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BB%D0%BE%D0%B3%D0%B8%D0%BA%D0%B8%20%D1%81%D0%B2%D1%8F%D0%B7%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F\" id=\"\u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f\"><\/a><\/p>\n<h4>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u201c\u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f\u201d <\/h4>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 autorun.<\/p>\n<p>\u041c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e autorun \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c. \u041e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0435\u0435.\u00a0\u0423 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0433\u0435\u0442\u0442\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043a \u0441\u0435\u0431\u0435. <\/p>\n<p>\u041d\u0430\u0438\u0432\u043d\u044b\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f let globalListener = null;  const observableValue = {  internalListener: null,  \/\/ \u043c\u0435\u0442\u043e\u0434 \u043e\u0442\u0434\u0430\u044e\u0449\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f  get() {    this.internalListener = globalListener;    return \"some value\";  } };  \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e function autorun(listener) {  globalListener = listener;  listener(); }  \/\/------------------------------------------- \/\/ \u043a\u043b\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u0434  function listener() {  console.log(observableValue.get()); }  autorun(listener);  console.log(observableValue.internalListener === listener); \/\/Listener \u043f\u043e\u043f\u0430\u043b \u0432\u043d\u0443\u0442\u0440\u044c observableValue<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/svyazyvanie-primer-dlya-mobx-kyq04n?file=\/src\/index.js\" rel=\"noopener noreferrer nofollow\">\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/a>.   <\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d67\/041\/307\/d67041307bf3d307dceb4f893a801a02.png\" width=\"1600\" height=\"992\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d67\/041\/307\/d67041307bf3d307dceb4f893a801a02.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u0430\u043b\u0435, \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0440\u0438\u0441\u0443\u043d\u043a\u0430, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e <code>autorun<\/code>.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b.<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u043b\u0438 \u0437\u0430 Mobx, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0432\u043e \u0447\u0442\u043e \u043e\u043d\u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0430\u0448 \u043a\u043e\u0434<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u043c\u0435\u044f \u0432\u044b\u0448\u0435\u0438\u0437\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044e \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043d\u0430\u043c api \u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p><a class=\"anchor\" name=\"%D1%87%D1%82%D0%BE%20%D0%BC%D1%8B%20%D1%81%20%D0%B2%D0%B0%D0%BC%D0%B8%20%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D0%BC\" id=\"\u0447\u0442\u043e \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c\"><\/a><\/p>\n<h2>\u0427\u0442\u043e \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c?  <\/h2>\n<p>\u041c\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0430\u043f\u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e Mobx.<\/p>\n<p>\u041f\u0440\u0438\u043a\u0438\u043d\u0435\u043c, \u043a\u0430\u043a\u043e\u0435 api \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a \u043a\u043e\u043d\u0446\u0443 \u0441\u0442\u0430\u0442\u044c\u044e.<\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c.\u00a0<\/p>\n<p>\u041d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u043e, \u043d\u043e <code>observableValue<\/code> \u043d\u0443\u0436\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440.<\/p>\n<p><a href=\"https:\/\/mobx.js.org\/api.html#observablebox\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0430\u043b\u043e\u0433 \u0438\u0437 Mobx<\/a>: <\/p>\n<pre><code class=\"javascript\">const value = observableValue(0)  const increment = () => value.set(value.get() + 1) const listener = () => console.log(value.get()) \/\/ \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 1...2...3...4  autorun(listener)  setInterval(increment,500)<\/code><\/pre>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442\u044b \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u0430\u044f \u0432\u0435\u0449\u044c \u0432 \u043d\u0430\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435, \u0438 \u0432\u0430\u0436\u043d\u043e \u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u043f\u043e\u043b\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c\u0438.<\/p>\n<p> <a href=\"https:\/\/mobx.js.org\/api.html#observableobject\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0430\u043b\u043e\u0433 \u0438\u0437 mobx: <\/a><\/p>\n<pre><code class=\"javascript\">const obj = observableObject({count: 0})  const increment = () => obj.count++ const listener = () => console.log(obj.count) \/\/ \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 1...2...3...4  autorun(listener)  setInterval(increment, 500)<\/code><\/pre>\n<p>\u0421 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f, \u0447\u0442\u043e \u0438 \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438. <\/p>\n<p><a href=\"https:\/\/mobx.js.org\/api.html#observablearray\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0430\u043b\u043e\u0433 \u0438\u0437 mobx:<\/a><\/p>\n<pre><code class=\"javascript\">const arr = observableArray([])  const add = () => arr.push(1) const listener = () => console.log(arr) \/\/ \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 [1]...[1, 1]...[1,1,1]...[1,1,1,1]  autorun(listener)  setInterval(add, 500)<\/code><\/pre>\n<p>\u0423\u0442\u0435\u0447\u043a\u0438 \u043f\u0430\u043c\u044f\u0442\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u043a\u043e\u043c\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e.  <\/p>\n<pre><code class=\"javascript\">const arr = observableArray([])  const add = () => arr.push(1) const listener = () => console.log(arr) \/\/ \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 [1]...[1, 1]...[1,1,1]  const dispose = autorun(listener)  setInterval(add, 500)  setTimeout(dispose, 1600) \/\/ \u043f\u043e\u0441\u043b\u0435 3 \u0432\u044b\u0437\u043e\u0432\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043e\u0442\u043f\u0438\u0441\u043a\u0430 \u0438 listener \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u0445\u043e\u0442\u044f add \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0432\u0445\u043e\u043b\u043e\u0441\u0442\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c <\/code><\/pre>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445. <\/p>\n<p><a href=\"https:\/\/mobx.js.org\/react-integration.html\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0430\u043b\u043e\u0433 \u0438\u0437 mobx<\/a>: <\/p>\n<pre><code class=\"javascript\">const obj = observableObject({count: 0}) setInterval(() => obj.count++, 500)  const App = () => {    return &lt;div>{obj.count}&lt;\/div> \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0435 500 \u043c\u0441 }  const ObservabledApp = observer(App) \/\/observer \u0441\u0432\u044f\u0436\u0435\u0442 \u043f\u043e\u043b\u0435 count c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c   render(&lt;ObservabledApp \/>, \u201c#root\u201d)<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0430\u043f\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>\u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432\u0437\u044f\u0442\u044b \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043c\u044b \u043f\u043e\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e \u043d\u0430\u043f\u0438\u0448\u0435\u043c. \u041f\u0435\u0440\u0435\u0434 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/p>\n<ol>\n<li>\n<p><code>ObservableValue<\/code> &#8212; \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043f\u043e\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u044f\u0432\u043d\u043e \u043c\u044b \u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440.<\/p>\n<\/li>\n<li>\n<p><code>ObservableObject<\/code> &#8212; \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 <code>ObservableValue<\/code>, \u0432\u0441\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>ObservableObject<\/code> \u043f\u043e\u0440\u0443\u0447\u0430\u0435\u0442 <code>ObservableValue<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>ObservableArray<\/code> &#8212; \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u0441\u044f \u0432 <code>ObservableValue<\/code>. <code>ObservableArray<\/code> \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u0440\u0443\u0447\u0430\u0435\u0442 <code>ObservableValue<\/code>.<\/p>\n<\/li>\n<li>\n<p>Atom &#8212; \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e <code>ObservableValue<\/code> \u0438 <code>ObservableArray<\/code>.<\/p>\n<\/li>\n<li>\n<p>Reaction &#8212; \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f, \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u044f\u0437\u043a\u043e\u0439 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0432\u0441\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u0445\u0440\u0430\u043d\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435.<\/p>\n<\/li>\n<\/ol>\n<p>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2c5\/393\/675\/2c53936757bb1200e1b602a4c58819cd.png\" width=\"1534\" height=\"1600\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2c5\/393\/675\/2c53936757bb1200e1b602a4c58819cd.png\"\/><figcaption><\/figcaption><\/figure>\n<h3>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435<\/h3>\n<p>\u041c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u043b\u0438 Mobx\u00a0\u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442. \u041e\u0431\u0441\u0443\u0434\u0438\u043b\u0438 Api, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u041f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u0441 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. <\/p>\n<p>\u041f\u043e\u0434\u0441\u043c\u043e\u0442\u0440\u0435\u0432 \u0437\u0430 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u043c mobx, \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e.<\/p>\n<p><a class=\"anchor\" name=\"%D0%92%D0%B0%D1%88%20Mobx\" id=\"\u0412\u0430\u0448 Mobx\"><\/a><\/p>\n<h2>\u0412\u0430\u0448 Mobx\u00a0<\/h2>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 autorun \u0438 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<p><a class=\"anchor\" name=\"%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5%20%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5\" id=\"\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\"><\/a><\/p>\n<h3>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435  <\/h3>\n<p>\u0422\u0443\u0442 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0440\u0435\u0430\u043a\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u043b\u0438 \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043a \u0441\u0435\u0431\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435.<\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/core\/globalstate.ts\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043b\u0438\u0437\u0430\u043d \u0438\u0437 Mobx.<\/a><\/p>\n<p>\u041e\u043d \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u044f \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043e\u0447\u0435\u0440\u0435\u0434\u0435\u0439 \u0440\u0435\u0430\u043a\u0446\u0438\u0439, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u043b\u0430\u0433\u0438 \u0438 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0447\u0435\u0433\u043e, \u043f\u043e\u043b\u0435 <code>trackingDerivation<\/code>\u0442\u0430\u043c \u0442\u043e\u0436\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0442\u0443 \u0436\u0435 \u0440\u043e\u043b\u044c, \u0442\u043e \u0435\u0441\u0442\u044c, \u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u0435\u0433\u043e \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0441 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c.<\/p>\n<pre><code class=\"javascript\">\/** * \u041a\u043b\u0430\u0441\u0441 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f *\/ class GlobalState {  \/**   * \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0438\u0441\u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u0438(\u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f)   *\/  trackingDerivation = null; }  export const globalState = new GlobalState();<\/code><\/pre>\n<p><a class=\"anchor\" name=\"Autorun\" id=\"Autorun\"><\/a><\/p>\n<h3>Autorun  <\/h3>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/api\/autorun.ts#L36\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 autorun<\/a><\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a\u0430\u044f \u0441\u0443\u043f\u0435\u0440 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f, \u043f\u043e\u0437\u0436\u0435 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u0441\u044f \u0438 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">import { globalState } from \".\/globalState.js\"  export function autorun(callback) {  const prevTrackingDerivation = globalState.trackingDerivation;   globalState.trackingDerivation = callback;  callback();  globalState.trackingDerivation = prevTrackingDerivation; }<\/code><\/pre>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0432 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 <code>prevTrackingDerivation<\/code> \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u043e, \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430 autorun \u043d\u0435 \u0432\u043c\u0435\u0448\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0432 \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430 \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 autorun \u0436\u0438\u043b \u0432 \u0441\u0432\u043e\u0435\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435.<\/p>\n<p>\u041d\u0430\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0435, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0435\u0435 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f. \u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u043c\u0435\u0441\u0442\u043e \u0438 \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442.<\/p>\n<p>\u0414\u043b\u044f \u044f\u0441\u043d\u043e\u0441\u0442\u0438, \u0432\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430 \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u043e\u0435 \u0431\u044b\u0432\u0430\u0435\u0442 \u0432 \u0440\u0435\u0430\u043a\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043c\u0435\u0442\u043e autorun \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f HOC observer. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043b\u043e\u0436\u0435\u043d\u044b \u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043c\u0435\u0448\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0443.<\/p>\n<pre><code class=\"javascript\">autorun(function listener1() {   \/\/ \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 listener1   autorun(function listener2() {     \/\/ \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 listener2   })   \/\/ \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 listener1 })<\/code><\/pre>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e. \u0422\u0435\u043f\u0435\u0440\u044c, \u043d\u0443\u0436\u043d\u043e \u044d\u0442\u0443 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u0442\u043b\u043e\u0432\u0438\u0442\u044c \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0435\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.<\/p>\n<p><a class=\"anchor\" name=\"ObservableValue\" id=\"ObservableValue\"><\/a><\/p>\n<h3>ObservableValue  <\/h3>\n<p><a href=\"https:\/\/mobx.js.org\/api.html#observablebox\" rel=\"noopener noreferrer nofollow\">\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 api observable.box \u0438\u0437 mobx:<\/a><\/p>\n<p><code>ObservableValue<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435<\/p>\n<ul>\n<li>\n<p>\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 get, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439<\/p>\n<\/li>\n<li>\n<p>\u041c\u0435\u0442\u043e\u0434 set, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0440\u0435\u0430\u043a\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>enhancer &#8212; \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041f\u043e\u043a\u0430 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0430 \u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u0431\u0443\u0434\u0443\u0449\u0435\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443<\/p>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/types\/observablevalue.ts#L62\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 ObservableValue:<\/a><\/p>\n<pre><code class=\"javascript\">\/\/ ObservableValue.js  import { globalState } from \".\/globalstate.js\"; import { isPrimitive, isObservable } from \".\/utils.js\" import { $$observable } from \"..\/constants\";  function enhancer(value) {  if (isObservable(value)) return value;  if (isPrimitive(value)) return value;  return value; }  export class ObservableValue {  constructor(value) {    this._observers = new Set();     this[$$observable] = true;     this._value = enhancer(value);  }   get() {    \/\/ \u0442\u0443\u0442 \u043c\u044b \u043e\u0442\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u044b\u043b\u0430 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0432 trackingDerivation \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 autorun     if (globalState.trackingDerivation) {      this.observe(globalState.trackingDerivation);    }     return this._value;  }   \/**   * @description \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439   *\/  set(newValue) {    this._value = enhancer(newValue);    this._notify();  }   \/**   * @description \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439   *\/  observe(reaction) {    this._observers.add(reaction);  }   \/**   * @description \u0423\u0434\u0430\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439   *\/  dispose(reaction) {    this._observers.delete(reaction);  }   \/**   * @description \u0423\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445   *\/  _notify() {    this._observers.forEach((reaction) => reaction());  } }<\/code><\/pre>\n<p><a class=\"anchor\" name=\"%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20ObservableValue\" id=\"\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableValue\"><\/a><\/p>\n<h3>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableValue<\/h3>\n<p><a href=\"https:\/\/codesandbox.io\/s\/simple-mobx-todolist-forked-i2c1lf?file=\/index.js\" rel=\"noopener noreferrer nofollow\"><u>\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435\u00a0<\/u><\/a>. <\/p>\n<pre><code class=\"javascript\">import { ObservableValue } from \".\/ObservableValue\"; import { autorun } from \".\/autorun\";  const count = new ObservableValue(0);  function listener() {   console.log(count.get()) }  autorun(listener);  function increment() {   count.set(count.get() + 1); }  setInterval(increment, 500); <\/code><\/pre>\n<p>\u041d\u0430\u0448 \u043a\u043e\u0434 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438. \u0423\u0436\u0435 \u0441\u0435\u0439\u0447\u0430\u0441 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0433\u0434\u0435-\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u041d\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u043c\u044b \u0441 mobx \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b (\u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u043c\u0430\u0441\u0441\u0438\u0432\u044b).<br \/>\u0418 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435. \u0422\u0430\u043a \u0438\u00a0\u0435\u0449\u0435 \u043c\u044b \u043b\u0438\u0448\u0438\u043c \u043d\u0430\u0448\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u201c\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438\u201d, \u0432\u0435\u0434\u044c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b set \u0438 get.<\/p>\n<p>\u0412 mobx \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u044f\u0447\u0443\u0442\u0441\u044f \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u201c\u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u201d \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p><a class=\"anchor\" name=\"ObservableObject\" id=\"ObservableObject\"><\/a><\/p>\n<h3>ObservableObject<\/h3>\n<p>\u0421\u043d\u043e\u0432\u0430 \u0437\u0430\u0433\u043b\u044f\u043d\u0435\u043c \u043f\u043e\u0434 \u044e\u0431\u043a\u0443 \u043a mobx. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043e\u043d \u0441\u0442\u0440\u043e\u0438\u0442 \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u0435\u0440\u043d\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 <code>observable<\/code><\/p>\n<pre><code class=\"javascript\">import { observable } from \"mobx\";  const observableObject = observable({  value: 1,  value2: {value3: 3},  arr: [1, 2, { value4: 4 }] });  console.log(observableValue);<\/code><\/pre>\n<p>\u0412\u044b\u0437\u043e\u0432\u0435\u043c <code>console.log(observableObject)<\/code> \u0438 \u0443\u0432\u0438\u0434\u0438\u043c \u0442\u0430\u043a\u043e\u0439 Proxy \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e77\/e27\/c01\/e77e27c01f6b6e7cda1a9ffc5c69335b.png\" alt=\"\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Proxy \u0443 observableObject\" title=\"\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Proxy \u0443 observableObject\" width=\"355\" height=\"137\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e77\/e27\/c01\/e77e27c01f6b6e7cda1a9ffc5c69335b.png\"\/><figcaption>\u0412\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 Proxy \u0443 observableObject<\/figcaption><\/figure>\n<p>\u041c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u043e \u0432 <code>ObservableValue<\/code>, \u043d\u0435\u0432\u0430\u0436\u043d\u043e, \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0438\u043b\u0438 \u043d\u0435\u0442.\u00a0<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439, \u0441\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e <code>\u041ebservableValue<\/code>. \u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d <code>ObservableValue.<\/code><\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/types\/observableobject.ts#L90\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 ObservableObject.<\/a><\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432 Mobx \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0430\u0448\u043d\u0435\u0435 \u0438 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0432 \u043d\u0430\u0448\u0435\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0441\u0430\u043c\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0443\u043c:<\/p>\n<p>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0432\u0441\u0435 \u043f\u043e\u043b\u044f \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432 <code>ObservableValue<\/code>.<\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 get <code>ObservableObject<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 get \u0443 <code>ObservableValue<\/code>, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0435\u0435 \u043a\u0430\u043a \u0435\u0441\u0442\u044c.<\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 set \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0443 <code>ObservableValue<\/code> \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u0432 \u043d\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0430\u043d\u044c\u0448\u0435 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e, \u0442\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0432 <code>ObservableValue<\/code> \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 <code>values<\/code>.<\/p>\n<pre><code class=\"javascript\">import { ObservableValue } from \"..\/ObservableValue\"; import { isFunction } from \"..\/utils\";  export class ObservableObject {  constructor(target) {    this._target = target;     \/**     * \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u044d\u0442\u043e \u043a\u043e\u043f\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430,     * \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0438\u0437\u0432\u043d\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b \u0432 ObservableValue     *\/    this._values = Object.fromEntries(Object.entries(target).map(([key, value]) => [key, new ObservableValue(value)]));   }   \/**   * @description \u041c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 ObservableValue   *\/  get(target, property) {    if (!this._hasProperty(property)) return;    \/* \u0435\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e *\/    if (isFunction(target[property])) return target[property];     return this._values[property].get();  }   \/**   * @description  \u041c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442   * \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f ObservableValue \u0438 \u0434\u043b\u044f \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430   *\/  set(target, property, value) {    if (this._hasProperty(property)) {      \/* \u0435\u0441\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0435\u0441\u0442\u044c, \u0442\u043e \u044d\u0442\u043e observableValue \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0443 \u043d\u0435\u0435 \u043c\u0435\u0442\u043e\u0434 set*\/      this._values[property].set(value);      return true;    }     if (isFunction(target[property])) {      \/* \u0435\u0441\u043b\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e *\/      target[property] = value;      return true;    }    \/* \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0435\u0442, \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0435 \u0438 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432 ObservableValue*\/    this._values[property] = new ObservableValue(value);    target[property] = value;     return true;  }   _hasProperty(property) {    return property in this._target;  } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0434\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u0443\u043f\u0430\u043a\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u0432\u0441\u0435 \u044f\u0432\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b get \u0438 set.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b Proxy, Symbol \u0438 \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440\u044b.<\/p>\n<p><a class=\"anchor\" name=\"%D0%9F%D1%80%D0%BE%D0%BA%D1%81%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0\" id=\"\u041f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\"><\/a><\/p>\n<h3>\u041f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430<\/h3>\n<p>\u041e\u0431\u0435\u0440\u043d\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 Proxy \u0438 \u0432\u043e\u0437\u043b\u043e\u0436\u0438\u043c \u0432\u044b\u0437\u043e\u0432\u044b \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u043d\u0430 JS.<\/p>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 Proxy \u043d\u0435 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0438\u043b \u0441\u0441\u044b\u043b\u043a\u0443:\u0434\u043b\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p><a href=\"https:\/\/learn.javascript.ru\/proxy\" rel=\"noopener noreferrer nofollow\">Learn JavaScript<\/a><\/p>\n<p><a href=\"https:\/\/learn.javascript.ru\/proxy#observable\" rel=\"noopener noreferrer nofollow\">\u0422\u0443\u0442 \u0436\u0435 \u0435\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u043a\u0430 \u043f\u0440\u043e observable \u043e\u0431\u044a\u0435\u043a\u0442<\/a><\/p>\n<p>Proxy \u0431\u0443\u0434\u0435\u0442 \u0432 \u0441\u0432\u043e\u0438\u0445 \u043b\u043e\u0432\u0443\u0448\u043a\u0430\u0445 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 <code>ObservableObject<\/code>. \u0421\u0430\u043c <code>ObservableObject<\/code> \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u0442\u043e\u043c \u0436\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u0443\u0435\u043c. <\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0421\u0438\u043c\u0432\u043e\u043b \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441.<\/p>\n<p><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Symbol\" rel=\"noopener noreferrer nofollow\">\u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u0430\u043c<\/a><\/p>\n<pre><code class=\"javascript\">\/\/ constants.js  \/** * \u041a\u043b\u044e\u0447 \u0434\u043b\u044f \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 *\/ export const $$observable = Symbol(\"observable\");  \/** * \u041a\u043b\u044e\u0447, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. *\/ export const $$observableAdmin = Symbol(\"observableAdmin\");<\/code><\/pre>\n<p>C \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>defineProperty<\/code>\u0437\u0430\u043f\u0440\u0435\u0442\u0438\u043c \u0432\u0441\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441 \u044d\u0442\u0438\u043c \u043f\u043e\u043b\u0435\u043c, \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u0434 \u043d\u0435 \u043c\u043e\u0433 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043d\u0435\u043c\u0443.<\/p>\n<pre><code class=\"javascript\">\/\/ observableObject.js  import {$$observableAdmin} from \".\/constants\"; import {ObservableObject} from \".\/ObservableObject.js\"  \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f observableObject, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043f\u0440\u043e\u043a\u0441\u0438  function observableObject(target) {  Object.defineProperty(target, $$observableAdmin, {    enumerable: false,    configurable: false,    writable: false,    value: new ObservableObject(target)  });   return new Proxy(target, {    get(...args) {      return target[$$observableAdmin].get(...args);    },    set(...args) {      return target[$$observableAdmin].set(...args);    }  }); }<\/code><\/pre>\n<p>\u041d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f-\u0444\u0430\u0431\u0440\u0438\u043a\u0430 \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0433\u043e\u0442\u043e\u0432\u0430.<\/p>\n<p><a class=\"anchor\" name=\"%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%20enhancer%20%D0%B2%20ObservableValue\" id=\"\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c enhancer \u0432 ObservableValue\"><\/a><\/p>\n<h3>\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c enhancer \u0432 ObservableValue<\/h3>\n<p>\u041c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>enhancer<\/code> \u0432 <code>ObservableValue.js<\/code> \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<pre><code class=\"javascript\">\/\/ ObservableValue.js  \/\/ ...  import { isPrimitive, isPureObject, isObservable } from \".\/utils.js\"  function enhancer(value) {  if (isObservable(value)) return value;  if (isPrimitive(value)) return value;   if (isPureObject(value)) return observableObject(value);   return value; }  \/\/ ...<\/code><\/pre>\n<p>\u042d\u0442\u0438\u043c \u0445\u043e\u0434\u043e\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b.<\/p>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0435 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u0438 \u0432\u0441\u044f \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e \u0438 Mobx \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u044d\u0442\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c, \u043d\u043e \u043c\u044b \u043f\u0438\u0448\u0435\u043c \u0443\u0447\u0435\u0431\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0438 \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u043d\u0443\u0436\u0434 \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438 \u0442\u0430\u043a.<\/p>\n<p><a class=\"anchor\" name=\"%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20ObservableObject\" id=\"\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableObject\"><\/a><\/p>\n<h3>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableObject  <\/h3>\n<p>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0441\u0445\u043e\u0436\u0430 \u0441 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0435\u0439. <\/p>\n<pre><code class=\"javascript\">import { makeObservable } from \".\/makeObservable\"; import { autorun } from \".\/autorun\";  const counter = observableObject({ count: 0 });  console.log(counter);  function listener() {  console.log(counter.count) \/\/\u0432\u044b\u0432\u043e\u0434 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c 1\u20262\u20263\u20264\u20265\u20266 }  autorun(listener);  function increment() {  counter.count++; }  setInterval(increment, 500);<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/minimal-mobx-react-project-forked-xrvmry?file=\/index.js\" rel=\"noopener noreferrer nofollow\"><u>\u041f\u0440\u0438\u043c\u0435\u0440 \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/u><\/a>  <\/p>\n<p><a class=\"anchor\" name=\"ObservableArray\" id=\"ObservableArray\"><\/a><\/p>\n<h3>ObservableArray<\/h3>\n<p>\u041c\u044b \u0441 \u0432\u0430\u043c\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u0432, \u043d\u043e \u0434\u043b\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438.\u00a0<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0435, \u0438\u043c\u0435\u044f \u043e\u043f\u044b\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0432\u0443\u0445 \u043f\u0440\u043e\u0448\u043b\u044b\u0445 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/types\/observablearray.ts#L119\" rel=\"noopener noreferrer nofollow\">\u0412 Mobx \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0430\u044f \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438.<\/a><\/p>\n<p>\u041c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u0448\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043d\u043e \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435.<\/p>\n<pre><code class=\"javascript\">import { isObservable, isPrimitive } from \"..\/utils\"; import { $$observable } from \"..\/constants\"; import { ObservableValue } from \"..\/ObservableValue\";   \/\/ ObservableArray.js  function arrayEnhancer(items) {  return items.map((targetElement) => {    if (isPrimitive(targetElement)) return targetElement;    return new ObservableValue(targetElement);  }); }   export class ObservableArray {  constructor(target) {    this._observers = new Set()     this[$$observable] = true;     this._target = target;     this._values = arrayEnhancer(target);  }   \/**   * @description \u041e\u0442\u0434\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c, \u0442\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e   *\/  get(target, property) {    if (globalState.trackingDerivation) {             this.observe(globalState.trackingDerivation);     }     const observableValue = this._getValue(property);    if (isObservable(observableValue)) return observableValue.get();    return observableValue;  }   \/**   * @description \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443   *\/  set(target, property, value) {    this.spliceWithArray(property, 0, value);    return true;  }   \/**   * @description \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 \u0438\u0437 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439   *\/  _getValue(property) {    return this._values[property];  }   \/**   * @description \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 observable \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 * \u0437\u0430 \u043e\u0434\u0438\u043d \u0440\u0430\u0437, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043c\u043e\u0433\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0433\u0435\u0442\u0442\u0435\u0440\u044b \u0438 \u0441\u0435\u0442\u0442\u0435\u0440\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, * \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u043e\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439    *   * \u041c\u0435\u0442\u043e\u0434 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 ObservableValue   *\/  spliceWithArray(start, deleteCount, ...items) {    this._values.splice(start, deleteCount || 0, ...arrayEnhancer(items));    const splicesValues = this._target.splice(start, deleteCount || 0, ...items);     this._notify();    return splicesValues;  }   \/**   * @description \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0434\u043b\u0438\u043d\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439.   *\/  setLength(newLength) {    const isValuesSetSuccess = Reflect.set(this._values, \"length\", newLength);    const isTargetSetSuccess = Reflect.set(this._target, \"length\", newLength);     this._notify();     return isValuesSetSuccess &amp;&amp; isTargetSetSuccess;  }   getValues() {    return this._values;  }  \/**   * @description \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439   * \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u0438   *\/  observe(reaction) {    this._observers.add(reaction);  }   \/**   * @description \u0423\u0434\u0430\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439   * \u0423\u0434\u0430\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0440\u0435\u0430\u043a\u0446\u0438\u0438   *\/  dispose(reaction) {    this._observers.delete(reaction);  }   \/**   * @description \u0423\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445   *\/  _notify() {    this._observers.forEach((reaction) => reaction());  } }<\/code><\/pre>\n<p>\u041d\u0430 set \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 <code>spliceWithArray<\/code>, \u043e\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 splice \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e.\u00a0<\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u044b \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0432 <code>ObservableValue<\/code> \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0435\u0431\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c.<\/p>\n<p>\u0412 <code>ObservableArray<\/code> \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0445 \u0432 <code>ObservableValue \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445<\/code>\u00a0\u0438 \u0432 \u0441\u0430\u043c\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0434\u043e \u0435\u0449\u0435 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0434\u043b\u0438\u043d\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432\u0430.<\/p>\n<p>\u041c\u0435\u0442\u043e\u0434 <code>setLength<\/code> \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0434\u043b\u0438\u043d\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439<\/p>\n<p><a class=\"anchor\" name=\"%D0%9F%D1%80%D0%BE%D0%BA%D1%81%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%B0\" id=\"\u041f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\"><\/a><\/p>\n<h3>\u041f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430<\/h3>\n<p>\u0414\u043b\u044f \u201c\u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u043e\u0439\u201d \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 \u043d\u0443\u0436\u043d\u043e, \u043a\u0430\u043a \u0438 \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Proxy.<\/p>\n<p>\u0414\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c set \u0438 get \u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u043e\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u043f\u043e-\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u0435\u0442\u0442\u0435\u0440 \u0430\u0436 5 \u0440\u0430\u0437, \u0430 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e 5 \u0440\u0430\u0437 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<pre><code class=\"javascript\">arr.push(1, 2, 3, 4, 5);<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>spliceWithArray<\/code>.<\/p>\n<p>\u041d\u0430\u0448\u0430 \u0432\u0435\u0440\u0441\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u0430 push \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>spliceWithArray<\/code>. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0437\u0430 \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u0438 \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b \u0443\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/types\/observablearray.ts#L413\" rel=\"noopener noreferrer nofollow\">\u0415\u0441\u043b\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b mobx.<\/a><\/p>\n<pre><code class=\"javascript\">import { $$observableAdmin } from \"..\/constants\";  \/** * \u0418\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 *\/ const arrayMethods = {  push(...items) {    const internalReactiveInstance = this[$$observableAdmin];    internalReactiveInstance.spliceWithArray(internalReactiveInstance.getValues().length, 0, ...items);    return internalReactiveInstance.getValues().length;  }, };  \/** * Proxy \u043b\u043e\u0432\u0443\u0448\u043a\u0438 \u0434\u043b\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u0430 *\/ export class ArrayHandlers {  get(target, property, _) {    const arrayMethod = arrayMethods[property];    if (arrayMethod) return arrayMethod.bind(target);     return target[$$observableAdmin].get(target, property);  }   set(target, property, value) {    const reactiveField = target[$$observableAdmin];     if (property === \"length\") return reactiveField.setLength(value);    return reactiveField.set(target, property, value);  } }   function delegateProxy(target) {  return new Proxy(target, new ArrayHandlers()); }  export function observableArray(target) {  Object.defineProperty(target, $$observableAdmin, {    enumerable: false,    configurable: false,    writable: false,    value: new ObservableArray(target),  });   return delegateProxy(target); }  <\/code><\/pre>\n<p><a class=\"anchor\" name=\"%D0%9E%D0%B1%D0%BD%D0%BE%D0%B2%D0%BB%D1%8F%D0%B5%D0%BC%20enhancer%20%D0%B2%20ObservableValue\" id=\"\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c enhancer \u0432 ObservableValue\"><\/a><\/p>\n<h3>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c enhancer \u0432 ObservableValue  <\/h3>\n<p>\u0421 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c enhancer \u0432 <code>ObservableValue.js<\/code>.  <\/p>\n<pre><code class=\"javascript\">\/\/ ObservableValue.js  \/\/ ...  import { isPrimitive, isObservable, isPureObject, isArray } from \".\/utils.js\"  function enhancer(value) {  if (isObservable(value)) return value;  if (isPrimitive(value)) return value;  if (isPureObject(value)) return observableObject(value)  if (isArray(value)) return observableArray(value);   return value; }  \/\/ ...<\/code><\/pre>\n<p><a class=\"anchor\" name=\"Atom\" id=\"Atom\"><\/a><\/p>\n<h3>Atom  <\/h3>\n<p>\u041c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u0432 \u0441\u0430\u043c\u043e\u0435 \u043d\u0430\u0447\u0430\u043b\u043e. \u0412 \u0442\u0443 \u0447\u0430\u0441\u0442\u044c, \u0433\u0434\u0435 \u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b \u043a\u0430\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443.<\/p>\n<p>\u0412\u0441\u043f\u043e\u043c\u043d\u0438\u043c \u044d\u0442\u043e\u0442 \u0440\u0438\u0441\u0443\u043d\u043e\u043a.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f99\/cb3\/5d8\/f99cb35d8c24df0c3a6bad3013a67b61.png\" width=\"1534\" height=\"1600\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f99\/cb3\/5d8\/f99cb35d8c24df0c3a6bad3013a67b61.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044f\u0445 <code>ObservableValue<\/code> \u0438 <code>ObservableArray<\/code> \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c Atom.<\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/core\/atom.ts#L24\" rel=\"noopener noreferrer nofollow\"><u>Atom \u0432 mobx<\/u><\/a>, \u044d\u0442\u043e \u043a\u043b\u0430\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f\u043c\u0438. \u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b Atom.<\/p>\n<p>\u041f\u0440\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>ObservableArray<\/code> \u0438 <code>ObservableValue<\/code>, \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u043a\u043e\u0434 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f\u043c\u0438 (observe, dispose, _notify).\u00a0<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u043c\u044b \u0432\u044b\u043d\u0435\u0441\u0435\u043c \u0432 Atom.<\/p>\n<pre><code class=\"javascript\">\/\/ Atom.js  import { globalState } from \"..\/globalstate\";  \/** *  \u041a\u043b\u0430\u0441\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 *\/ export class Atom {  constructor() {    this._observers = new Set([]);  }   \/**   * @description \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439   * \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u0438   *\/  observe(reaction) {    this._observers.add(reaction);  }   \/**   * @description \u0423\u0434\u0430\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439   * \u0423\u0434\u0430\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0440\u0435\u0430\u043a\u0446\u0438\u0438   *\/  dispose(reaction) {    this._observers.delete(reaction);  }    \/**   * @description \u0423\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445   *\/  _notify() {    this._observers.forEach((reaction) => reaction());  }    \/**   * @description \u041f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c   *\/  _reportObserved() {    if (globalState.trackingDerivation)          this.observe(globalState.trackingDerivation);    } }<\/code><\/pre>\n<p>\u0421\u0440\u0435\u0434\u0438 \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f<code>_reportObserved<\/code> , \u043e\u043d \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439. Atom \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0449\u0438\u0439\u0441\u044f \u043a\u043e\u0434 \u0438 \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f\u043c\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u0435\u0442\u043e\u0434 \u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0441\u044e\u0434\u0430.<\/p>\n<p><a class=\"anchor\" name=\"%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20ObservableArray\" id=\"\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableArray\"><\/a><\/p>\n<h3>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableArray  <\/h3>\n<p>\u041c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 2 \u043d\u043e\u0432\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 <code>Atom<\/code> \u0438 <code>ObservableArray<\/code>. \u0422\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 <a href=\"https:\/\/codesandbox.io\/s\/minimal-mobx-react-project-forked-e6pj3x?file=\/utils.js\" rel=\"noopener noreferrer nofollow\"><u>\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/u><\/a><u>.<\/u><\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u0432\u0430 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0440\u044b\u0432\u043a\u0430:\u00a0<\/p>\n<ol>\n<li>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n<li>\n<p>\u0421\u0432\u044f\u0437\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0441 \u0440\u0435\u0430\u043a\u0442\u043e\u043c<\/p>\n<\/li>\n<\/ol>\n<p><a class=\"anchor\" name=\"%D0%92%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D0%BE%D1%82%D0%BF%D0%B8%D1%81%D0%BE%D0%BA%20Reaction\" id=\"\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u043e\u043a Reaction\"><\/a><\/p>\n<h2>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u043e\u043a Reaction<\/h2>\n<p>\u041d\u0430\u0448 \u0444\u0435\u0439\u043a\u043e\u0432\u044b\u0439 mobx \u0443\u043c\u0435\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438, \u043d\u043e \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u043e\u0442 \u043d\u0438\u0445 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043d\u0430\u0448\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0443\u0442\u0435\u0447\u043a\u0430 \u043f\u0430\u043c\u044f\u0442\u0438.<\/p>\n<p>\u041f\u043e\u0440\u0430 \u043d\u0430\u043c \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u0443\u044e \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/core\/reaction.ts#L53\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 Reaction, \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u043e\u0433 \u0438\u0437 mobx.<\/a><\/p>\n<p>Reaction &#8212; \u044d\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439-\u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0445\u0440\u0430\u043d\u0438\u0442 \u0432\u0441\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c.<\/p>\n<p>\u0418\u043c\u0435\u044f \u0432 \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0445 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f. <\/p>\n<p>\u0420\u0435\u0430\u043a\u0446\u0438\u044f \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.<\/p>\n<p>\u041e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 <code>track<\/code>. \u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0441\u0432\u044f\u0437\u043a\u0430.<\/p>\n<pre><code class=\"javascript\">import { globalState } from \"..\/globalstate\";  \/** * @description \u0421\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0430\u043a\u0446\u0438\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0430\u044f \u043a\u043e\u043b\u0431\u0435\u043a,  * \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d \u043a \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c. * \u0420\u0435\u0430\u043a\u0446\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442. * \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043d\u043e\u0439 \u043e\u0442\u043f\u0438\u0441\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 dispose *\/ export class Reaction {  constructor(callback) {    this._callback = callback;    this._observers = new Set([]);    this._disposed = false;  }   \/**   * @description  \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f   *\/  addObserver(observer) {    this._observers.add(observer);  }   \/**   * @description  \u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f   *\/  removeObserver(observer) {    this._observers.delete(observer);  }   \/**   *  @description    *  \u0417\u0430\u043f\u0443\u0441\u043a \u0442\u0440\u0435\u043a\u0430\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u043b\u043b\u0431\u0435\u043a\u0430 \u0441 \u0437\u0430\u043f\u0438\u0441\u044c\u044e \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e   *  \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u043b\u0438 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0440\u0435\u0430\u043a\u0446\u0438\u044e \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0432 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438   *     *  @param trackedCallback \u043a\u043e\u043b\u043b\u0431\u044d\u043a,    *  \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043a \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c   *\/  track(trackedCallback) {   if (this._disposed) return;    \/**   * \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u0430\u043a\u0446\u0438\u0439   *\/   const prevDerivation = globalState.trackingDerivation;    globalState.trackingDerivation = this;   trackedCallback();   globalState.trackingDerivation = prevDerivation;   }   \/**   * @description  \u0417\u0430\u043f\u0443\u0441\u043a \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u043b\u0431\u0435\u043a\u0430   *\/  run() {    return this._callback();  }   \/**   * @description  \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043a \u043e\u0442\u043f\u0438\u0441\u043a\u0435   *  \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043d\u044b\u0445 \u043e\u0442\u043f\u0438\u0441\u043e\u043a   *\/  dispose() {    this._disposed = true;    this._clearObservers();  }   \/**   * @description  \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 dispose, \u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430   *\/  getDispose() {    return this.dispose.bind(this);  }   \/**   * @description  \u0412\u044b\u0437\u043e\u0432 \u0432\u0437\u0430\u0438\u043c\u043d\u043e\u0439 \u043e\u0442\u043f\u0438\u0441\u043a\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439   *\/  _clearObservers() {    this._observers.forEach((observer) => observer.dispose(this));  } }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f Reaction, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c <code>Atom<\/code>.\u00a0 \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b observe, dispose, \u0438 _notify.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 notify \u043f\u0440\u043e\u0431\u0435\u0433\u0430\u0435\u043c \u043f\u043e \u0432\u0441\u0435\u043c \u0440\u0435\u0430\u043a\u0446\u0438\u044f\u043c \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 run \u0443 \u0432\u0441\u0435\u0445 \u0440\u0435\u0430\u043a\u0446\u0438\u0439, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e-\u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c.<\/p>\n<p>\u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 observe \u043c\u044b \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0432 Atom \u0438 \u0432 \u0440\u0435\u0430\u043a\u0446\u0438\u044e.<\/p>\n<p>\u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u0430\u00a0 dispose \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0430\u043a\u0446\u0438\u044e \u0438 \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043e\u0442 \u0440\u0435\u0430\u043a\u0446\u0438\u0438.<\/p>\n<pre><code class=\"javascript\">import { globalState } from \"..\/globalstate\";  \/** *  \u041a\u043b\u0430\u0441\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 *\/ export class Atom {  constructor() {    this._observers = new Set([]);  }   \/**   * @description \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439   * \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u0438   *\/  observe(reaction) {    \/\/ this._observers.add(reaction);    \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u0438         this._observers.add(reaction);    reaction.addObserver(this);  }   \/**   * @description \u0423\u0434\u0430\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439   * \u0423\u0434\u0430\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0440\u0435\u0430\u043a\u0446\u0438\u0438   *\/  dispose(reaction) {    \/\/ this._observers.delete(reaction);    \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u0434 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0440\u0435\u0430\u043a\u0446\u0438\u0438         this._observers.delete(reaction);    reaction.removeObserver(this);  }   _reportObserved() {    if (globalState.trackingDerivation) this.observe(globalState.trackingDerivation);  }   \/**   * @description \u0423\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445   *\/  _notify() {    this._observers.forEach((reaction) => reaction.run());  } }<\/code><\/pre>\n<p>\u0417\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 autorun, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0440\u0435\u0430\u043a\u0446\u0438\u0438. \u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0420\u0435\u0430\u043a\u0446\u0438\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043d\u0430\u0448 <code>callback<\/code>. \u0412 \u043c\u0435\u0442\u043e\u0434 <code>track<\/code>, \u0442\u043e\u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c <code>callback<\/code>. \u0418\u0437 autorun \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c <code>dispose<\/code>, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u043c \u043a\u043e\u0434\u0435.<\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/api\/autorun.ts#L36\" rel=\"noopener noreferrer nofollow\">autroun \u0432 Mobx.<\/a><\/p>\n<pre><code class=\"javascript\">\/\/ autorun.js  import { Reaction } from \".\/Reaction\";  \/** * @description \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Reaction *\/ export function autorun(callback) {  const reaction = new Reaction(callback);  reaction.track(callback);   return reaction.getDispose(); }<\/code><\/pre>\n<p>\u041f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u044d\u0442\u043e \u0432\u0441\u0435, \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u043a\u0443 \u0441 \u0440\u0435\u0430\u043a\u0442\u043e\u043c \u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0432\u043e\u0434\u0438\u0442\u044c \u0438\u0442\u043e\u0433\u0438 \u0438 \u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u0435 \u043a \u0437\u0430\u0440\u043f\u043b\u0430\u0442\u0435 \u0443 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0438\u043a\u0430.<\/p>\n<p><a class=\"anchor\" name=\"%D0%A1%D0%B2%D1%8F%D0%B7%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B8%20%D1%81%20react\" id=\"\u0421\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441 react\"><\/a><\/p>\n<h2>\u0421\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441 react<\/h2>\n<p>Mobx \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u043a\u0438 \u0441 \u0440\u0435\u0430\u043a\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 <a href=\"https:\/\/mobx.js.org\/react-integration.html\" rel=\"noopener noreferrer nofollow\">HOC observer<\/a>. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0442\u0430\u043a\u043e\u0439 \u0436\u0435. <\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx-react-lite\/src\/observer.ts#L60\" rel=\"noopener noreferrer nofollow\">\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/a><\/p>\n<pre><code class=\"javascript\">export function observer(Component) {  return (props) => {    const reactionTrackingRef = useRef(null);    const forceUpdate = useForceUpdate();     if (!reactionTrackingRef.current) {      reactionTrackingRef.current = new Reaction(forceUpdate);    }     useLayoutEffect(() => () => reactionTrackingRef.current.dispose(), []);     let rendering;    reactionTrackingRef.current.track(() => {      rendering = Component(props);    });     return rendering;  }; }<\/code><\/pre>\n<p>\u0412 <code>reactionTrackingRef<\/code> \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0440\u0435\u0430\u043a\u0446\u0438\u044f, \u0435\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043c\u0430\u0443\u043d\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n<p>\u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 <code>forceUpdate<\/code>, \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0441 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u0445\u0443\u043a\u0430, \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043e\u043d\u0430 \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0435\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0432 <code>useLayoutEffect<\/code> \u043c\u044b \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0443\u043c\u0440\u0435\u0442.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435, \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c jsx \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n<p>\u0418 \u0432 \u043c\u0435\u0442\u043e\u0434 <code>track<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0443\u0442 \u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0441\u0432\u044f\u0437\u043a\u0430 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u0441 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435.<\/p>\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0442\u0443\u0442 \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u043e\u0439 \u0440\u0435\u0430\u043a\u0442 \u043d\u043e\u0434\u044b, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u0432 observer \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0430\u043a \u043e\u0431\u044b\u043a\u043d\u043e\u0432\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0448 HOC \u043d\u0435\u044f\u0432\u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438:<\/p>\n<p>\u0412 <code>observer<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx-react-lite\/src\/observer.ts#L104\" rel=\"noopener noreferrer nofollow\">useObserver<\/a>. \u0418 \u0432\u043e\u0442 \u0432 \u043d\u0435\u043c \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/f0e066f427d573cbef4b92f3310eb069c3aca205\/packages\/mobx-react-lite\/src\/useObserver.ts#L43\" rel=\"noopener noreferrer nofollow\">Reaction<\/a>. \u041d\u0430\u0448\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0447\u0435\u043c-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 HOC.<\/p>\n<p>\u0412 HOC \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a <code>useForceUpdate<\/code>.<\/p>\n<p>\u0412\u043e\u0442 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f.\u00a0<\/p>\n<pre><code class=\"javascript\">import { useState } from \"react\";  export function useForceUpdate() {  const [, updateState] = useState({});  return () => updateState({}); }<\/code><\/pre>\n<p>\u041f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 <code>setState<\/code> \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u0438 \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0440\u0430\u0437\u043d\u0430\u044f,\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440.<\/p>\n<p><a class=\"anchor\" name=\"%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20c%D0%B2%D1%8F%D0%B7%D0%BA%D0%B8%20%D1%81%20React\" id=\"\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b c\u0432\u044f\u0437\u043a\u0438 \u0441 React\"><\/a><\/p>\n<h3>\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b c\u0432\u044f\u0437\u043a\u0438 \u0441 React<\/h3>\n<p>\u0414\u043b\u044f \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<pre><code class=\"javascript\">import React from \"react\"; import { render } from \"react-dom\"; import { observable } from \".\/observable\"; import { observer } from \".\/observer\";  const counterObject = observable({ counter: 1 });  function Counter() {  return (    &lt;div>      &lt;button onClick={() => counterObject.counter--}>-&lt;\/button>      {counterObject.counter}      &lt;button onClick={() => counterObject.counter++}>+&lt;\/button>    &lt;\/div>  ); }  const ObservableCounter = observer(Counter);  render(&lt;ObservableCounter \/>, document.getElementById(\"root\"));<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/mobx-react-example-9t0stt?file=\/index.js:0-528\" rel=\"noopener noreferrer nofollow\"><u>\u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435<\/u><\/a>.<\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u0434\u0435\u0442\u0438\u0449\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u044b\u043c. \u0423 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043d\u0430\u0448\u0430 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f Mobx \u0438 \u0430\u0434\u0430\u043f\u0442\u0435\u0440 \u043a \u0440\u0435\u0430\u043a\u0442\u0443.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044e, \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0435 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0431\u043b\u0438\u0437\u043a\u0443\u044e \u043a \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0443 \u0432\u0435\u0440\u0441\u0438\u044e.<\/p>\n<p><a class=\"anchor\" name=\"%D0%A7%D1%82%D0%BE%20%D0%BD%D0%B5%20%D0%BF%D0%BE%D0%BF%D0%B0%D0%BB%D0%BE%20%D0%B2%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D1%83?\" id=\"\u0427\u0442\u043e \u043d\u0435 \u043f\u043e\u043f\u0430\u043b\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443?\"><\/a><\/p>\n<h2>\u0427\u0442\u043e \u043d\u0435 \u043f\u043e\u043f\u0430\u043b\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443?<\/h2>\n<p><a class=\"anchor\" name=\"%D0%9F%D0%BE%D0%BB%D0%BD%D0%BE%D1%86%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5%20Observable-%D1%81%D1%83%D1%89%D0%BD%D0%BE%D1%81%D1%82%D0%B8\" id=\"\u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 Observable-\u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438\"><\/a><\/p>\n<h3>\u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 Observable-\u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438  <\/h3>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u043b\u0438 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043f\u0435\u0440\u0435\u0434 \u043a\u0430\u0436\u0434\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 Observable \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0442\u043e \u043c\u043e\u0433\u043b\u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u0434\u0430 \u0432 \u0440\u0430\u0437\u044b \u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e Mobx \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u043b\u0441\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f c \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438 \u0438 \u0442\u0434.<\/p>\n<h4>\u041e\u0431\u044a\u0435\u043a\u0442\u044b   <\/h4>\n<p>\u0412 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0435\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/p>\n<ol>\n<li>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/types\/observableobject.ts#L219\" rel=\"noopener noreferrer nofollow\"><u>\u043c\u0435\u0442\u043e\u0434\u0430 has<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/types\/observableobject.ts#L312\" rel=\"noopener noreferrer nofollow\"><u>\u0432\u044b\u0437\u043e\u0432a defineProperty<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/types\/observableobject.ts#L492\" rel=\"noopener noreferrer nofollow\"><u>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f<\/u><\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/types\/observableobject.ts#L627\" rel=\"noopener noreferrer nofollow\"><u>\u0412\u044b\u0437\u043e\u0432\u0430 ownKeys \u043c\u0435\u0442\u043e\u0434\u0430<\/u><\/a><\/p>\n<\/li>\n<\/ol>\n<h4>\u041c\u0430\u0441\u0441\u0438\u0432\u044b<\/h4>\n<p>\u0418\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432<\/p>\n<p>Mobx \u043f\u043e\u0447\u0442\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 \u0434\u043e\u0431\u0430\u0432\u0438\u043b <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/types\/observablearray.ts#L413\" rel=\"noopener noreferrer nofollow\"><u>\u0441\u0432\u043e\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e<\/u><\/a>, \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u0442\u043e \u044d\u0442\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0434\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<h4>Map \u0438 Set  <\/h4>\n<p>Map \u0438 Set \u043c\u044b \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u0441\u0442\u0430\u043b\u0438 \u0434\u0435\u043b\u0430\u0442\u044c, \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432 \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0445\u0432\u0430\u0442\u0430\u0435\u0442. \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u0443\u044e \u0438\u0445 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043b\u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u0432 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0439 Map \u0438\u043b\u0438 Set, \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u043b\u0438 \u044d\u0442\u043e \u0440\u0430\u043d\u044c\u0448\u0435<\/p>\n<p>\u0412 Mobx \u0434\u043b\u044f <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/types\/observablemap.ts#L92\" rel=\"noopener noreferrer nofollow\"><u>Map<\/u><\/a> \u0438 <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/types\/observableset.ts\" rel=\"noopener noreferrer nofollow\"><u>Set<\/u><\/a> \u0442\u043e\u0436\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p><a class=\"anchor\" name=\"Computed%20Values\" id=\"Computed Values\"><\/a><\/p>\n<h3>Computed Values  <\/h3>\n<p>\u042f \u043d\u0435 \u0441\u0442\u0430\u043b \u0432 \u0441\u0442\u0430\u0442\u044c\u044e \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u0442\u043e\u043c \u0447\u0442\u043e \u0441\u0442\u0430\u0442\u044c\u044f \u0438\u0442\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u0438\u043d\u043d\u0430\u044f.<\/p>\n<p>\u041f\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 computed values \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u0433\u0438\u0431\u0440\u0438\u0434 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0440\u0435\u0430\u043a\u0446\u0438\u0438<\/p>\n<p>\u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0440\u0435\u0430\u043a\u0446\u0438\u0439 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0443 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u043d\u043e \u0438\u0437 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u043e\u043d\u043e \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0438\u0442 \u0437\u0430\u043f\u0443\u0441\u043a \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0430 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u0436\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043e\u0442 \u0441\u0435\u0431\u044f \u0440\u0435\u0430\u043a\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u0442\u0430\u043a\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/05f\/f11\/b0f\/05ff11b0f32fcaaa113bd3541e2e60f2.png\" width=\"1449\" height=\"1075\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/05f\/f11\/b0f\/05ff11b0f32fcaaa113bd3541e2e60f2.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u044b\u0432\u0435\u0434\u0438\u0442\u0435 \u0438\u0445 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0438 \u0432\u044b \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0439\u043c\u0435\u0442\u0435 \u043f\u043e \u043a\u0430\u043a\u043e\u043c\u0443 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 \u043e\u043d\u0438 \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u044b.<\/p>\n<p>\u0412\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b Mobx \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p><a class=\"anchor\" name=\"Actions\" id=\"Actions\"><\/a><\/p>\n<h3>Actions<\/h3>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/core\/action.ts#L34\" rel=\"noopener noreferrer nofollow\"><u>\u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 Action<\/u><\/a><\/p>\n<p>Action \u0432 mobx \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440, \u0434\u043b\u044f \u043d\u0438\u0445 \u043d\u0435\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438.\u00a0<\/p>\n<p>\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0442\u043e\u0436\u0435 \u043d\u0435 \u0441\u0442\u0430\u043b \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432 \u0441\u0442\u0430\u0442\u044c\u044e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0443\u043f\u0435\u0440 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0435 \u0430\u043f\u0438 <a href=\"https:\/\/mobx.js.org\/api.html#transaction\" rel=\"noopener noreferrer nofollow\"><u>\u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0439<\/u><\/a>. \u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u0442\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f.\u00a0<\/p>\n<p>\u0422\u0440\u0430\u043d\u0437\u0430\u043a\u0446\u0438\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043e\u0442 \u043d\u0438\u0445 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437. \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0431\u0430\u0442\u0447\u0438\u043d\u0433.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0430\u0442\u0447\u0438\u043d\u0433\u0430 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p>\u041d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0440\u0435\u0430\u043a\u0446\u0438\u0438, \u0430 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0437\u043e\u0432 \u0440\u0435\u0430\u043a\u0446\u0438, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0438\u0445 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0438\u0445 \u0437\u0430 1 \u0440\u0430\u0437.\u00a0<\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"typescript\">class ExampleSuperClass {  @observable count: number = 0;   @action  increment() {    this.count++;    this.count++;    this.count++;  } }  const esc = new ExampleSuperClass();  autorun(() => {  console.log(esc.count); \/\/ \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f 2 \u0440\u0430\u0437\u0430 0\u20263 });  esc.increment();<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u044d\u0442\u043e:  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d43\/402\/fd2\/d43402fd23eb87b43be82b02a7d388ae.png\" width=\"731\" height=\"113\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d43\/402\/fd2\/d43402fd23eb87b43be82b02a7d388ae.png\"\/><figcaption><\/figcaption><\/figure>\n<p>Action \u0441\u043e\u0431\u0440\u0430\u043b \u0432\u0441\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043a\u0443\u0447\u043a\u0443 \u0438 \u0441\u0434\u0435\u043b\u0430\u043b \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u0432\u0430\u043b\u0430\u0441\u044c \u0432\u0441\u0435\u0433\u043e 1 \u0440\u0430\u0437.  <\/p>\n<p><a class=\"anchor\" name=\"%D0%98%D1%82%D0%BE%D0%B3%D0%B8\" id=\"\u0418\u0442\u043e\u0433\u0438\"><\/a><\/p>\n<h2>\u0418\u0442\u043e\u0433\u0438  <\/h2>\n<p>\u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u0441\u043e\u0431\u0440\u0430\u0432 \u0432\u043e\u0435\u0434\u0438\u043d\u043e \u0432\u0441\u0435, \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443.\u00a0<\/p>\n<p>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u0432 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0438 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e Mobx \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432.<\/p>\n<p><a href=\"https:\/\/github.com\/kybasas\/mobx-explainer\" rel=\"noopener noreferrer nofollow\"><u>\u0412\u043e\u0442 \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043a\u043e\u0434 \u043d\u0430\u0448\u0435\u0433\u043e \u0434\u0435\u0442\u0438\u0449\u0430<\/u><\/a>, \u0432 \u043d\u0435\u043c \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u044b, \u0442\u0435\u0441\u0442\u044b \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043c\u0435\u0442\u043e\u0434\u0443.<\/p>\n<h2>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f, <a href=\"https:\/\/t.me\/devreverza\" rel=\"noopener noreferrer nofollow\">devreverza<\/a> \u043f\u043e\u043c\u043e\u0433 \u0435\u0435 \u043f\u0440\u0438\u0447\u0435\u0441\u0430\u0442\u044c. \u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u0435\u0433\u043e \u0442\u0433-\u043a\u0430\u043d\u0430\u043b, \u0442\u0430\u043c \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0443 \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432.<\/p>\n<h2>\u0421\u0441\u044b\u043b\u043a\u0438<\/h2>\n<ul>\n<li>\n<p><a href=\"https:\/\/mobx.js.org\/getting-started\" rel=\"noopener noreferrer nofollow\">Getting-started<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/mobx.js.org\/the-gist-of-mobx.html\" rel=\"noopener noreferrer nofollow\">the-gist-of-Mobx<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/mobx.js.org\/api.html\" rel=\"noopener noreferrer nofollow\">Mobx Api<\/a> <\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/codesandbox.io\/s\/mobx-work-example-forked-d7s1hf?file=\/src\/index.js\" rel=\"noopener noreferrer nofollow\">\u041f\u0435\u0440\u0432\u0430\u044f \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b mobx<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/codesandbox.io\/s\/svyazyvanie-primer-dlya-mobx-kyq04n?file=\/src\/index.js\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/codesandbox.io\/s\/simple-mobx-todolist-forked-i2c1lf?file=\/index.js\" rel=\"noopener noreferrer nofollow\">ObservableValue<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/codesandbox.io\/s\/minimal-mobx-react-project-forked-xrvmry?file=\/index.js\" rel=\"noopener noreferrer nofollow\">ObservableObject<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/codesandbox.io\/s\/minimal-mobx-react-project-forked-e6pj3x?file=\/utils.js\" rel=\"noopener noreferrer nofollow\">ObservableArray \u0438 Atom<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/codesandbox.io\/s\/mobx-react-example-9t0stt?file=\/index.js:0-528\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0441 React<\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/689374\/\"> https:\/\/habr.com\/ru\/post\/689374\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435 \u043c\u043e\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 Mobx \u043d\u0430\u0447\u0430\u043b\u043e\u0441\u044c \u0441 \u0443\u0434\u0438\u0432\u043b\u0435\u043d\u0438\u044f. \u042f \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043b \u0432\u0441\u044e \u043c\u0430\u0433\u0438\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0437\u0430\u0434\u0430\u0432\u0430\u043b \u0441\u0435\u0431\u0435 \u0432\u043e\u043f\u0440\u043e\u0441: \u201c\u0410 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e?\u201d. \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0432 \u043d\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u043e\u0434\u043a\u0430\u043f\u043e\u0442\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 JS \u0438\u043b\u0438 Mobx \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u044f\u0437\u044b\u043a\u0435.\u00a0<\/p>\n<p>\u0418 \u0432\u043e\u0442, \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0432 3 \u043c\u0435\u0441\u044f\u0446\u0430 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445, \u044f \u0440\u0430\u0437\u0432\u0435\u044f\u043b \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u043c\u0430\u0433\u0438\u044e. Mobx \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 JS \u0438 \u0434\u0430\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0432\u0437\u043e\u0440\u0432\u0430\u043b\u0441\u044f.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439 Mobx \u0441 \u043d\u0443\u043b\u044f, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0441\u0432\u044f\u0436\u0435\u043c \u0435\u0433\u043e \u0441 React, \u0447\u0435\u0440\u0435\u0437 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 HOC observer. \u0412 \u043a\u043e\u043d\u0446\u0435 \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0449\u0435\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e\u043c \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u0438\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e Mobx, \u043d\u043e \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432.<\/p>\n<h2>\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p><a href=\"#under_hood\" rel=\"noopener noreferrer nofollow\">\u0417\u0430\u0433\u043b\u044f\u043d\u0435\u043c Mobx \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#mobx_structure\" rel=\"noopener noreferrer nofollow\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u043e\u0438\u0442 Mobx.<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%81%D0%B2%D1%8F%D0%B7%D1%8C%20%D0%BD%D0%B0%D0%B1%D0%BB%D1%8E%D0%B4%D0%B0%D0%B5%D0%BC%D1%8B%D1%85%20%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B9\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u044f\u0437\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D1%87%D1%82%D0%BE%20%D0%BC%D1%8B%20%D1%81%20%D0%B2%D0%B0%D0%BC%D0%B8%20%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D0%BC\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c?<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%BA%D1%80%D0%B0%D1%82%D0%BA%D0%BE%D0%B5%20%D0%BE%D0%B1%D1%8A%D1%8F%D1%81%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BB%D0%BE%D0%B3%D0%B8%D0%BA%D0%B8%20%D1%81%D0%B2%D1%8F%D0%B7%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F\" rel=\"noopener noreferrer nofollow\">\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 &#171;\u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f&#187;<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a href=\"#%D0%92%D0%B0%D1%88%20Mobx\" rel=\"noopener noreferrer nofollow\">\u0412\u0430\u0448 Mobx<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%93%D0%BB%D0%BE%D0%B1%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5%20%D1%81%D0%BE%D1%81%D1%82%D0%BE%D1%8F%D0%BD%D0%B8%D0%B5\" rel=\"noopener noreferrer nofollow\">\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Autorun\" rel=\"noopener noreferrer nofollow\">Autorun<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#ObservableValue\" rel=\"noopener noreferrer nofollow\">ObservableValue<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20ObservableValue\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableValue<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#ObservableObject\" rel=\"noopener noreferrer nofollow\">ObservableObject<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D1%80%D0%BE%D0%BA%D1%81%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%98%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%20enhancer%20%D0%B2%20ObservableValue\" rel=\"noopener noreferrer nofollow\">\u0418\u0437\u043c\u0435\u043d\u044f\u0435\u043c enhancer \u0432 ObservableValue<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20ObservableObject\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableObject  <\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#ObservableArray\" rel=\"noopener noreferrer nofollow\">ObservableArray<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9F%D1%80%D0%BE%D0%BA%D1%81%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%B0\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%9E%D0%B1%D0%BD%D0%BE%D0%B2%D0%BB%D1%8F%D0%B5%D0%BC%20enhancer%20%D0%B2%20ObservableValue\" rel=\"noopener noreferrer nofollow\">\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c enhancer \u0432 ObservableValue  <\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Atom\" rel=\"noopener noreferrer nofollow\">Atom<\/a>  <\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20ObservableArray\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b ObservableArray  <\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%92%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C%20%D0%BE%D1%82%D0%BF%D0%B8%D1%81%D0%BE%D0%BA%20Reaction\" rel=\"noopener noreferrer nofollow\">\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u043f\u0438\u0441\u043e\u043a Reaction<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%A1%D0%B2%D1%8F%D0%B7%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D0%B8%20%D1%81%20react\" rel=\"noopener noreferrer nofollow\">\u0421\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0441 react<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#%D0%94%D0%B5%D0%BC%D0%BE%D0%BD%D1%81%D1%82%D1%80%D0%B0%D1%86%D0%B8%D1%8F%20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B%20c%D0%B2%D1%8F%D0%B7%D0%BA%D0%B8%20%D1%81%20React\" rel=\"noopener noreferrer nofollow\">\u0414\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b c\u0432\u044f\u0437\u043a\u0438 \u0441 React<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a href=\"#%D0%A7%D1%82%D0%BE%20%D0%BD%D0%B5%20%D0%BF%D0%BE%D0%BF%D0%B0%D0%BB%D0%BE%20%D0%B2%20%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA%D1%83?\" rel=\"noopener noreferrer nofollow\">\u0427\u0442\u043e \u043d\u0435 \u043f\u043e\u043f\u0430\u043b\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443?<\/a><\/p>\n<ul>\n<li>\n<p><a href=\"#%D0%9F%D0%BE%D0%BB%D0%BD%D0%BE%D1%86%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5%20Observable-%D1%81%D1%83%D1%89%D0%BD%D0%BE%D1%81%D1%82%D0%B8\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 Observable-\u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Computed%20Values\" rel=\"noopener noreferrer nofollow\">Computed Values  <\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"#Actions\" rel=\"noopener noreferrer nofollow\">Actions<\/a><\/p>\n<\/li>\n<\/ul>\n<p><a href=\"#%D0%98%D1%82%D0%BE%D0%B3%D0%B8\" rel=\"noopener noreferrer nofollow\">\u0418\u0442\u043e\u0433\u0438<\/a><\/p>\n<h2>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u044f<\/h2>\n<p>\u0421\u0442\u0430\u0442\u044c\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430 \u043d\u0430 \u043b\u044e\u0434\u0435\u0439, \u0440\u0430\u0431\u043e\u0442\u0430\u0432\u0448\u0438\u0445 \u0441 Mobx, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u0432\u043e\u0442 \u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/p>\n<p><a href=\"https:\/\/mobx.js.org\/getting-started\" rel=\"noopener noreferrer nofollow\">Getting-started<\/a>, <a href=\"https:\/\/mobx.js.org\/the-gist-of-mobx.html\" rel=\"noopener noreferrer nofollow\">the-gist-of-Mobx<\/a>, <a href=\"https:\/\/mobx.js.org\/api.html\" rel=\"noopener noreferrer nofollow\">Mobx Api<\/a><\/p>\n<p>\u041f\u0438\u0441\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043c\u044b, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u0430\u043c\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0443\u043c. \u041d\u0430\u0448\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0433\u0434\u0435-\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u043e\u0439 \u0438 \u043d\u0435 \u0433\u043e\u0442\u043e\u0432\u043e\u0439 \u043a \u043f\u0440\u043e\u0434\u0443.<\/p>\n<p><a class=\"anchor\" name=\"under_hood\" id=\"under_hood\"><\/a><\/p>\n<h2>\u0417\u0430\u0433\u043b\u044f\u043d\u0435\u043c Mobx \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430, \u043f\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c \u0437\u0430 Mobx. <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: <\/p>\n<pre><code class=\"javascript\">import { observable, autorun } from \"mobx\";  const counter = observable({ count: 0 });  console.log(counter);  function listener()     console.log(counter.count) }  autorun(listener);  function increment() {   counter.count++; }  \/\/\u043a\u0430\u0436\u0434\u044b\u0435 \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a setInterval(increment, 500);<\/code><\/pre>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n<figure class=\"full-width\"><figcaption>\u041a\u0430\u0436\u0434\u044b\u0435 \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u043a\u0440\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0447\u0435\u0442\u0447\u0438\u043a.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/codesandbox.io\/s\/mobx-work-example-forked-d7s1hf?file=\/src\/index.js\" rel=\"noopener noreferrer nofollow\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0435.<\/a><\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u043c \u0432 counter \u043e\u0431\u044a\u0435\u043a\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u0432 observable \u0444\u0443\u043d\u043a\u0446\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p>observable \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c <code>listener<\/code>, \u043e\u0431\u044b\u043a\u043d\u043e\u0432\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u043e\u043b\u0435 count.<\/p>\n<\/li>\n<li>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>listener<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432 autorun \u0438 \u0443\u0436\u0435 \u0432 autorun \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0441\u0432\u044f\u0437\u043a\u0430 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u043f\u043e\u043b\u044f count \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>listener<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 count \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f , \u0431\u0443\u0434\u0435\u0442 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>listener<\/code>.   <\/p>\n<\/li>\n<\/ul>\n<h3>\u0427\u0442\u043e \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442?  <\/h3>\n<p><a class=\"anchor\" name=\"mobx_structure\" id=\"mobx_structure\"><\/a><\/p>\n<h4> \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u0440\u043e\u0438\u0442 Mobx.<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0432\u044b\u0437\u043e\u0432\u0435\u043c\u00a0 <code>console.log(counter)<\/code>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u0442\u0430\u043a\u043e\u0439 Proxy-\u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u043e\u0436\u043d\u043e. \u0421\u0442\u043e\u043b\u044c\u043a\u043e Mobx \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0435\u0433\u043e \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f.<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 \u043e\u0431\u0435\u0440\u043d\u0443\u0442 \u0432 Proxy, \u0432 \u043d\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u043e\u043b\u0435 <code>count<\/code>. \u041f\u0440\u0438\u0447\u0435\u043c, \u043e\u043d\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437. \u0412\u043d\u0443\u0442\u0440\u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 values, \u043a\u043e\u043f\u0438\u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043a\u0430\u0436\u0434\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u043e \u0432 <code>ObservableValue<\/code>.<\/p>\n<p><code>ObservableValue<\/code> \u044d\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438. \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0445\u0440\u0430\u043d\u0438\u043c\u043e\u043c\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e. \u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 \u043d\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u0440\u0433\u0430\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438.<\/p>\n<p>\u0421\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 <code>ObservableValue<\/code> \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0420\u0435\u0430\u043a\u0446\u0438\u0439 (<code>Reaction<\/code>). <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f listener, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b\u0430\u0441\u044c \u0432 autorun. <\/p>\n<figure class=\"\"><figcaption>listener<\/figcaption><\/figure>\n<p>\u0420\u0435\u0430\u043a\u0446\u0438\u0438 \u0442\u043e\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u0430\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c, \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0441\u0435\u0431\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0440\u0435\u0430\u043a\u0446\u0438\u0438, \u0430 \u0440\u0435\u0430\u043a\u0446\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043d\u0443\u044e \u043e\u0442\u043f\u0438\u0441\u043a\u0443.<\/p>\n<figure class=\"\"><figcaption><\/figcaption><\/figure>\n<p><a class=\"anchor\" name=\"%D1%81%D0%B2%D1%8F%D0%B7%D1%8C%20%D0%BD%D0%B0%D0%B1%D0%BB%D1%8E%D0%B4%D0%B0%D0%B5%D0%BC%D1%8B%D1%85%20%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B9\" id=\"\u0441\u0432\u044f\u0437\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439\">\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439&#187;<\/a><\/p>\n<h4>\u0421\u0432\u044f\u0437\u044c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439<\/h4>\n<p>\u041c\u044b \u0441 \u0432\u0430\u043c\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u043b\u0438 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442 Mobx, \u043f\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u043b\u0438 \u0437\u0430 \u0442\u0435\u043c \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043e\u043d \u0441\u0442\u0440\u043e\u0438\u0442.\u00a0\u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u0432\u0441\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0438 \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0443\u0436\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b. \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0437\u0430\u043a\u043e\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441 &#8212;\u00a0\u0430 \u043a\u0430\u043a \u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u044f \u044d\u0442\u0430 \u0441\u0432\u044f\u0437\u044c \u0432\u043d\u0443\u0442\u0440\u0438? <\/p>\n<p>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Mobx \u0432 \u0440\u0430\u0431\u043e\u0442\u0435, \u043c\u044b \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u0442\u043e \u044f\u0432\u043d\u043e,\u00a0\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 \u043d\u0430\u0441. \u042d\u0442\u043e \u0435\u0435 \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0444\u0438\u0448\u043a\u0430, \u043e\u043d\u0430 \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0432\u0441\u044e \u0441\u0430\u043c\u0443\u044e \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u0438 \u0433\u0440\u044f\u0437\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0435\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u043a\u043e\u0434\u0435, \u0430 \u043d\u0435 \u043d\u0430 \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u0435.\u00a0<\/p>\n<p>\u041d\u043e\u00a0 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043c\u0430\u0433\u0438\u0438 \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442. \u0415\u0441\u043b\u0438 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043e\u0434\u0430 \u043c\u044b \u0437\u0430\u0431\u0443\u0434\u0438\u043c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0430\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>listener<\/code> \u0432\u00a0 <code>autorun<\/code>, \u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442. \u0412\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u201c\u0441\u043b\u0443\u0448\u0430\u0442\u044c\u201d \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044b \u0432 autorun \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438.<\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440. \u041c\u044b \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e \u0437\u0430\u0431\u044b\u043b\u0438 \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c <code>listener<\/code> \u0432 <code>autorun<\/code>.\u00a0\u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043f\u0443\u0441\u0442\u043e \u0438 setInterval \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0445\u043e\u043b\u043e\u0441\u0442\u0443\u044e.<\/p>\n<pre><code class=\"javascript\">import { observable, autorun } from \"mobx\";  const counter = observable({ count: 0 });  console.log(counter);  function listener() {   console.log(counter.count); }  function increment() {   counter.count++; }  setInterval(increment, 500);<\/code><\/pre>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u044b\u0432\u043e\u0434, \u0447\u0442\u043e \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438 \u0441 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0435\u0440\u0442\u043a\u0430. \u0412 Mobx \u044d\u0442\u043e <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/api\/autorun.ts#L36\" rel=\"noopener noreferrer nofollow\">autorun<\/a> \u0438 <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/core\/reaction.ts#L53\" rel=\"noopener noreferrer nofollow\">Reaction<\/a>. \u0412 Mobx-react \u044d\u0442\u043e HOC <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx-react-lite\/src\/observer.ts#L60\" rel=\"noopener noreferrer nofollow\">observer<\/a>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0440\u044b\u0442\u044c\u0441\u044f \u0432 \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445, \u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e autorun \u0438 observer \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0432\u0441\u0435 \u0442\u043e\u0442 \u0436\u0435 Reaction.<\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx\/src\/api\/autorun.ts#L69\" rel=\"noopener noreferrer nofollow\">\u0412 autorun \u0442\u0443\u0442. <\/a><\/p>\n<p>\u0412 HOC observer \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/main\/packages\/mobx-react-lite\/src\/observer.ts#L104\" rel=\"noopener noreferrer nofollow\">useObserver<\/a>. <\/p>\n<p><a href=\"https:\/\/github.com\/mobxjs\/mobx\/blob\/f0e066f427d573cbef4b92f3310eb069c3aca205\/packages\/mobx-react-lite\/src\/useObserver.ts#L43\" rel=\"noopener noreferrer nofollow\">\u0418 \u0432\u043e\u0442 \u0432 \u043d\u0435\u043c \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f Reaction<\/a>.<\/p>\n<p>Reaction &#8212; \u043a\u043b\u044e\u0447\u0435\u0432\u0430\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<p><a class=\"anchor\" name=\"%D0%BA%D1%80%D0%B0%D1%82%D0%BA%D0%BE%D0%B5%20%D0%BE%D0%B1%D1%8A%D1%8F%D1%81%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F%20%D0%BB%D0%BE%D0%B3%D0%B8%D0%BA%D0%B8%20%D1%81%D0%B2%D1%8F%D0%B7%D1%8B%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F\" id=\"\u043a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f\">\u043e\u0433\u0438\u043a\u0438 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f&#187;><\/a><\/p>\n<h4>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u201c\u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f\u201d <\/h4>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 autorun.<\/p>\n<p>\u041c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e autorun \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c. \u041e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0435\u0435.\u00a0\u0423 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0433\u0435\u0442\u0442\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u043a \u0441\u0435\u0431\u0435. <\/p>\n<p>\u041d\u0430\u0438\u0432\u043d\u044b\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f let globalListener = null;  const observableValue = {  internalListener: null,  \/\/ \u043c\u0435\u0442\u043e\u0434 \u043e\u0442\u0434\u0430\u044e\u0449\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f  get() {    this.internalListener = globalListener;    return \"some value\";  } };  \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e function autorun(listener) {  globalListener = listener;  listener(); }  \/\/------------------------------------------- \/\/ \u043a\u043b\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u0434  function listener() {  console.log(observableValue.get()); }  autorun(listener);  console.log(observableValue.internalListener === listener); \/\/Listener \u043f\u043e\u043f\u0430\u043b \u0432\u043d\u0443\u0442\u0440\u044c observableValue<\/code><\/pre>\n<p><a href=\"https:\/\/codesandbox.io\/s\/svyazyvanie-primer-dlya-mobx-kyq04n?file=\/src\/index.js\" rel=\"noopener noreferrer nofollow\">\u041f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430<\/a>.   <\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0414\u0430\u043b\u0435, \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0435\u0439 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0440\u0438\u0441\u0443\u043d\u043a\u0430, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e <code>autorun<\/code>.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b.<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u043b\u0438 \u0437\u0430 Mobx, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0432\u043e \u0447\u0442\u043e \u043e\u043d\u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0430\u0448 \u043a\u043e\u0434<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b\u0438\u0441\u044c \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u043c\u0435\u044f \u0432\u044b\u0448\u0435\u0438\u0437\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044e \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043d\u0430\u043c api \u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p><a class=\"anchor\" name=\"%D1%87%D1%82%D0%BE%20%D0%BC%D1%8B%20%D1%81%20%D0%B2%D0%B0%D0%BC%D0%B8%20%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D0%BC\" id=\"\u0447\u0442\u043e \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c\"> \u0441\u0434\u0435\u043b\u0430\u0435\u043c&#187;><\/a><\/p>\n<h2>\u0427\u0442\u043e \u043c\u044b \u0441 \u0432\u0430\u043c\u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c?  <\/h2>\n<p>\u041c\u044b \u0432\u043e\u0441\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u0430\u043f\u0438 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e Mobx.<\/p>\n<p>\u041f\u0440\u0438\u043a\u0438\u043d\u0435\u043c, \u043a\u0430\u043a\u043e\u0435 api \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a \u043a\u043e\u043d\u0446\u0443 \u0441\u0442\u0430\u0442\u044c\u044e.<\/p>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c.\u00a0<\/p>\n<p>\u041d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u043e, \u043d\u043e <code>observableValue<\/code> \u043d\u0443\u0436\u0435\u043d \u0431\u0443\u0434\u0435\u0442 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440.<\/p>\n<p><a href=\"https:\/\/mobx.js.org\/api.html#observablebox\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0430\u043b\u043e\u0433 \u0438\u0437 Mobx<\/a>: <\/p>\n<pre><code class=\"javascript\">const value = observableValue(0)  const increment = () => value.set(value.get() + 1) const listener = () => console.log(value.get()) \/\/ \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 1...2...3...4  autorun(listener)  setInterval(increment,500)<\/code><\/pre>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442\u044b \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u0430\u044f \u0432\u0435\u0449\u044c \u0432 \u043d\u0430\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435, \u0438 \u0432\u0430\u0436\u043d\u043e \u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u043f\u043e\u043b\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c\u0438.<\/p>\n<p> <a href=\"https:\/\/mobx.js.org\/api.html#observableobject\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0430\u043b\u043e\u0433 \u0438\u0437 mobx: <\/a><\/p>\n<pre><code class=\"javascript\">const obj = observableObject({count: 0})  const increment = () => obj.count++ const listener = () => console.log(obj.count) \/\/ \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 1...2...3...4  autorun(listener)  setInterval(increment, 500)<\/code><\/pre>\n<p>\u0421 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f, \u0447\u0442\u043e \u0438 \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438. <\/p>\n<p><a href=\"https:\/\/mobx.js.org\/api.html#observablearray\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0430\u043b\u043e\u0433 \u0438\u0437 mobx:<\/a><\/p>\n<pre><code class=\"javascript\">const arr = observableArray([])  const add = () => arr.push(1) const listener = () => console.log(arr) \/\/ \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 [1]...[1, 1]...[1,1,1]...[1,1,1,1]  autorun(listener)  setInterval(add, 500)<\/code><\/pre>\n<p>\u0423\u0442\u0435\u0447\u043a\u0438 \u043f\u0430\u043c\u044f\u0442\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0438\u043a\u043e\u043c\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u043e\u0442\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e.  <\/p>\n<pre><code class=\"javascript\">const arr = observableArray([])  const add = () => arr.push(1) const listener = () => console.log(arr) \/\/ \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 [1]...[1, 1]...[1,1,1]  const dispose = autorun(listener)  setInterval(add, 500)  setTimeout(dispose, 1600) \/\/ \u043f\u043e\u0441\u043b\u0435 3 \u0432\u044b\u0437\u043e\u0432\u0430 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043e\u0442\u043f\u0438\u0441\u043a\u0430 \u0438 listener \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u0445\u043e\u0442\u044f add \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0432\u0445\u043e\u043b\u043e\u0441\u0442\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c <\/code><\/pre>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u043c\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0438 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445. <\/p>\n<p><a href=\"https:\/\/mobx.js.org\/react-integration.html\" rel=\"noopener noreferrer nofollow\">\u0410\u043d\u0430\u043b\u043e\u0433 \u0438\u0437 mobx<\/a>: <\/p>\n<pre><code class=\"javascript\">const obj = observableObject({count: 0}) setInterval(() => obj.count++, 500)  const App = () => {    return &lt;div>{obj.count}&lt;\/div> \/\/ \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0435 500 \u043c\u0441 }  const ObservabledApp = observer(App) \/\/observer \u0441\u0432\u044f\u0436\u0435\u0442 \u043f\u043e\u043b\u0435 count c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c   render(&lt;ObservabledApp \/>, \u201c#root\u201d)<\/code><\/pre>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e\u0435 \u0430\u043f\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p>\u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432\u0437\u044f\u0442\u044b \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u043c\u044b \u043f\u043e\u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e \u043d\u0430\u043f\u0438\u0448\u0435\u043c. \u041f\u0435\u0440\u0435\u0434 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/p>\n<ol>\n<li>\n<p><code>ObservableValue<\/code> &#8212; \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043f\u043e\u043b\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u044f\u0432\u043d\u043e \u043c\u044b \u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440.<\/p>\n<\/li>\n<li>\n<p><code>ObservableObject<\/code> &#8212; \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435 \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 <code>ObservableValue<\/code>, \u0432\u0441\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043b\u044f\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>ObservableObject<\/code> \u043f\u043e\u0440\u0443\u0447\u0430\u0435\u0442 <code>ObservableValue<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>ObservableArray<\/code> &#8212; \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432, \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u0441\u044f \u0432 <code>ObservableValue<\/code>. <code>ObservableArray<\/code> \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u043e\u0440\u0443\u0447\u0430\u0435\u0442 <code>ObservableValue<\/code>.<\/p>\n<\/li>\n<li>\n<p>Atom &#8212; \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e <code>ObservableValue<\/code> \u0438 <code>ObservableArray<\/code>.<\/p>\n<\/li>\n<li>\n<p>Reaction &#8212; \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f, \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u044f\u0437\u043a\u043e\u0439 \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0432\u0441\u0435 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u0445\u0440\u0430\u043d\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435.<\/p>\n<\/li>\n<\/ol>\n<p>\u0414\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u0438 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438.<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h3>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435<\/h3>\n<p>\u041c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043b\u044f\u043d\u0443\u043b\u0438 Mobx\u00a0\u043f\u043e\u0434<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-338571","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/338571","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=338571"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/338571\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=338571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=338571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=338571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}