Mobx - 何时将 useLocalStore hook 与 react-mobx 一起使用

Question

我不明白为什么useLocalStore钩子存在。我正在使用从 lib 导入的observable方法声明 React 组件主体之外mobx存储。

然后，以任何方式使用该存储的每个组件都从mobx-react包装到observerHOC 中。

一切正常，但我不确定我是否没有做错什么，因为useLocalStore钩子在整个文档中都使用并且我没有使用它。

在 react 组件外部声明存储的示例：

import { observable } from 'mobx'
import { observer } from 'mobx-react'
const person = observable({ name: 'John' })
const Person = observer(function Person() {
return (
<div>
{person.name}
<button onClick={() => (person.name = 'Mike')}>No! I am Mike</button>
</div>
)
})

我为什么要使用useLocalStore钩子？

Answer 1

它创建一个局部可观察量，该可观察量在渲染之间是稳定的。

您可以将 if 与功能组件一起使用。在示例中，您可以看到该组件不依赖于任何react context或external store，但它仍在使用mobx并且它是完全独立的。

import { useObserver, useLocalStore } from 'mobx-react'
function Person() {
const person = useLocalStore(() => ({ name: 'John' }))
return useObserver(() => (
<div>
{person.name}
<button onClick={() => (person.name = 'Mike')}>No! I am Mike</button>
</div>
))
}

Answer 2

useLocalStore 已被弃用，取而代之的是 useLocalObservable，请参阅此处。