Библиотека MobX
Что такое MobX
MobX - это простое, масштабируемое и проверенное в боях решение для управления состоянием. MobX - это отдельная библиотека, но большинство людей используют ее вместе с React, и этот учебник посвящен именно этой комбинации.
Основная идея
Состояние - это сердце каждого приложения, и нет более быстрого способа создать глючные, неуправляемые приложения, чем создание непоследовательного состояния или состояния, не синхронизированного с локальными переменными, которые задерживаются. Поэтому многие решения по управлению состоянием пытаются ограничить способы изменения состояния, например, делая состояние неизменяемым. Но это создает новые проблемы; данные должны быть нормализованы, ссылочная целостность больше не может быть гарантирована, и использование таких мощных концепций, как прототипы, становится практически невозможным.
MobX снова делает управление состоянием простым, решая корневую проблему: он делает невозможным создание непоследовательного состояния. Стратегия достижения этой цели проста: Убедитесь, что все, что может быть получено из состояния приложения, будет получено. Автоматически.
Концептуально MobX рассматривает ваше приложение как электронную таблицу.
-
Во-первых, есть состояние приложения. Графы объектов, массивов, примитивов, ссылок, которые формируют модель вашего приложения. Эти значения являются "ячейками данных" вашего приложения.
-
Во-вторых, есть производные. В принципе, любое значение, которое может быть вычислено автоматически из состояния вашего приложения. Эти производные, или вычисляемые значения, могут варьироваться от простых значений, таких как количество незавершенных дел, до сложных, таких как визуальное HTML-представление ваших дел. В терминах электронных таблиц: это формулы и диаграммы вашего приложения.
-
Реакции очень похожи на производные. Основное отличие заключается в том, что эти функции не производят значения. Вместо этого они запускаются автоматически для выполнения некоторой задачи. Обычно это связано с вводом/выводом. Они следят за тем, чтобы DOM обновлялся или чтобы сетевые запросы выполнялись автоматически в нужное время.
-
Наконец, есть действия. Действия - это все те вещи, которые изменяют состояние. MobX позаботится о том, чтобы все изменения состояния приложения, вызванные вашими действиями, автоматически обрабатывались всеми производными и реакциями. Синхронно и без сбоев.
React и MobX
React и MobX вместе представляют собой мощную комбинацию. React отображает состояние приложения, предоставляя механизмы для преобразования его в дерево рендерируемых компонентов. MobX предоставляет механизм для хранения и обновления состояния приложения, которое затем используется React.
И React, и MobX обеспечивают оптимальные и уникальные решения распространенных проблем при разработке приложений. React предоставляет механизмы для оптимального рендеринга пользовательского интерфейса с помощью виртуального DOM, который уменьшает количество дорогостоящих мутаций DOM. MobX предоставляет механизмы для оптимальной синхронизации состояния приложения с компонентами React с помощью реактивного виртуального графа состояния зависимостей, который обновляется только в случае крайней необходимости и никогда не устаревает.
Поддержка браузеров
-
MobX >=5 работает в любом браузере с поддержкой прокси ES6. Он будет выдавать ошибку при запуске на старых средах, таких как IE11, Node.js <6 или React Native Android на старом JavaScriptCore
how-to-upgrade. -
MobX 4 работает на любом браузере ES5 и будет активно поддерживаться. MobX 4 и 5 API одинаковы и семантически могут достигать одинаковых результатов, но MobX 4 имеет некоторые ограничения.
Совет: основная точка входа пакета MobX 5 поставляется с кодом ES5 для обратной совместимости со всеми инструментами сборки. Но поскольку MobX 5 в любом случае работает только в современных браузерах, рассмотрите возможность использования более быстрой и компактной сборки ES6: lib/mobx.es6.js. Например, настроив псевдоним Webpack:
resolve: { alias: { mobx: __dirname + "/node_modules/mobx/lib/mobx.es6.js" }}