В чем преимущества MobX?

Question

[zzmaster]

Вот простой пример из инета про MobX, 34 строки.

import React from "react";
import ReactDOM from "react-dom";
import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react";

class Timer {
  secondsPassed = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increase() {
    this.secondsPassed += 1;
  }

  reset() {
    this.secondsPassed = 0;
  }
}

const myTimer = new Timer();

const TimerView = observer(({ timer }) => (
  <button onClick={() => timer.reset()}>
    Seconds passed: {timer.secondsPassed}
  </button>
));

ReactDOM.render(<TimerView timer={myTimer} />, document.body);

setInterval(() => {
  myTimer.increase();
}, 1000);

Вот он же, без MobX, 30 строк

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Timer() {
  const [secondsPassed, setSecondsPassed] = useState(0);

  const increase = () => {
    setSecondsPassed(secondsPassed + 1);
  };

  const reset = () => {
    setSecondsPassed(0);
  };

  useEffect(() => {
    const intervalId = setInterval(increase, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <button onClick={reset}>
      Seconds passed: {secondsPassed}
    </button>
  );
}

ReactDOM.render(<Timer />, document.getElementById("root"));

Я понимаю, что количество строк - критерий вторичный, но я не вижу преимуществ MobX.

Ну то есть, я не спорю - это уродство
setSecondsPassed(secondsPassed + 1);
вместо
this.secondsPassed += 1;
но как то мы к нему привыкли. Есть более весомые преимущества MobX?

Comments

[Александр]

К примеру, в рабочем проекте имеется большое количество динамических вложенных таблиц. Данные по таблицам очень удобно хранить в одном месте и получать к ним доступ по необходимости из других компонентов.
Если Ваш проект небольшой, скорее всего Вам и не нужны какие-либо библиотеки для работы с состоянием.

[Dosya]

Ты сперва попробуй написать приложение с огромным функционалом на redux, а потом на mobx, то увидишь разницу

Answer 1

[Eugene Usachev]

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

В вашем случае нет нужды использовать MobX, вы это и сами заметили, однако давайте представим ситуацию, в которой этот ваш таймер нужен не в этом же компоненте, то есть создаётся в этом, но прокидывается дочерним компонентам. Это может привезти к увеличению кода в программе и может затруднить её чтение. В вашем случае выше, вы могли бы использовать export const myTimer и использовать его в любой компоненте.

Comments

[zzmaster]

А если таймер используется где-то в глубине, то там он импортируется без пробрасывания пропсами по всей структуре? Это хорошо, но как, если у меня десяток таймеров?

[Александр]

zzmaster, для этого у Вас есть хук useLocalObservable (https://mobx.js.org/react-integration.html, https://github.com/mobxjs/mobx/tree/main/packages/...).

[Eugene Usachev]

zzmaster, да, вы можете пробросить этот таймер в любой компонент (или компоненты, если так понятнее) на любой глубине.

Answer 2

[HealSpirit]

У вас проект только из одного компонента будет состоять? Попробуйте прокинуть значения из родителя, скажем, через 10 детей по цепочки вниз. Если вас это устроит, можете mobx не использовать

Comments

[Eugene Usachev]

HealSpirit, к чему так грубо отвечать? Вопрос действительно может вызвать смешанные эмоции, но все поначалу задают такие вопросы.

[HealSpirit]

Eugene-Usachev, он спрашивает про весомые преимущества MobX. Эти преимущества он должен сам прочувствовать, столкнувшись, как минимум, с prop drilling. В одном компоненте он эти преимущества не найдет

[zzmaster]

Eugene-Usachev, то есть можно экспортировать
const myTimer = new Timer();
и потом использовать где-то в глубине?
А голом реакте это разве нельзя?

[Dosya]

Eugene-Usachev, грубый ответ, потому что глупый вопрос

[chemdev]

Dosya, сам я так понимаю с 0 лет только умные вопросы задавал?

[Eugene Usachev]

zzmaster, Вы правильно поняли. В голом React можно (через useContext, если не ошибаюсь), но так делать не принято, так как гораздо удобнее использовать готовые стейт-менеджеры (которые работают поверх useContext).