React+TypeScript项目：useRef

把useRef当成获取DOM元素的场景

说明

获取DOM元素的场景，可以直接把要获取的DOM元素的类型当成泛型参数传递给useRef，可以推导出.current属性的类型。

示例

import { useEffect, useRef } from "react"

function App() {
  // 直接把要获取的DOM元素的类型当成泛型参数传递给useRef
  const domRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    domRef.current?.focus()
    domRef.current && (domRef.current.value = '今天天气真热')
  }, [])

  return (
    <>
      <input ref={domRef} />
    </>
  )
}

export default App

把useRef当成引用稳定的存储器使用的场景

说明

把useRef当成引用稳定的存储器使用的场景，可以通过泛型传入联合类型来做，例如定时器管理的场景。

示例

import { useEffect, useRef } from "react"

function App() {
  const timerId = useRef<number | undefined>(undefined)

  useEffect(() => {

    timerId.current = setInterval(() => {
      console.log('定时器运行中')

    }, 1000)

    return () => clearInterval(timerId.current)
  }, [])

  return (
    <>
      this is app
    </>
  )
}

export default App