@zzmaster

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

Вот простой пример из инета про 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?
  • Вопрос задан
  • 219 просмотров
Пригласить эксперта
Ответы на вопрос 2
Eugene-Usachev
@Eugene-Usachev
Вы пытаетесь сравнивать не сравнимые вещи. Главное преимущество MobX в том, что он позволяет создать глобальный store. Глобальный store позволяет описать в себе множество различных состояний и обращаться к ним из любого компонента.

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

Войдите, чтобы написать ответ

Похожие вопросы