MobX – это
библиотека, которая позволяет управлять состояниями React просто и легко.
Почему вообще стоит пользоваться «менеджером» состояний? Не так давно настало
время React. бизнес-логика на клиенте всё утолщалась и утолщалась, вариантов
взаимодействий становилось много.
С приходом React можно
было, наконец, сконцентрироваться на логике, а не на представлении, теперь
доступна возможность переиспользовать компоненты и легко распределять задачи по
разработке новых функций между разными сотрудниками. Приложение на чистом React
со временем упирается в ощутимые границы. Во-первых, надоедает писать
this.setState(). Во-вторых, задаваться вопросом, как можно поднять состояния
вверх по цепочке компонентов. С приходом MobX, настало время разделить
представление и данные. Наше приложение с MobX стремится к набору из двух
папок:
1) components,
куда мы положим все view.
2) stores, где
будут содержаться данные, а также логика работы с ними.
Например,
обычный компонент для нажатия кнопки. Он состоит из двух файлов: Button.js и
ButtonStore.js. Первый файл – это компонент React, отвечающий строго за
отображение и вид компонента, а второй – данные этого компонента, правила
работы с пользователем и обработчики событий.
Главная
идея MobX. Все состояния доступны в абсолютно любом месте.
Стиль
написания кода с помощью MobX является написание кода через декораторы.
Декоратор — это функция которая будет принимать на входе текущий компонент и
просто оборачивать его сверху компонентом-оберткой с состоянием и возможными
событиями, которые предоставляет нам MobX. Это отличный шаг вперед для оптимизации веб-приложения.
Рассмотрим
несколько основных декораторов и проведем аналогии с Excel.
Декоратор
@observable идентичен с исходной ячейкой данных в Excel. Этот декоратор
предназначен для того, чтобы обозначить поля, как что-то наблюдаемое. Допустим,
что существует класс Student с полями name, course, group. Таким образом, такой
декоратор объявляет о том, что нужно следить за изменениями этих полей.
class Student {
@observable name = ‘Irina’
@observable course = 4
@observable
group = 9
}
Декоратор
@computed похож на observable тем, что также может уведомлять тех, кто на него
подписан или наблюдает за его изменениями, но при этом не хранит значения
внутри себя, а вычисляет их на основе других observable-полей.
class Student
{
…
@computed get fullINFO(){ return
this.name + ” “ + this.course + “ “ + this.group }
}
Если снова
проводить аналогию с Excel, то @computed выглядит, как формула.
Описав функции
двух декораторов, нужно ответить на вопрос: «Кто следит за этими изменениями?».
Декоратор @observer указывает, что наш компонент- функция или класс будет
подписан на данные, которые изменяются с помощью Mobx. Данные в хранилище изменились
– в компоненте возникла реакция. MobX сам изменяет структуру приложения.
Объявляется
декоратор таким образом:
@observer class University extends
React.Component { … }
Все действия
над состояниями производятся в декораторе @action. @action— просто некая
функция или метод. Внутри таких функций можем изменять состояний, то есть
@observable поля. Иными словами, все вызовы this.setState() теперь переносятся
в декоратор @action.
class Student {
…
@action get setGroup( newGroup ) { this.group
= newGroup }
}
Как же теперь
использовать декораторы и хранилища? В хранилище содержатся все @obserable и
@computed поля, а так
же декораторы @action. Прошлый
компонент оборачиваем декоратором @observer b прокидываем
наш store, как props.
MobX — это как React, только для
данных. Если React экономит нам операции с домом, то MobX экономит нам операции
с виртуальным домом. Чем меньше перерисовок даже в виртуальном доме, тем
быстрее наше приложение.