useRef ——React 个人学习笔记（8）

useRef

主要用途

• 读取DOM元素

就跟vue的ref差不多吧

• 保存状态但不触发更新
• 保存上一次的props或者state

读取DOM

像这样用

import { useRef } from 'react'

function Ref() {
  const inputRef = useRef<HTMLInputElement>(null)
  function hdlInp() {
    console.log(inputRef.current!.value)
  }
  return (
    <div>
      <input type="text" defaultValue="Hello World" ref={inputRef} onChange={hdlInp} />
    </div>
  )
}

export default Ref

不触发更新

像这样用

import { useEffect, useRef } from 'react'

function Ref() {
  const count = useRef(0)

  useEffect(() => {
    const intervalId = setInterval(() => {
      count.current += 1
      console.log(`Elapsed time: ${count.current} seconds`)
    }, 1000)
  })

  return (
    <div>
    </div>
  )
}

export default Ref

保存上一次的状态

贴一下别人的代码

像这样

function DisplayValue({ value }) {
  const [prevValue, setPrevValue] = useState(null); // 初始时，没有前一个值
  const previousValue = useRef(value);

  useEffect(() => {
    setPrevValue(currentRef.current);
    previousValue.current = value;
  }, [value]);

  return (
    <div>
      Current Value: {value} <br />
      Previous Value: {prevValue}
    </div>
  );
}

就是相当于给个变量存状态

引用一下官网的话

useRef 是一个 React Hook，它能帮助引用一个不需要渲染的值。