我什么时候应该使用 MobX observable 而不是 React 状态变量？

Question

我有点困惑。我通常对影响渲染内容的所有变量使用可观察对象。但这是正确的方法吗？我什么时候应该使用 state 而不是 observable？

Answer 1

好吧，这取决于！

通常你有外部（共享，全局或任何你称之为）状态作为 observable 值（它们通常被称为存储，你可以用类或纯对象或其他东西来制作它们否则像 mobx-state-tree).

并且本地存储使用“默认”React 方式处理，例如 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>
})

虽然这种方式在未来可能会以某种方式干扰 React Suspense，所以不建议所有人使用，除非你确定你会接受它。更多相关信息：https://mobx.js.org/react-integration.html#you-might-not-need-locally-observable-state

我什么时候应该使用 MobX observable 而不是 React 状态变量？

When should I use a MobX observable instead of a React state variable?

reactjs

mobx