Mobx

Question

我不明白为什么 useLocalStore 挂钩存在。我正在使用从 mobx lib.

导入的 observable 方法声明 React 组件主体外部的商店。

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

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

在反应组件之外声明商店的示例：

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，请参阅 here.

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

Mobx - when to use useLocalStore hook with react-mobx

reactjs

mobx-react