在 function 中使用 useEffect()

Question

我在FlyerChat中遇到了以下代码。

import * as React from 'react'

export const usePrevious = <T>(value: T) => {
  const ref = React.useRef<T>()

  React.useEffect(() => {
    ref.current = value
  }, [value])

  return ref.current
}

function 被称为

const previousChatMessages = usePrevious(chatMessages);

我很难理解将值存储在 function 中的ref中并使用useEffect与仅保留其值有何不同。

Answer 1

看起来是因为库维护者不想在您更改chatMessages时重新呈现

来自 React 文档：

请记住，useRef 不会在其内容更改时通知您。 改变 the.current 属性不会导致重新渲染。 如果您想在 React 将 ref 附加或分离到 DOM 节点时运行一些代码，您可能需要使用回调 ref 来代替。