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是一个很好的观察方法。

一起使用react.useEffect和mobx.autorun

1 个答案: