編集

MobX 4/5からの移行 {🚀}

MobX 6はMobX 5とはかなり異なります。このページでは、MobX 4と5から6への移行ガイドと、すべての変更の網羅的なリストについて説明します。

より良い理解のために、MobX 6.0のCHANGELOGを確認してください。

⚠️ 警告: コードベースのサイズと複雑さ、MobXの使用パターン、自動テストの品質などの要因によっては、この移行ガイドには1時間から数日かかる場合があります。継続的インテグレーションまたはQA/テスト手順で予期しない破損を検出できない場合は、アップグレードしないでください。予期しない動作の変更は、MobX自体の変更、またはBabel/TypeScriptビルド構成に必要な変更によって発生する可能性があります。⚠️

はじめに

  1. mobxを最新のMobX 4/5バージョンにアップデートし、非推奨メッセージをすべて解決します。
  2. mobxをバージョン6にアップデートします。
  3. MobX 4からアップグレードしていて、プロキシなしでInternet Explorer/React Nativeをサポートする必要がある場合は、アプリケーションの初期化時にimport { configure } from "mobx"; configure({ useProxies: "never" })を呼び出して、プロキシ実装をバックアウトします。詳細については、プロキシサポートセクションを参照してください。
  4. Babelユーザーの場合
    • Babelを使用していて、class-propertiesが有効になっている場合は、レガシーなloose fieldサポートを無効にします: ["@babel/plugin-proposal-class-properties", { "loose": false }]
    • (オプション) MobX 6ではデコレータがオプトインになりました。デコレータを使用しない場合は、Babelの設定と依存関係からplugin-proposal-decoratorsを削除します。詳細については、デコレータの有効化 {🚀}セクションを参照してください。
  5. TypeScriptユーザーの場合
    • コンパイラの設定にフラグ"useDefineForClassFields": trueを追加します。
    • (オプション) MobX 6ではデコレータがオプトインになりました。デコレータを使用しない場合は、TypeScriptの設定からexperimentalDecorators設定を削除/無効にします。詳細については、デコレータの有効化 {🚀}セクションを参照してください。
  6. MobXのデフォルト設定はより厳格になりました。アップグレードが完了したら新しいデフォルトを採用することをお勧めします。設定 {🚀}セクションを参照してください。移行中は、v4/v5と同じようにMobXを設定することをお勧めします: import {configure} from "mobx"; configure({ enforceActions: "never" });。移行プロセス全体を完了し、プロジェクトが期待通りに動作することを検証した後、フラグcomputedRequiresReaction、reactionRequiresObservable、observableRequiresReaction、およびenforceActions: "observed"を有効にして、より慣習的なMobXコードを作成することを検討してください。

makeObservableを使用するようにクラスをアップグレードする

クラスフィールドの構築方法における標準化されたJavaScriptの制限により、デコレータやdecorateユーティリティを使用してクラスフィールドの動作を変更することがMobXではできなくなりました。代わりに、コンストラクタでフィールドをオブザーバブルにする必要があります。これは3つの異なる方法で行うことができます。

  1. すべてのデコレータを削除し、コンストラクタでmakeObservableを呼び出し、どのフィールドをどのデコレータを使用してオブザーバブルにするかを明示的に定義します。例: makeObservable(this, { count: observable, tick: action, elapsedTime: computed })（第2引数はdecorateに渡されるものに対応することに注意してください）。これは、コードベースからデコレータを削除し、プロジェクトがあまり大きくない場合に推奨されるアプローチです。
  2. すべてのデコレータを残し、コンストラクタでmakeObservable(this)を呼び出します。これにより、デコレータによって生成されたメタデータが取得されます。これは、MobX 6移行の影響を制限する場合に推奨される方法です。
  3. デコレータを削除し、クラスのコンストラクタでmakeAutoObservable(this)を使用します。

makeObservable / makeAutoObservableの詳細については、を参照してください。

いくつかの注意点

  1. makeObservable/makeAutoObservableは、MobXベースのメンバーを宣言するすべてのクラス定義で使用される必要があります。したがって、サブクラスとスーパークラスの両方がオブザーバブルメンバーを導入する場合、両方がmakeObservableを呼び出す必要があります。
  2. makeAutoObservableは、新しいデコレータautoActionを使用してメソッドをマークします。これは、導出コンテキストにない場合にのみactionを適用します。これにより、コンピュートプロパティからも自動的にデコレートされたメソッドを安全に呼び出すことができます。

多くのクラスを持つ大規模なコードベースの移行は大変な作業かもしれません。しかし心配はいりません、上記のプロセスを自動化するコードモッドがあります！！

mobx-undecorateコードモッドを使用したコードのアップグレード

既存のMobXユーザーで、多くのデコレータ、またはdecorateへの同等の呼び出しを使用するコードがある場合。

mobx-undecorateパッケージは、コードをMobX 6に準拠するように自動的に更新できるコードモッドを提供します。インストールする必要はありません。代わりに、まだインストールしていない場合はインストールする必要があるnpxツールを使用してダウンロードして実行します。

MobXデコレータのすべての使用を削除し、同等のmakeObservable呼び出しに置き換えるには、ソースコードを含むディレクトリに移動して実行します。

npx mobx-undecorate

MobXはデコレータを引き続きサポートします。したがって、デコレータを保持し、必要な場所にのみmakeObservable(this)を導入する場合は、--keepDecoratorsオプションを使用できます。

npx mobx-undecorate --keepDecorators

その他のオプションについては、ドキュメントを参照してください。

mobx-undecorateの制限事項

mobx-undecorateコマンドは、まだコンストラクタがないクラスにコンストラクタを導入する必要があります。コンストラクタの基底クラスが引数を期待する場合、コードモッドはアップグレードされているサブクラスのこれらの引数を導入できず、super呼び出しもそれらを渡しません。これらは手動で修正する必要があります。このツールは、これらの場合に// TODO: [mobx-undecorate]コメントを生成します。

Reactクラスコンポーネントに対しては、適切な処理を行い、propsをスーパークラスに渡すための特別なケースがあります。

関数は自動的に変換されます

深いオブザーバブル構造の一部となる関数は、ジェネレーター関数の場合、autoAction または flow に自動的に変換されます。推論ルール を参照してください。これは、元の配列/オブジェクト/セット/マップ参照がオブザーバブルに変換されるときに失われるのと同様に、元の関数参照が保持されないことを意味します。これは状況によっては予期しない場合があります。この動作が望ましくない場合は、observable.shallow / observable.ref / false / deep: false を使用して変換プロセスを防ぐか、問題に示されているように、関数が既にactionであることを確認してください。

← デコレーター {🚀}