时间戳

首页 > 解决方案 > Mobx - 何时将 useLocalStore 钩子与 react-mobx 一起使用

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

问题描述

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

然后，以任何方式使用 store 的每个组件都observer从mobx-react.

一切都很好，但我不确定我是否做错了什么，因为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钩子？

标签： reactjsmobxmobx-react

解决方案

它创建了一个在渲染之间保持稳定的本地 observable 。

您可以将 if 与功能组件一起使用。在示例中，您可以看到该组件不依赖任何react contextor 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>
  ))
}

推荐阅读