私は少し混乱しています。私は通常、レンダリングされるものに影響を与えるすべての変数にオブザーバブルを使用します。しかし、それは正しい方法ですか？オブザーバブルの代わりに状態を使用する必要があるのはいつですか？
まあ、それは異なります！
通常、observable値として外部（共有、グローバル、またはあなたがそれを呼ぶものは何でも）状態があります（それらはしばしばストアと呼ばれ、クラスまたは純粋なオブジェクトまたはmobx-state-treeのような他のものでそれらを作ることができます）。
そして、ローカルストアは、次のような方法で「デフォルト」と反応して処理されるuseStateか、useReducer機能性成分のために、またはstateおよびsetStateクラスのために。
ただし、ローカル状態にもMobXを使用すると非常に便利な場合があります。そのような場合はフックがありuseLocalObservable、MobXの方法ですべてを記述し続けることができます。
import { observer, useLocalObservable } from "mobx-react-lite"
import { useState } from "react"
const TimerView = observer(() => {
const timer = useLocalObservable(() => ({
secondsPassed: 0,
resetTime() {
this.secondsPassed = 0
}
increaseTimer() {
this.secondsPassed++
}
}))
return <span onClick={timer.resetTimer}>Seconds passed: {timer.secondsPassed}</span>
})
この方法は将来的にReactSuspenseに何らかの影響を与える可能性がありますが、問題がないことが確実でない限り、すべての人に推奨されるわけではありません。詳細はこちら：https：//mobx.js.org/react-integration.html#you-might-not-need-locally-observable-state
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加