React hooks - useRef

useRef

用法

useRef 函数返回一个可变的 ref 对象,该对象只有一个 current 属性。可以在调用 useRef 函数时为其指定初始值。并且这个返回的 ref 对象在组件的整个生命周期内保持不变。

javascript 复制代码
// 1. 导入 useRef
import { useRef } from 'react'
// 2. 调用 useRef 创建 ref 对象
const refObj = useRef(初始值)
// 3. 通过 ref.current 访问 ref 中存储的值
console.log(refObj.current)
特点
  1. 获取 DOM 元素或子组件的实例对象
javascript 复制代码
import React, { useRef } from 'react'

export const InputFocus: React.FC = () => {
  // 1. 创建 ref 引用
  const iptRef = useRef<HTMLInputElement>(null) // 加上泛型引用后就可以提示代码了

  const getFocus = () => {
    // 3. 调用 focus API,让文本框获取焦点
    iptRef.current?.focus() // iptRef.current可能为空,后面使用链式调用?.来保证不报错
  }

  return (
    <>
      {/* 2. 绑定 ref 引用 */}
      <input type="text" ref={iptRef} />
      <button onClick={getFocus}>点击获取焦点</button>
    </>
  )
}
  1. 存储渲染周期之间共享的数据
javascript 复制代码
export const Counter: React.FC = () => {
  const [count, setCount] = useState(0)
  const prevCountRef = useRef<number>() // 默认值为 undefined,泛型为number,将来要存number类型的值
  let preCount // 创建一个变量存储旧值无法实现,因为每次count发生变化时组件重新渲染导致preCount初始化为undefined
  const add = () => {
    setCount((c) => c + 1)
    prevCountRef.current = count // 记录旧值到prevCountRef中
    // preCount = count // 错误写法,无法实现
  }
  return (
    <>
      <h1>新值是:{count},旧值是:{prevCountRef.current} </h1>
      <button onClick={add}>+1</button>
    </>
  )
}
注意事项
  1. 组件rerender(重新渲染)时useRef不会被重复初始化
  2. ref.current发生变化时不会造成组件的rerender(重新渲染)
  3. ref.current不能作为其他hooks(useMemo、useCallback、useEffect 等) 的依赖项
    组件首次渲染后会触发一次 useEffect 。但当time.current 变化不会触发 useEffect 的重新执行。
javascript 复制代码
export const RefTimer: React.FC = () => {
  const time = useRef(Date.now())
  const updateTime = () => {
    time.current = Date.now()
  }
  useEffect(() => {
    console.log('time 的值发生了变化:' + time.current)
  }, [time.current])

  return (
    <>
      <h3>时间戳是:{time.current}</h3>
      <button onClick={updateTime}>给ref赋新值</button>
    </>
  )
}
相关推荐
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
FogLetter9 小时前
深入浅出React-Router-Dom:从前端路由到SPA架构的华丽转身
前端·react.js
Dream耀9 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
码间舞10 小时前
你还在用useState保存表单数据?来看React 19是如何做的!【useActionState实战详解】
react.js
前端设计诗10 小时前
对React官网《Virtual DOM 及内核》注解:其实Virtual DOM 就藏在在代码行间
前端·react.js·前端框架
遂心_11 小时前
React初学者必备:用“状态管家”Reducer轻松管理复杂状态!
前端·javascript·react.js
FanetheDivine12 小时前
解决@ant-design/icons导致的样式异常
react.js·ant design