Вот простой пример из инета про 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?
