🧊

MobX作者による、RecoilとMobXについての簡単なまとめ

http://github.com/facebookexperimental/recoil

先日のReactEuropeで発表されたてホヤホヤの、ExperimentalなReact向けの状態管理ライブラリであるRecoil。

ただAPIとかやりたいことを見てると、「MobXファミリーとの違いってなんぞ・・?」って個人的になってました。
インターネットでも同じような印象を受けた人はいるらしく、なんやろな〜と思っていた矢先。

MobXの作者である `@mwestrate` 氏が、さくっとTweetしてるじゃありませんか!

なのでこの記事では、そのTweetを引用して、翻訳+ざっくりまとめをしておきます。

Tweetはこちら



ざっくり日本語訳

MobXとRecoil、その違いがなにか気になってる人も多いと思うので、さくっとスレッドに書いてみます。

まず最初に、RecoilとMobXは同じ問題を解決してくれる。
その目的は、広く共有されたステートを、効率よくレンダリングすること。

これはReact(とContext)の問題で、Reduxやその他の状態管理ライブラリはそれを解決してくれない。

単語として、Atomや依存ツリーなどの表現は、RecoilにもMobXにも登場する。
MobX語を使ってRecoilを表現するなら、`observable.box` + `computed` + `useObserver`って感じ。

違いは、RecoilがReactが提供するAPIの上に成り立っているというところで、Concurrentモードなどにも適応しやすいはず。

MobXはより汎用的なライブラリで、React以外のプロジェクトでも使えるし、Flutterなど別の言語でも利用できる。

Recoil同様、MobXもAtomという概念を使うけど、それらはオブジェクトやMapや配列にラップされていてるので、簡単に組み合わせられる。
コレクション(ids)と、その中身を別のAtomとして表現する必要もない。

配列なら`observable.array`がそれを実現してくれてるし、なんならすべてのプロパティをAtomにしてくれる。

つまりとあるオブジェクトのプロパティAが変更されても、それを使っていないコンポーネントは再描画されないということ。

もちろん同じことはRecoilでもできるけど、それらを自分で記述する必要がある。(Selectorを書いたり、Atomの細分化をしたり)
ここが最大の違いで、Recoilを使う場合、欲しいものはすべて自分で調達する必要がある。

わかりやすいとも言えるし、理想的ではないとも言えるかもしれない。

React Hooksの性質上、それらは宣言的にでないといけない(もしくは追加のSelector)。
`{user.loggedIn ? user.name : ""}`というコードがあったときに、MobXは`loggedIn`が`true`のときだけ`name`を監視するけど、これを手動で実現するのは難しいと思う。

まとめると、RecoilとMobXは似てるところがある。

多数の、または個別に監視されるAtom(アプリケーションの状態の一部分)を使って(Reduxは常にこれが1つ)、コンポーネントの更新と必要なデータの導出やメモ化ができる。

MobXは、より抽象化されたMapや配列といった概念の上でAtomを利用して、それらを端的に追跡できる。

Recoilは、よりReact自身に近いもので、簡素。

免責: これらはトークを見て思ったことであり、まだ実際のプロジェクトで試したりはしてない。
個人的になにが同じように感じて、なにが違うのか知りたかっただけ。

みんなもトークをチェックしよう!

https://www.youtube.com/watch?v=_ISAA_Jt9kI

まとめ

特にまとめることがないくらいまとまったTweetでしたわ。

氏がいつのまにかFacebookの中の人になってたのは知ってたので、最初はもしやMobXの後継か?!とか最初は思ってたんですが、そうではないみたいですねー。(コミットログにいなかった)

最近の氏は、ReactNativeに傾倒されているご様子。

https://www.youtube.com/watch?v=vULQgfiQvrw

こっちのトークも要チェックや!