函数组价 hook--useRef

useRef

useRef允许创建一个对元素或值的可变引用,创建的初始值为传入的参数,它的返回值是一个ref对象,这个对象使用.current属性就是该数据的最新值。它通常用于直接访问和管理DOM元素,存储持久值,或处理不应触发重新渲染的值。

  • 返回一个可变的 ref 对象,该对象只有个current属性,初始值为传入的参数
  • 返回的 ref 对象在组件的整个生命周期内保持不变,useRef类似于类组件的this
  • 当更新useRef创建的值时并不会触发组件的重新渲染,这是与useState不同的地方
  • 更新useRef创建的值是副作用操作,所以一般写在useEffect 或事件处理函数里

语法和使用

js 复制代码
const refContainer = useRef(initialValue);

多个同名ref情况

当页面中多个相同的同名的ref,后者会覆盖前者,只会获取一个。代码示例如下:

js 复制代码
import {useRef} from 'react'

export default function App() {
  let test=useRef();
  let look=()=>{
    console.log(test.current);
  }
  return (
    <div>
      <p ref={test}>App组件</p> 
      <p ref={test}>test</p>
      <button onClick={look}>look</button>
    </div>
  )
}

访问DOM元素

使用useRef的一个最简单的情况就是在函数组件里面获取DOM对象的引用。可以使用useRef直接引用组件内的元素,而不是使用document.getElementById或其他DOM的API来查询。

案例:组件挂载后输入框自动聚焦

js 复制代码
import {useRef,useEffect} from 'react'

export default function App() {
  // 使用useRef直接引用组件内的元素
  let inputel=useRef();
  useEffect(()=>{
    console.log(inputel);
    // 聚焦输入元素
    inputel.current.focus();
  })
  return (
    <div>
      <p>App组件</p> 
      <input type="text" ref={inputel}/> 
    </div>
  )
}

通过useRef定义inputel变量,在input元素上定义ref={inputel},这样通过inputel.current就可以获取到inputDom 元素,然后调用下focus函数进行获取焦点。

存储之前的值

使用useRef存储一个跨渲染持久的值,但更新它不会触发重新渲染。一个组件的state可以在多次渲染之后依旧不变。但是state的问题在于一旦修改了它就会造成组件的重新渲染。如果需要保存一些数据,并希望这些数据在组件重新渲染时不会丢失,可以使用 useRef

js 复制代码
import { useEffect, useRef, useState } from 'react';
export default function App() {
  const count = useRef(0);
  const [msg, setMsg] = useState([])
  useEffect(() => {
    count.current = count.current + 1;
  });
  const changeHandle = () => {
    const arr = [...msg];
    arr.push(7)
    setMsg(arr);
  };
  return (
    <>
      <div>
        页面加载了 {count.current} 次。
      </div>
      <button onClick={changeHandle}>修改msg</button>
    </>
  )
}
相关推荐
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
G等你下课2 小时前
React 事件机制原理
前端·react.js
遂心_3 小时前
深入剖析React待办事项应用:Hooks、组件化与性能优化实战
前端·react.js·前端框架
小山不高3 小时前
react封装指令式组件
前端·react.js
爱学习的茄子3 小时前
深入解析React事件机制:从原生DOM到合成事件的演进
前端·react.js·面试
前端小趴菜0511 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~12 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
ohMyGod_12318 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜0518 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界18 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript