0からはじめる MobX Part.2

第2回は、MobXのReactバインディングである`mobx-react`について。

GitHub - mobxjs/mobx-react: React bindings for MobX

ちなみに、React Native用のバインディングとかもあります。

observer

// Decorators
@observer
class Foo extends React.Component {}

// Function
observer(class Foo extends React.Component {})

これさえ覚えればほぼなんとかなる！

Stateless Functional Componentの場合も同じく、包むだけ。
こうすると、Observableな値が更新された時に、必要あるコンポーネントだけが自動的にRe-renderされるようになる。

基本的にObservableな値を表示するコンポーネントには、例外なく全てつける。
`shouldComponentUpdate()`なんか実装しなくとも、MobXが全部いい感じにしてくれる。

ちなみに`observer()`すると、`componentWillReact()`ってフックが使えるようになる。
デバッグ用途とかかな？

PropTypes

Observableなオブジェクトやら配列をそのまま渡すときがあるときに。
普通はプリミティブな値を渡すから使うことはそうそうないはずやけど。

`React.PropTypes`にはもちろんそんなのなくて怒られるので、代わりに`mobx-react`の`PropTypes`から使う。

observableArray
observableArrayOf(React.PropTypes.number)
observableMap
observableObject
arrayOrObservableArray
arrayOrObservableArrayOf(React.PropTypes.number)
objectOrObservableObject

ちなみに、ついこの間までは`PropTypes`ではなく`propTypes`って名前でエクスポートされてました。

Provider / inject

どっかで見たことある感じｗ
けどコンポーネントのネストが深くなると、結局バケツリレーになるのは何使っても一緒です。

そういうときに、用法用量を守って正しく使いたいこの機能。

// 根本
<Provider
  storeA={storeA}
  storeB={storeB}
>
  <FooComponent />
</Provider>

// 使いたいところで
@inject('storeA') @observer
class Bar extends React.Component {}

// Functionなら
inject('storeA')(observer(class Bar extends React.Component {}))

// 複数渡すなら
inject('storeA', 'storeB')(observer(class Bar extends React.Component {}))

`inject` -> `observer`の順番ってのが大事。

まあこの仕組をいかに小さく組み込んでいくかが、最近のReactアプリの設計のキモって感じですかね。

Part.3に続きます。