Question

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

然后，将以任何方式使用商店的每个组件都从observer包裹到mobx-react HOC中。

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

示例将store声明在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>
  ))
}

Mobx-何时将useLocalStore挂钩与react-mobx

1 个答案: