在带有 React 文档的 MobX 中,在 Side effects and observables 中部分有一个响应内部更改的收据 useEffect
钩。
import React from 'react'
import { autorun } from 'mobx'
function useDocumentTitle(store: TStore) {
React.useEffect(
() =>
autorun(() => {
document.title = `${store.title} - ${store.sectionName}`
}),
[], // note empty dependencies
)
}
该示例结合了
React.useEffect
与 mobx.autorun
(但它可能是 mobx.reaction
),但我看不到 autorun
的好处在代码中。一旦我们进入useEffect
我们可以在依赖项数组中跟踪我们的依赖项。代码更清晰,不用dispose()
和 useEffect
有一个明确的依赖数组,需要什么。import React from 'react'
import { autorun } from 'mobx'
function useDocumentTitle(store: TStore) {
React.useEffect(() => document.title = `${store.title} - ${store.sectionName}`
,[store.title, store.sectionName])
}
是否有任何理由遵循给定的示例?
这是一个 Code Sandbox
最佳答案
autorun
创建一个观察者,这意味着它将监视 store.title
中的任何变化。和 store.sectionName
,并在更改时自动运行。
在 useEffect
中进行设置确保 autorun
观察者仅创建一次,并在卸载组件时删除。
你的第二个例子没有 autorun
可能仍会更新标题 如果父组件中有观察者 触发重新渲染(自身及其子组件,包括此组件)。但是,如果您不遵守 store.title
和 store.sectionName
在父组件中,您需要在该组件中观察它,并且 autorun
是一个很好的方法。
关于reactjs - 一起使用 react.useEffect 和 mobx.autorun,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58306057/