Mobx -何时使用useLocalStore钩子与react mobx

Question

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

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

一切都很好，但我不确定我是否做错了什么，因为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，请参阅这里。