这种情况下 React useRef 和全局变量的区别

Question

案例一：在函数组件外使用 let 变量

https://codepen.io/evan-jin/pen/VwWOPJV?editors=0010

案例2：在父函数组件中使用React.useRef

https://codepen.io/evan-jin/pen/VwWOpvg?editors=0010

案例一

let cursorTimer = null  // << this is the point for 1 case

const Item = ({ num }) => {
    const [hoverItem, setHoverItem] = useState(null)
  
  const addCursor = useCallback(() => {
    clearTimeout(cursorTimer)
    cursorTimer = null
    
    cursorTimer = setTimeout(() => {
      document.body.style.cursor = 'wait'
    }, 10)
  }, [])
  
  const removeCursor =  useCallback(() => {
    if (cursorTimer === null) return
    
    cursorTimer = setTimeout(() => {
      document.body.style.cursor = 'grab'
    }, 500)
  }, [])
  
  useEffect(() => {
    hoverItem ? addCursor() : removeCursor()
  }, [hoverItem])

  ...

案例二

const Item = ({ num, cursorTimerRef }) => {
    const [hoverItem, setHoverItem] = useState(null)
  
  const addCursor = useCallback(() => {
    clearTimeout(cursorTimerRef.current)
    cursorTimerRef.current = null
    
    cursorTimerRef.current = setTimeout(() => {
      document.body.style.cursor = 'wait'
    }, 10)
  }, [])
  
  const removeCursor =  useCallback(() => {
    if (cursorTimerRef.current === null) return
    
    cursorTimerRef.current = setTimeout(() => {
      document.body.style.cursor = 'grab'
    }, 500)
  }, [])
  
  useEffect(() => {
    hoverItem ? addCursor() : removeCursor()
  }, [hoverItem])

  ...

我真的很想知道相同结果之间的区别。

由于在组件外部声明和使用 'let' 变量不会触发重新渲染组件，它给我的结果与使用 React useRef 的结果相同，后者也不会触发重新渲染但可以更改状态在组件中。

我试图在 Google 上查找和研究，但找不到适合我的问题的解决方案。不知道哪个好用效率高

有人能救我一命吗？

Answer 1

它运行良好，这是预期的。

引用 this 来自 React 文档

Avoid using refs for anything that can be done declaratively.

Refs 是 React 中的一个东西，因为不是所有的事情都可以通过声明的方式解决。你在这里所拥有的不能以声明的方式完成。所以你必须使用参考。使用全局变量可以做到这一点，很好，但我建议使用 refs，因为它们提供了一种更简单、更 React-y 的方式来做事。

此外，全局变量会很快污染并导致应用程序内存泄漏，而使用 refs 时显然不会出现这种情况。

这种情况下 React useRef 和全局变量的区别

Difference between React useRef and global variable in this situation

javascript

settimeout

reactjs

react-hooks