問題タブ [mobx-react]

MobX では、すべての値を再設定せずに、監視可能な配列全体に新しい値を設定するにはどうすればよいですか?

最初に考えられるのは次のとおりです。

しかし、それautorunはobservable array.

それで、これを行う正しい方法は何ですか？

これに対する私の解決策は、セッターで別の変数を使用し、セッター関数内で、観測可能な配列インデックスをindexで変更し、インデックスを置換、追加、および削除することでした。このような：

( jsFiddle はこちら)

これは正しい方法ですか？
または、同じ変数を使用して配列全体に値を再割り当てする方法はありますか?

アプリのストアの観測変数に TypeScript クラス インスタンスを含む外部ライブラリがあります。

このインスタンスにはメソッドがあり、呼び出されると、オブジェクトをそのままにして内部状態を更新します。

現在、Mobx はこのオブジェクト自体もその (私が推測する) プロパティも監視していないため、フィールド active_obj で直接発生する変更のみ (それに割り当てられた新しい値など) のみです。MyClass のインスタンスは外部ライブラリによって提供され、最終的にこのライブラリのコンポーネント内でレンダリングされるため、オブザーバブルとオブザーバーをそのクラス構造にも React コンポーネントにも追加できません。これは、オブジェクトのプロパティを変更しても再レンダリングがトリガーされない理由だと思います...

変更のために観測されていないインスタンスを呼び出すと同時に、ナンセンスデータで直接変更する他の観測された変数を使用して、少しごまかす必要がありました。ツリーの上位にあるコンポーネントにこの変数への参照を追加すると、外部ライブラリの (監視されていない) コンポーネントの更新を生成する再レンダリングをトリガーできます。

私の質問は、オブザーバーに store.active_obj インスタンスを通知できるように、Mobx に変更を認識させるにはどうすればよいですか?

Mobx ドキュメントのこの部分でこれについて警告していると思いますが、回避策や解決策はありません。

** 文字列ではなくオブジェクトが like の場合、およびそれらが独自の Like コンポーネントによってレンダリングされた場合、 Likes コンポーネントは特定の like 内で発生する変更に対して再レンダリングされません。

ここから、ページの最後に

編集

@mweststrateの質問に従って、いくつかのコンテキストを提供します：

• 私のアプリはそのデータを制御しますが、そこから外部クラスのインスタンスを作成する必要があります
• インスタンスのデータはカプセル化され、その場で変更されますが、ユーザーがトリガーしたイベントを介してアプリ側から要求することによって行われます (つまり、データがいつ更新されるかを知っています)。
• 基本的に、クラスはアプリのデータを使用して、ユーザーの選択に基づいてデータにさまざまなビューを提供し、React コンポーネントでレンダリングします
• また、この変更されたデータをアプリの別の場所で、私が制御するコンポーネントで使用します
• 変更されたデータは外部クラスの内部の一部であり、それに依存することはできません
• Mobx は見ることができるミューテーションを追跡するため、Observable を使用しても直接は機能しません。

私が考えたいくつかの可能な解決策：

• 変更を参照するインスタンスを呼び出したときに、オブザーバブルの active_object が変更されたことをオブザーバーに手動で通知します
• Mobxが追跡できるコンテナオブジェクトがあり、センチネルプロパティを変更すると、その更新が通知され、実際のインスタンスがそれを持つ

React アプリケーションに Mobx を導入しています。アプリケーションはフレームワーク (Flux Redux など) を使用していませんでした。

各コンポーネントで、最初にパッケージのinjectデコレーターを使用して状態を注入します。mobx-react

更新時に、コンポーネントの onChange メソッドで状態を直接変更します。状態には objects( blocks) の配列が含まれ、各ブロックにはいくつかの特定のプロパティがあります。

次に、状態から取得した値を使用してコンポーネントをレンダリングします。

しかし、実際には、onChangeが実行されて状態myStateが変更された後、render 関数がトリガーされないようです。

コンポーネントが状態サブスクライバーであっても、再レンダリングがトリガーされない理由について何か提案はありますか?

のコンポーネント (react のコンテキストにプロパティを格納する)@injectに依存しないデコレータを実装する際の潜在的な問題は何ですか?mobx-reactProvider

の使用法は次のinjectようになります。

パラメータをコンポーネントの小道具とマージするだけです。

UI が React で構築され、MVVM メソッドでカスタム作成されたステート コンテナーを持つ Sails-js アプリがあります。私たちのアプリは、ユーザーが何もしていないときでも、途方もなく多くのメモリ (400 MB 以上) を消費します。時々、クラッシュすることもあります (具体的には、iphone cordova ビルドで)。また、多くの操作は必要ありませんが (一部の Web オーディオ曲のロードと再生などを除く)、webpack バンドルは 18 MB を超えています (最小化なし、最小化 2.5 MB)。

では、パフォーマンスの低下とバンドルのサイズが大きすぎる理由は何でしょうか? どうすれば修正できますか？この問題をうまく解決できると考えている 1 つのオプションは、状態管理用のカスタム ソリューションの代わりに Mobx を実装することです。私にとっては非常に複雑で、ドキュメントがまったくないからです。私の問題も解決する可能性が高い理由はありますか?

ありがとう！

監視可能な配列があり、正常に動作しています。この配列に要素を追加/プッシュした後、この配列に要素を追加するためのボタンを追加しました追加された要素は観察できませんが、それでも他の要素は観察可能です。私はmobx-reactを使用しています。これはコード スニペットです。

this.model.metaValues は監視可能な配列です。

いくつかのアイデアを提案してください。