reactjs - useEffect 和 useMemo 之间的区别

Question

我正在尝试了解 useMemo() React hook 到底是什么。

假设我有这个useMemo:

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

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

这不是与使用 useState() 和 useEffect() Hook 完全相同吗？

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 示例执行相同的操作，只不过它在后台运行的方式上具有一些额外的性能优势。