局部状态数据

局部状态数据管理即是在组件内的状态管理。在React中通常会使用state(useState)在组件内部管理状态。但在React的理念中，数据是不可变的，因此我们在使用Mobx又需要响应式的局部状态管理时可以使用Mobx提供的useLocalObservable。

摘录自官方文档：

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

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

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

它本质是使用useState的一个简写版：

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)

注：You might not need locally observable state