編集

React統合

使用方法

import { observer } from "mobx-react-lite" // Or "mobx-react".

const MyComponent = observer(props => ReactElement)

MobXはReactとは独立して動作しますが、最も一般的には一緒に使用されます。MobXの概要では、この統合の最も重要な部分である、Reactコンポーネントにラップできるobserver HOCを既に見てきました。

observerは、インストール時に選択する個別のReactバインディングパッケージによって提供されます。この例では、より軽量なmobx-react-liteパッケージを使用します。

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

class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increaseTimer() {
        this.secondsPassed += 1
    }
}

const myTimer = new Timer()

// A function component wrapped with `observer` will react
// to any future change in an observable it used before.
const TimerView = observer(({ timer }) => <span>Seconds passed: {timer.secondsPassed}</span>)

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

setInterval(() => {
    myTimer.increaseTimer()
}, 1000)

ヒント: 上記の例は、CodeSandboxで自分で試すことができます。

observer HOCは、レンダリング中に使用されるすべてのオブザーバブルにReactコンポーネントを自動的にサブスクライブします。その結果、関連するオブザーバブルが変更されると、コンポーネントは自動的に再レンダリングされます。また、関連のない変更がない場合は、コンポーネントが再レンダリングされないようにします。そのため、コンポーネントからアクセスできるオブザーバブルでも、実際には読み取られていないものは、再レンダリングの原因にはなりません。

実際、これによりMobXアプリケーションはすぐに最適化され、通常は過剰なレンダリングを防ぐための追加コードは必要ありません。

observerが機能するには、オブザーバブルがコンポーネントにどのように渡されるかは関係ありません。読み取られることだけです。オブザーバブルを深く読み取っても問題ありません。todos[0].author.displayNameのような複雑な式もすぐに動作します。これにより、サブスクリプションメカニズムは、データ依存関係を明示的に宣言するか、事前に計算する必要がある（例：セレクター）他のフレームワークと比較して、はるかに正確で効率的になります。

ローカル状態と外部状態

状態の構成方法には柔軟性があり、(技術的には)どのオブザーバブルを読み取るのか、またはオブザーバブルはどこから来たのかは関係ありません。以下の例では、observerでラップされたコンポーネントで、外部とローカルのオブザーバブル状態を使用するさまざまなパターンを示しています。

observerコンポーネントでの外部状態の使用

propsの使用

グローバル変数の使用

Reactコンテキストの使用

オブザーバブルはpropsとしてコンポーネントに渡すことができます（上記の例のように）。

import { observer } from "mobx-react-lite"

const myTimer = new Timer() // See the Timer definition above.

const TimerView = observer(({ timer }) => <span>Seconds passed: {timer.secondsPassed}</span>)

// Pass myTimer as a prop.
ReactDOM.render(<TimerView timer={myTimer} />, document.body)

オブザーバブルへの参照を取得する方法に関係なく、外部スコープ（インポートなど）から直接オブザーバブルを使用できます。

const myTimer = new Timer() // See the Timer definition above.

// No props, `myTimer` is directly consumed from the closure.
const TimerView = observer(() => <span>Seconds passed: {myTimer.secondsPassed}</span>)

ReactDOM.render(<TimerView />, document.body)

オブザーバブルを直接使用するのは非常に効果的ですが、通常はモジュール状態が導入されるため、このパターンはユニットテストを複雑にする可能性があります。代わりに、Reactコンテキストの使用をお勧めします。

Reactコンテキストは、オブザーバブルをサブツリー全体と共有するための優れたメカニズムです。

import {observer} from 'mobx-react-lite'
import {createContext, useContext} from "react"

const TimerContext = createContext<Timer>()

const TimerView = observer(() => {
    // Grab the timer from the context.
    const timer = useContext(TimerContext) // See the Timer definition above.
    return (
        <span>Seconds passed: {timer.secondsPassed}</span>
    )
})

ReactDOM.render(
    <TimerContext.Provider value={new Timer()}>
        <TimerView />
    </TimerContext.Provider>,
    document.body
)

Providerのvalueを別のものに置き換えることはお勧めしません。MobXを使用すると、共有されるオブザーバブル自体を更新できるため、そのような必要はありません。

observerコンポーネントでのローカルオブザーバブル状態の使用

observerで使用されるオブザーバブルはどこからでも取得できるため、ローカル状態にすることもできます。ここでも、さまざまなオプションが利用可能です。

オブザーバブルクラスを使用した`useState`

ローカルオブザーバブルオブジェクトを使用した`useState`

`useLocalObservable`フック

ローカルオブザーバブル状態を使用する最も簡単な方法は、useStateを使用してオブザーバブルクラスへの参照を保存することです。通常は参照を置き換えたくないので、useStateによって返される更新関数は完全に無視します。

import { observer } from "mobx-react-lite"
import { useState } from "react"

const TimerView = observer(() => {
    const [timer] = useState(() => new Timer()) // See the Timer definition above.
    return <span>Seconds passed: {timer.secondsPassed}</span>
})

ReactDOM.render(<TimerView />, document.body)

元の例のようにタイマーを自動的に更新したい場合は、通常のReactの方法でuseEffectを使用できます。

useEffect(() => {
    const handle = setInterval(() => {
        timer.increaseTimer()
    }, 1000)
    return () => {
        clearInterval(handle)
    }
}, [timer])

前述のように、クラスを使用する代わりに、オブザーバブルオブジェクトを直接作成できます。observableを利用できます。

import { observer } from "mobx-react-lite"
import { observable } from "mobx"
import { useState } from "react"

const TimerView = observer(() => {
    const [timer] = useState(() =>
        observable({
            secondsPassed: 0,
            increaseTimer() {
                this.secondsPassed++
            }
        })
    )
    return <span>Seconds passed: {timer.secondsPassed}</span>
})

ReactDOM.render(<TimerView />, document.body)

const [store] = useState(() => observable({ /* something */}))の組み合わせは非常に一般的です。このパターンを簡素化するために、useLocalObservableフックがmobx-react-liteパッケージから公開されており、以前の例を次のように簡素化できます。

import { observer, useLocalObservable } from "mobx-react-lite"

const TimerView = observer(() => {
    const timer = useLocalObservable(() => ({
        secondsPassed: 0,
        increaseTimer() {
            this.secondsPassed++
        }
    }))
    return <span>Seconds passed: {timer.secondsPassed}</span>
})

ReactDOM.render(<TimerView />, document.body)

ローカルオブザーバブル状態は不要な場合があります

一般的に、ローカルコンポーネントの状態にMobXオブザーバブルをすぐに頼らないことをお勧めします。これは理論的にReactのSuspenseメカニズムの一部の機能を制限する可能性があるためです。経験則として、状態がコンポーネント（子コンポーネントを含む）間で共有されるドメインデータ（タスクアイテム、ユーザー、予約など）をキャプチャする場合は、MobXオブザーバブルを使用します。

読み込み状態、選択など、UI状態のみをキャプチャする状態は、useStateフックの方が適している場合があります。これにより、将来ReactのSuspense機能を活用できます。

Reactコンポーネント内でオブザーバブルを使用すると、1）深い、2）計算値を持つ、3）他のobserverコンポーネントと共有されている場合に価値が追加されます。

observerコンポーネント内で常にオブザーバブルを読み取る

いつobserverを適用するか疑問に思われるかもしれません。経験則は次のとおりです。オブザーバブルデータを読み取るすべてのコンポーネントにobserverを適用します。

observerは、デコレートしているコンポーネントのみを強化し、それによって呼び出されるコンポーネントは強化しません。そのため、通常はすべてのコンポーネントをobserverでラップする必要があります。心配する必要はありません。これは非効率ではありません。逆に、より多くのobserverコンポーネントを使用すると、更新がより詳細になるため、レンダリングがより効率的になります。

ヒント：オブジェクトからの値はできるだけ遅く取得する

オブジェクト参照をできるだけ長く渡し、それらのプロパティをDOM/低レベルコンポーネントにレンダリングするobserverベースのコンポーネント内で読み取る場合、observerは最適に機能します。言い換えれば、observerは、オブジェクトから値を「逆参照」するという事実に反応します。

上記の例では、.secondsPassedがobserverコンポーネント内でではなく外側で読み取られるため、追跡されず、TimerViewコンポーネントは、次のように定義されている場合、将来の変更には反応しません。

const TimerView = observer(({ secondsPassed }) => <span>Seconds passed: {secondsPassed}</span>)

React.render(<TimerView secondsPassed={myTimer.secondsPassed} />, document.body)

これは、react-reduxなどの他のライブラリとは異なる考え方です。react-reduxでは、メモ化をより効果的に活用するために、早期に逆参照してプリミティブを渡すことが推奨されるためです。問題が完全に明確でない場合は、リアクティビティの理解セクションを確認してください。

observerではないコンポーネントにオブザーバブルを渡さない

observerでラップされたコンポーネントは、コンポーネントの独自のレンダリング中に使用されるオブザーバブルにのみサブスクライブします。そのため、オブザーバブルオブジェクト/配列/マップが子コンポーネントに渡される場合、それらもobserverでラップする必要があります。これは、コールバックベースのコンポーネントにも当てはまります。

オブザーバではないコンポーネント（サードパーティのコンポーネントの場合や、そのコンポーネントをMobXに依存させたくない場合など）にオブザーバブルを渡すには、オブザーバブルをプレーンなJavaScriptの値または構造に変換する必要があります。

上記を詳しく説明するために、オブザーバブルなtodoオブジェクト、TodoViewコンポーネント（オブザーバ）、そして列/値マッピングを受け取るがオブザーバではない架空のGridRowコンポーネントの例を考えてみましょう。

class Todo {
    title = "test"
    done = true

    constructor() {
        makeAutoObservable(this)
    }
}

const TodoView = observer(({ todo }: { todo: Todo }) =>
   // WRONG: GridRow won't pick up changes in todo.title / todo.done
   //        since it isn't an observer.
   return <GridRow data={todo} />

   // CORRECT: let `TodoView` detect relevant changes in `todo`,
   //          and pass plain data down.
   return <GridRow data={{
       title: todo.title,
       done: todo.done
   }} />

   // CORRECT: using `toJS` works as well, but being explicit is typically better.
   return <GridRow data={toJS(todo)} />
)

コールバックコンポーネントは<Observer>を必要とする場合があります。

GridRowがonRenderコールバックを受け取る場合を考えてみましょう。onRenderはTodoViewのレンダリングではなくGridRowのレンダリングサイクルの一部であるため（構文上はTodoViewに出現するものの）、コールバックコンポーネントがobserverコンポーネントを使用していることを確認する必要があります。または、<Observer />を使用してインラインの匿名オブザーバを作成することもできます。

const TodoView = observer(({ todo }: { todo: Todo }) => {
    // WRONG: GridRow.onRender won't pick up changes in todo.title / todo.done
    //        since it isn't an observer.
    return <GridRow onRender={() => <td>{todo.title}</td>} />

    // CORRECT: wrap the callback rendering in Observer to be able to detect changes.
    return <GridRow onRender={() => <Observer>{() => <td>{todo.title}</td>}</Observer>} />
})

ヒント

サーバーサイドレンダリング（SSR）

サーバーサイドレンダリングのコンテキストでobserverを使用する場合は、enableStaticRendering(true)を呼び出して、observerが使用されているオブザーバブルを購読せず、GCの問題が発生しないようにしてください。

注記：mobx-react 対 mobx-react-lite

このドキュメントでは、デフォルトとしてmobx-react-liteを使用しています。mobx-reactはその上位版であり、内部でmobx-react-liteを使用しています。グリーンフィールドプロジェクトでは通常不要となったいくつかの追加機能を提供しています。mobx-reactによって提供される追加機能は次のとおりです。

1. Reactクラスコンポーネントのサポート。
2. Providerとinject。MobX独自のReact.createContextの前身であり、もはや必要ありません。
3. オブザーバブル固有のpropTypes。

mobx-reactは、関数コンポーネントのサポートを含め、mobx-react-liteを完全に再パッケージ化して再エクスポートすることに注意してください。mobx-reactを使用する場合は、mobx-react-liteを依存関係として追加したり、どこからでもインポートする必要はありません。

注記：observerまたはReact.memo？

observerは自動的にmemoを適用するため、observerコンポーネントをmemoでラップする必要はありません。プロップスの内部（深い）の変更は、関連する場合はobserverによって拾われるため、memoはobserverコンポーネントに安全に適用できます。

ヒント：クラスベースのReactコンポーネントのobserver

上記のように、クラスベースのコンポーネントはmobx-reactでのみサポートされ、mobx-react-liteではサポートされません。簡単に言うと、関数コンポーネントをラップするのと同じように、クラスベースのコンポーネントをobserverでラップできます。

import React from "React"

const TimerView = observer(
    class TimerView extends React.Component {
        render() {
            const { timer } = this.props
            return <span>Seconds passed: {timer.secondsPassed} </span>
        }
    }
)

詳細については、mobx-reactのドキュメントを参照してください。

ヒント：React DevToolsでのコンポーネント名の表示

React DevToolsは、コンポーネントの表示名情報を使用して、コンポーネント階層を適切に表示します。

次を使用する場合

export const MyComponent = observer(props => <div>hi</div>)

DevToolsには表示名が表示されません。

これを修正するには、次の方法を使用できます。

• アロー関数ではなく名前付きのfunctionを使用します。mobx-reactは関数名からコンポーネント名を推測します。

  export const MyComponent = observer(function MyComponent(props) {
      return <div>hi</div>
  })
  

• トランスパイラ（BabelやTypeScriptなど）は、変数名からコンポーネント名を推測します。

  const _MyComponent = props => <div>hi</div>
  export const MyComponent = observer(_MyComponent)
  

• デフォルトエクスポートを使用して、変数名から再度推測します。

  const MyComponent = props => <div>hi</div>
  export default observer(MyComponent)
  

• [壊れています]displayNameを明示的に設定します。

  export const MyComponent = observer(props => <div>hi</div>)
  MyComponent.displayName = "MyComponent"
  

  これは、執筆時点でのReact 16では壊れています。mobx-react observerはReact.memoを使用しており、このバグが発生します。https://github.com/facebook/react/issues/18026、しかしReact 17で修正される予定です。

これでコンポーネント名が表示されるようになりました。

{🚀} ヒント：observerを他の高階コンポーネントと組み合わせる場合は、最初にobserverを適用します

observerを他のデコレータまたは高階コンポーネントと組み合わせる必要がある場合は、observerが最も内側の（最初に適用される）デコレータであることを確認してください。そうでないと、まったく機能しない可能性があります。

{🚀} ヒント：プロップスからのcomputedの導出

場合によっては、ローカルオブザーバブルのcomputed値が、コンポーネントが受け取るプロップスのいくつかによって依存する場合があります。しかし、Reactコンポーネントが受け取るプロップスのセット自体はオブザーバブルではないため、プロップスの変更はcomputed値に反映されません。最新のデータからcomputed値を適切に導出するには、ローカルオブザーバブルの状態を手動で更新する必要があります。

import { observer, useLocalObservable } from "mobx-react-lite"
import { useEffect } from "react"

const TimerView = observer(({ offset = 0 }) => {
    const timer = useLocalObservable(() => ({
        offset, // The initial offset value
        secondsPassed: 0,
        increaseTimer() {
            this.secondsPassed++
        },
        get offsetTime() {
            return this.secondsPassed - this.offset // Not 'offset' from 'props'!
        }
    }))

    useEffect(() => {
        // Sync the offset from 'props' into the observable 'timer'
        timer.offset = offset
    }, [offset])

    // Effect to set up a timer, only for demo purposes.
    useEffect(() => {
        const handle = setInterval(timer.increaseTimer, 1000)
        return () => {
            clearInterval(handle)
        }
    }, [])

    return <span>Seconds passed: {timer.offsetTime}</span>
})

ReactDOM.render(<TimerView />, document.body)

実際には、return <span>Seconds passed: {timer.secondsPassed - offset}</span>は、やや効率が低いものの、はるかに単純な解決策であるため、このパターンはめったに必要ありません。

{🚀} ヒント：useEffectとオブザーバブル

useEffectは、発生する必要がある副作用を設定し、Reactコンポーネントのライフサイクルにバインドするために使用できます。useEffectを使用するには、依存関係を指定する必要があります。MobXでは、MobXにはすでに効果の依存関係を自動的に決定する方法（autorun）があるため、これは実際には必要ありません。autorunとuseEffectを使用してコンポーネントのライフサイクルに結合することは、幸いにも簡単です。

import { observer, useLocalObservable, useAsObservableSource } from "mobx-react-lite"
import { useState } from "react"

const TimerView = observer(() => {
    const timer = useLocalObservable(() => ({
        secondsPassed: 0,
        increaseTimer() {
            this.secondsPassed++
        }
    }))

    // Effect that triggers upon observable changes.
    useEffect(
        () =>
            autorun(() => {
                if (timer.secondsPassed > 60) alert("Still there. It's a minute already?!!")
            }),
        []
    )

    // Effect to set up a timer, only for demo purposes.
    useEffect(() => {
        const handle = setInterval(timer.increaseTimer, 1000)
        return () => {
            clearInterval(handle)
        }
    }, [])

    return <span>Seconds passed: {timer.secondsPassed}</span>
})

ReactDOM.render(<TimerView />, document.body)

効果関数からautorunによって作成されたディスポーザを返すことが重要です。これは、コンポーネントがアンマウントされたときにautorunが確実にクリーンアップされるようにするためです。

オブザーバブルではない値がautorunの再実行をトリガーする必要がある場合を除き、依存関係配列は通常空のままにすることができます。その場合、そこに追加する必要があります。リンターを満足させるために、（上記の例では）timerを依存関係として定義できます。参照は実際には決して変更されないため、これは安全であり、さらに影響はありません。

効果をトリガーするオブザーバブルを明示的に定義する場合は、autorunの代わりにreactionを使用します。それ以外はパターンは同じままです。

Reactコンポーネントをさらに最適化するには？

Reactの最適化 {🚀}セクションを参照してください。

トラブルシューティング

ヘルプ！コンポーネントが再レンダリングされません…

1. observerを忘れないようにしてください（はい、これが最も一般的な間違いです）。
2. 反応させようとしているものが実際にオブザーバブルであることを確認してください。必要に応じて、isObservable、isObservablePropなどのユーティリティを使用して、実行時にこれを確認します。
3. ブラウザのコンソールログで警告やエラーがないか確認してください。
4. 追跡の仕組みを全体的に理解していることを確認してください。リアクティビティの理解セクションを参照してください。
5. 上記で説明されている一般的な落とし穴を読んでください。
6. 設定MobXは、メカニズムの不健全な使用について警告し、コンソールログを確認します。
7. トレースを使用して、正しいものを購読していることを確認するか、spy/mobx-logパッケージを使用してMobXが一般的に何をしているかを確認します。