Так что в последнее время я начал видеть, что все больше и больше людей используют MobX, и я хотел поделиться некоторыми идеями, которые я получил во время его использования в течение некоторого времени. Я собираюсь написать о нескольких темах, которые не так очевидны для новых пользователей MobX. Эта статья требует базовых знаний или предыдущего использования Mobx, я подготовил репозиторий Github, чтобы поиграть с этим материалом (здесь)
Кэширование вычисленных значений
Итак, у нас есть эта удивительная способность, называемая «вычисляемая» в MobX, которая позволяет извлекать значения из состояния, но если вы попытаетесь отладить ее, вы увидите, что некоторые значения кэшируются, а некоторые нет, так почему это происходит? Вычисленные функции кэшируются / запоминаются только тогда, когда они наблюдаются, например, наблюдаются автозапуском, реакцией или наблюдателем mobx-react. Это сделано так, чтобы избежать вычислений все время и только тогда, когда наблюдающее за ним mobx обнаруживает изменение.
Подробнее об этом здесь:
Переназначение наблюдаемых
MobX обертывает наблюдаемые своим собственным интерфейсом и методами, чтобы иметь возможность наблюдать за изменениями, поэтому, если вы переназначите ему значение, вы можете удалить оболочку MobX, а затем потерять все ее возможности, и это займет некоторое время, чтобы понять, почему это произошло.
Постарайтесь использовать как можно больше методов наблюдаемого, например, если это массив, просто используйте методы массива, такие как push, pop и т. Д.
На картинке выше показаны 2 наблюдаемых: одна слева была переназначена и потеряна, если способности, а вторая справа использовала push метод массива и сохранила способности MobX.
Моделирование ваших данных
Я предлагаю попытаться моделировать ваши данные в максимально возможной степени, в то время как наблюдаемые Mobx автоматически делают большую часть вашего объекта наблюдаемым, он может пропускать несколько мест из-за своих правил создания наблюдаемый, а затем вы можете попасть в лабиринт, пытаясь понять, что пошло не так, вместо того, чтобы просто контролировать свои объекты и самостоятельно решать, что наблюдаемо, а что нет.
Вот пример, в котором вы управляете каждым из объектов / классов :)
Вы можете прочитать о правилах здесь:
Как структурировать свои магазины
Мой любимый способ, который мне очень хорошо помог во многих проектах, - это структурирование вашего магазина в виде дерева, начиная с корневого хранилища, которое содержит два хранилища, одно для данных, а другое для пользовательского интерфейса, а оттуда для построения дерева. Я также создал простую библиотеку, чтобы помочь с внедрением зависимостей и получением корня отовсюду в дереве, вы можете проверить это здесь: mobx-easy
В этом руководстве эта концепция рассматривается более подробно:
Подключение ваших магазинов к React
Мы собираемся создать React Context и обернуть наш <App /> компонент поставщиком, а затем передать ему корневое хранилище в качестве значения, мы также создадим имя функции createStore, чтобы помочь нам создать корневое хранилище (в реальных проектах мы можем передать дополнительный функционал там).
Мы создадим пользовательский hook для получения корневого хранилища через только что созданный контекст.
И тогда мы можем легко получить доступ к нашим магазинам в каждом компоненте реакции следующим образом:
useObserver / наблюдатель
Итак, в последней теме мы сосредоточимся на самом подключении, предыдущая тема была просто настройкой.
Если ваш проект состоит только из функциональных компонентов, вы можете использовать mobx-react-lite, если вы классифицируете компоненты, вам нужно будет использовать mobx-react.
Эти две библиотеки в основном помогают нам подключаться к реагирующим компонентам, предоставляя нам observer / useObserver функции, под капотом они наблюдают за каждым наблюдаемым использованием mobx, как и autorun.
Если вы оберните свой компонент observer, все наблюдаемые, используемые внутри компонента, будут наблюдаться, и компонент будет повторно визуализироваться после любого изменения, если вы заключите возвращаемое значение с помощью useObserver, будут отслеживаться только наблюдаемые внутри него, а если вы не используете любой из них, тогда ваш компонент вообще не будет перерисовывать. (вы можете найти пример кода здесь: ссылка)
Обзор MobX 6
Итак, на этой неделе команда MobX опубликовала первый релиз-кандидат для v6: https://www.npmjs.com/package/mobx/v/6.0.0-rc.1
Главное, что мы можем ожидать, увидев здесь, это постепенно перестать использовать декоратор, поскольку его предложение не продвинулось в tc39, нам нужно будет начать использовать новые функции, называемые makeObservable и makeAutoObservable, которые помогут нам решить, какие свойства в классе являются наблюдаемые / действия / вычисленные и которые не обходятся без декораторов.
О решении перейти от декораторов и многом другом вы можете прочитать в этом выпуске:
и есть более обновленная документация по mobx 6, которую вы можете проверить здесь:
Подвести итог
Я постарался сделать тему максимально короткой и прямой, я создал репозиторий со всеми примерами, чтобы вы могли поиграть с ними и лучше увидеть их в коде, чем в статье.
Я надеюсь, что эта статья поможет людям с MobX или, по крайней мере, заставит их задуматься или дать идеи о том, как улучшить проект, над которым они сейчас работают :)
Обновление от 20 сентября
Я выпустил обширный курс по MobX, вы можете ознакомиться с ним здесь:
