useRef Hook

title: useRef Hook id: 47268842dce3db96b1abe597ffee6a23 tags: [] date: 2000/01/01 00:00:00 updated: 2022/12/09 13:40:03 isPublic: true --#|[分隔]|#--

useRef Hook

如果正常使用 ，useRef 和 createRef 功能几乎是一样的，区别在于，useRef 不会每次重新渲染后重新创建，而且生成的 ref 的 current 的值的变化，不会引起页面重新渲染。

正常用法

点击按钮，给 input 框置入焦点功能，中规中矩的使用。

import React from 'react';

function Home() {

  let inputRef = React.useRef()

  function setFocus() {
    inputRef.current.focus()
  }

  return (
    <>
      <button onClick={setFocus}>点击</button>
      <input ref={inputRef} type="text"/>
    </>
  )
}

export default Home

其他用法

因为 useRef 不会每次重新渲染后重新创建，和 useRef.current 的值的变化，不会引起页面重新渲染，这两个特性，可以做一些其他的事情。

我们知道，当使用函数式组件时，一旦这个组件重新渲染，代表组件的方法会重新执行，内部使用一般方式创建的变量都会重新生成，只有使用 useState、useContext、useMemo 等方法得到的才不会。

当我们使用一些希望值发生变化时不引起组件重新渲染的变量，且这个变量的值需要一直别发生变化。。。一个典型的例子就是定时器(setInterval)。

此时我们就可以使用 useRef，生成一个 ref，把 ref 的 current 字段当做普通变量来使用了：

import React from 'react';

function Home() {

  const [num, setNum] = React.useState(1)
  const timeRef = React.useRef()
  
  // 定义定时器，并在卸载组件时停止定时器
  React.useEffect(() => {
    timeRef.current = setInterval(() => {
      setNum(oldNum => oldNum + 1)
    }, 1000);
    return () => clearInterval(timeRef.current)
  }, [])

  return <div>{num}</div>
}

export default Home