reactjs - 一起使用 react.useEffect 和 mobx.autorun

Question

在带有 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

Answer 1

autorun创建一个观察者，这意味着它将监视 store.title 中的任何变化。和 store.sectionName ，并在更改时自动运行。
在 useEffect 中进行设置确保 autorun观察者仅创建一次，并在卸载组件时删除。
你的第二个例子没有 autorun可能仍会更新标题 如果父组件中有观察者 触发重新渲染(自身及其子组件，包括此组件)。但是，如果您不遵守 store.title和 store.sectionName在父组件中，您需要在该组件中观察它，并且 autorun是一个很好的方法。