Mobx - 何时将 useLocalStore 钩子与 react-mobx 一起使用答案

【问题标题】：Mobx - when to use useLocalStore hook with react-mobxMobx - 何时将 useLocalStore 钩子与 react-mobx 一起使用
【发布时间】：2020-09-01 21:41:09
【问题描述】：

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

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

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

在 react 组件之外声明 store 的示例：

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 钩子？

【问题讨论】：

尝试创建两个组件，你会看到问题，他们会分享他们的人，不像下面的答案
嗯，明白了，这是有道理的，因为他们将共享可观察的人。对于像身份验证这样的全局性的东西，我认为在组件之外声明“存储”很好——会小心的 :) 谢谢你的 mobx——太好了，我不知道为什么我使用 redux 这么久。跨度>

标签： reactjs mobx mobx-react

【解决方案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>
  ))
}

【讨论】：

感谢您的回答。我刚刚添加了一个在组件外部声明 store 的示例。这是错误的并且“重新渲染之间不稳定”吗？
组件之外的所有东西都是稳定的，因为它不会在每次功能组件运行/渲染时重新声明。这也是React.createContenxt背后的主要原则