] Mobx: простое и масштабируемое решение по управлению состоянием для React ]

]

Mobx - популярная библиотека управления государством для приложений JavaScript, особенно в React. В отличие от Redux, который опирается на централизованный магазин и явное отправку действий, MOBX использует более реактивный подход к управлению состоянием. Он автоматически обновляет состояние и пользовательский интерфейс вашего приложения путем отслеживания зависимостей и повторного использования только необходимых частей приложения при изменении состояния.

]

в этом руководстве мы пройдемся по ключевым понятиям MOBX, как настроить его с помощью React и как эффективно использовать его для управления государством в ваших приложениях React.

]

---

]

] 1. Что такое mobx? ]

]

Mobx - это библиотека управления государством, которая использует реактивное программирование для управления состоянием вашего приложения. Он автоматически отслеживает и обновляет части вашего пользовательского интерфейса, которые зависят от состояния, что делает его очень эффективным и интуитивно понятным способом управления данными приложения.

]

ключевые функции MOBX:

]

]
• ] автоматическое отслеживание зависимости : Mobx автоматически отслеживает, какие части вашего приложения зависят от того, какие государственные предложения.
]
• ] простой и интуитивно понятный : с Mobx вам не нужно вручную отправлять действия или обновлять состояние. MOBX реагирует на автоматические изменения состояния.
]
• ] Declarative : Mobx использует наблюдаемый подход, где вы определяете свое состояние как наблюдаемой , и ваши компоненты автоматически повторно повторно редко
]
• оптимизирован для производительности : MOBX обновляет только компоненты, которые зависят от измененного состояния, что приводит к высоко оптимизированной производительности. ]
]

]

---

]

2. Основные концепции MOBX ] ]

Mobx построен вокруг нескольких основных концепций, которые работают вместе для управления состоянием:

]

]

1. Наблюдаемое состояние ] ]

наблюдаемое состояние является ядром MOBX. Когда объект помечен как

vaselebable , MOBX отслеживает состояние этого объекта и автоматически обновляет компоненты, которые зависят от него. ]

]

Пример: ]

]

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

наблюдаемый декоратор делает счетчик -объект реактивным. Всякий раз, когда изменяется значение, любой компонент React, который использует это состояние, будет автоматически повторно повторно.

]
• ]
]

2. Action

] ] Действия в MOBX - это функции, которые изменяют состояние. По соглашению, действия должны использоваться для обновления наблюдаемого состояния, поскольку MOBX гарантирует, что состояние обновляется контролируемым и предсказуемым способом.

]

]

Пример:

] import {action} от 'mobx'; const счетчик = наблюдаемый ({ значение: 0, Приращение: action (function () { это. }), уменьшение: action (function () { this.value--; }), });

]

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

Методы приращения и уменьшения - это действия, определяемые с использованием декоратора действия. Эти методы изменяют состояние.

]
• ]
]

3. Вычисленные значения

] ] вычисленные значения получены из наблюдаемого состояния. Когда наблюдаемое состояние меняется, вычисленные значения автоматически пересчитаны, гарантируя, что состояние приложения остается последовательным.

]

]

Пример:

] import {Compusted} от 'mobx'; const счетчик = наблюдаемый ({ значение: 0, Increment () { это. }, decrement () { this.value--; }, Получить DoubleValue () { вернуть это. Value * 2; }, });

]

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

DoubleValue - это вычисленное значение, полученное из наблюдаемого значения. Всякий раз, когда изменяется значение, двойное значение будет пересчитываться.

]
• ]
]

4. Реакции

] ] реакции - это побочные эффекты, которые работают всякий раз, когда изменяется наблюдаемое значение. Реакции полезны для запуска действий на основе изменений состояния.

]

]

Пример:

] import {autorun} от 'mobx'; const счетчик = наблюдаемый ({ значение: 0, Increment () { это. }, decrement () { this.value--; }, }); Autorun (() => { console.log (`value счетчика: $ {counter.value}`); });

]

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

функция AutoRun - это реакция, которая автоматически работает всякий раз, когда counter.value меняется. Он регистрирует обновленное значение счетчика в консоли.

]
• ]
]

]

---

3. Интеграция MOBX с React

] ] Mobx легко интегрируется с React, чтобы управлять состоянием вашего приложения. В React Mobx работает, используя компонент

stemver

более высокого порядка, чтобы отслеживать изменения состояния и автоматически обновлять пользовательский интерфейс при необходимости. ] ]

Шаг 1: Установите Mobx и React-Mobx

] ] для использования MOBX в приложении React вам нужно установить MOBX и MOBX-React:

]

]
npm установить Mobx Mobx-React

]

npm install mobx mobx-react

Шаг 2: Создайте наблюдаемый магазин

] ] создать магазин, который удерживает состояние вашего приложения. Этот магазин будет наблюдаемым, и компоненты могут реагировать на его изменения.

]

]

Пример:

] import {visemble, action} от 'mobx'; Класс -контакт { @observable value = 0; @Action Increment () { это. } @Action decrement () { this.value--; } } Export const Countestore = new Counterstore ();

]

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

класс Counterstore определяет наблюдаемое состояние (значение) и действия (приращение и уменьшение).

]
• ]
]

Шаг 3: Сделайте React Components Observer

] ] Чтобы подключить ваши компоненты React к MOBX, вам необходимо использовать компонент более высокого порядка наблюдателя от Mobx-React. Это позволит вашим компонентам автоматически повторно рендеринг при изменении наблюдаемого состояния.

]

]

Пример:

] импорт реагирует из 'React'; Import {stemver} из 'mobx-react'; Import {counterstore} от './counterstore'; const counter = exerver (() => { возвращаться (

count: {counterstore.value}

counterstore.increment ()}> urgent counterstore.decrement ()}> decrement

); }); Экспорт счетчика по умолчанию;

]

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

Counter -компонент обернут наблюдателем, что заставляет его реагировать на изменения в коллеге. Когда Counterstore.value изменяется, React автоматически повторно использует компонент, чтобы отразить новое значение.

]
• ]
]

Шаг 4: Используйте магазин в вашем приложении

] теперь, когда ваш магазин настроен, и ваши компоненты завершены наблюдателями, вы можете использовать магазин в своем приложении:

]

]
импорт реагирует из 'React'; Импорт {render} из 'React-Dom'; Импорт {провайдер} от 'mobx-react'; счетчик импорта из './counter'; Import {counterstore} от './counterstore'; const app = () => ( Поставщик> ); render (, document.getElementById ('root'));

]

import { observable } from 'mobx';

const counter = observable({
  value: 0,
  increment() {
    this.value  ;
  },
  decrement() {
    this.value--;
  },
});

]

Provider
• используется для введения хранилища в приложение. Счетчик компонент теперь может получить доступ к кондуску напрямую. ] ]
]

]

---

4. Преимущества использования MOBX

] ] ]

1. Простота

] Mobx позволяет легко управлять состоянием, уменьшая шаблон и сложность, обычно встречающуюся в других библиотеках управления государством, таких как Redux.

]

]

2. Автоматическое повторное рендерингинг

] ] , когда состояние меняется, MOBX автоматически обрабатывает повторное использование компонентов, которые зависят от этого состояния.

]

]

3. Мелкозернистая наблюдение

] ] Mobx гарантирует, что только необходимые компоненты повторно Рендерризируются при изменении состояния, повышение производительности.

]

]

4. Декларативное государственное управление

] ] с MOBX, состояние управляется декларативно. Вам просто нужно определить, как должно вести себя состояние, а Mobx обращается остальным.

]

]

]

---

5. Заключение

] Mobx - это мощная и эффективная библиотека управления состоянием, которая использует принципы реактивного программирования. Благодаря простой настройке и автоматическому отслеживанию состояний, это значительно облегчает управление состоянием в приложениях React. MOBX особенно полезен для приложений, которые требуют мелкозернистого контроля над обновлениями и оптимизацией производительности.

Если вы создаете сложное приложение React и хотите легко понять решение по управлению государством, MOBX-отличный выбор. Это интуитивно понятно, мощно и беспрепятственно работает с React, чтобы обеспечить оптимизированный опыт разработки.

]

]

---

]