Обновляется состояние только после хот релоада mobx react?

В React состояние компонента может обновляться в нескольких случаях, и одним из них является изменение значения хранилища MobX. Однако, обновление состояния компонента в реальном времени без необходимости перезагрузки страницы возможно через механизм наблюдателей MobX и React.

MobX - это библиотека управления состоянием, которая позволяет легко отслеживать изменения состояния и обновлять представление соответствующего React-компонента.

В MobX компоненты могут быть объявлены как наблюдатели за определенными значениями в хранилище (store), и в случае изменения этих значений, компоненты будут автоматически перерисованы. Это делает обновление состояния компонента в реальном времени возможным без необходимости хот-релоада или перезагрузки страницы.

Для использования MobX в React, нужно сначала создать хранилище (store) и определить значения, которые хотите отслеживать. Затем, объявите компоненты как наблюдателей за этими значениями, используя функцию observer из пакета mobx-react.

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

Пример:

import React from 'react';
import { observer } from 'mobx-react';
import { observable } from 'mobx';

// Создание хранилища
const appStore = observable({
  counter: 0,
  incrementCounter() {
    this.counter++;
  }
});

// Объявление компонента как наблюдателя
const CounterComponent = observer(() => (
  <div>
    <h1>Counter: {appStore.counter}</h1>
    <button onClick={appStore.incrementCounter}>Increment</button>
  </div>
));

// Рендеринг компонента
ReactDOM.render(<CounterComponent />, document.getElementById('root'));

В данном примере, компонент CounterComponent объявлен как наблюдатель за значением counter в хранилище appStore. Когда пользователь нажимает кнопку "Increment", вызывается метод incrementCounter в хранилище, который увеличивает значение counter. Автоматически, MobX обновляет компонент CounterComponent, что приводит к обновлению представления и отображению измененного значения counter.

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