一起使用 react.useEffect 和 mobx.autorun

Question

在 MobX with React 文档中，在 Side effects 和 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])
}

是否有任何理由遵循给定的示例？

这是一个代码沙盒

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);

（为了澄清而编辑）