useEffect与useMemo的区别

Question

我试着把我的头集中在useMemo()反应钩子到底是什么上面。

假设我有这个useMemo

const Foo = () => {
  const message = useMemo(() => {
    return readMessageFromDisk()
  }, [])

  return <p>{message}</p>
}

这与使用useState()和useEffect()挂钩不完全一样吗？

const MyComponent = () => {
  const [message, setMessage] = useState('')
  
  useEffect(() => {
    setMessage(readMessageFromDisk())
  }, [])

  return <p>{message}</p>
}

在这两种情况下，只有在依赖关系发生变化时，useMemo和useEffect才会调用。

如果两个片段是相同的：，useMemo的好处是什么？

它纯粹是上述useEffect片段的简写符号吗？还是使用useMemo还有其他好处？

Answer 1

如果依赖项发生变化，则使用useEffect运行代码块。通常，您将使用它在组件挂载和/或每次监视特定的prop或state更改时运行特定的代码。

如果依赖项发生变化，useMemo用于计算和返回一个值。您将希望使用它来回溯复杂的计算，例如过滤数组。通过这种方式，您可以选择只计算每次数组更改时筛选的数组(通过将其放入依赖数组)，而不是每次呈现。

useMemo所做的事情与上面的useEffect示例相同，只不过它在幕后运行的方式有一些额外的性能好处。