一起使用 react.useEffect 和 mobx.autorun

Question

在带有 React 的 MobX 文档中，在副作用和可观察量部分，有一个接收来响应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])
}

有什么理由遵循给出的例子吗？

这是一个代码沙箱

Answer 1

autorun创建一个观察者，这意味着它将监视store.title和store.sectionName中的任何变化，并在它们发生变化时自动运行。

在useEffect中设置它可确保仅创建一次autorun观察器，并在卸载组件时将其删除。请注意，当商店价值更改时，useEffect实际上不会运行;其效果是，当组件(取消(挂载时，autorun被(取消(注册。

如果没有autorun的第二个示例仍将运行效果，从而在通过其他方式重新渲染此组件时更新标题，因为父组件触发了重新渲染，或者如果此组件包装在观察器中，如沙盒示例所示：

function Test(props) {
// 2. rerendered by observer when the value changes
useEffect(() => {
// <-- 3. execute effect because (2) rendered with a different dependency
}, [props.store.size]); // <-- 1. observer notes this value is accessed
return ( ... );
}
// <-- 1. observe any store value that is accessed in the Test function
export default observer(Test);

(为澄清而编辑(