当前位置：首页 > article >正文

react hooks--useRef

article 2024/11/15 18:00:55

基本用法

在类组件中获取一个dom元素实例，可以通过React.CreateRef或者回调函数的方式去获取。
语法：const refContainer = useRef(initialValue);
使用场景：在 React 中进行 DOM 操作时，用来获取 DOM
作用：返回一个带有 current 属性的可变对象，通过该对象就可以进行 DOM 操作了。

const inputRef = useRef(null)

解释：

参数：在获取 DOM 时，一般都设置为 null
返回值：包含 current 属性的对象。

注意：只要在 React 的函数组件中进行 DOM 操作，都可以通过 useRef Hook 来获取 DOM（比如，获取 DOM 的宽高等）。
注意：useRef不仅仅可以用于操作DOM，还可以操作组件

通过useRef获取DOM元素或组件实例：

import React from 'react'
import {useRef} from 'react'

export default function UseRef() {
  let inputRef = useRef()

  function login() {
      console.log(inputRef.current.value)
  }

  return (
      <div>
          <input ref={inputRef} placeholder={'请输入账号'} />
          <button onClick={login}>登录</button>
      </div>
  )
}

绑定ref后，和React.createRef返回的结构一致，通过.current获取到元素。

useRef保存数据

在文件中定义一个全局变量保存数据

存在 bug

UseRef.jsx

import {useRef, useState} from "react";

let count = 0;

export default function UseRef() {
    console.log('ref')
    let inputRef = useRef()
    function login() {
        count += 1;
    }
    function printCount() {
        console.log(count)
    }
    return (
        <div>
            <input ref={inputRef} placeholder={'请输入账号'} />
            <button onClick={login}>登录</button>
            <button onClick={printCount}>打印count</button>
        </div>
    )
}

这种全局保存变量的方式，有问题，原因在于在组件中多次使用这个组件会共享数据，可能会导致一些bug存在。

import UseRef from './components/UseRef'

export default function App() {

  return (
      <div>
          <UseRef />
          <UseRef />
      </div>
  )
}

在函数组件中直接定义变量

存在 bug

import {useRef, useState} from "react";

export default function UseRef() {
    let count = 0;
    console.log('ref')
    let inputRef = useRef()
    let [name, setName] = useState('张三')
    function login() {
        count += 1;
    }
    function printCount() {
        console.log(count)
    }
    return (
        <div>
            <input ref={inputRef} placeholder={'请输入账号'} />
            <button onClick={login}>登录</button>
            <button onClick={printCount}>打印count</button>
            姓名：{name}
            <button onClick={() => setName('李四')}>修改name</button>
        </div>
    )
}

这种方式可以短暂的保存值，但是一旦函数组件更新渲染，那么这个变量的值就会重置

原因是因为函数组件更新渲染时，代码从上往下重新运行。

使用useRef保存值

在整个生命周期里ref里存储的都是同一个，这样就可以----

解决闭包陷阱问题

import {useRef, useState} from "react";


export default function UseRef() {
    // let count = 0;
    let count = useRef(0);

    console.log('ref')

    let inputRef = useRef()
    let [name, setName] = useState('张三')

    function login() {
        // console.log(inputRef.current.value)
        count.current += 1;
    }

    function printCount() {
        console.log(count.current)
    }

    return (
        <div>
            <input ref={inputRef} placeholder={'请输入账号'} />
            <button onClick={login}>登录</button>
            <button onClick={printCount}>打印count</button>
            姓名：{name}
            <button onClick={() => setName('李四')}>修改name</button>
        </div>
    )
}

通过useRef保存值，可以长期存贮，不会重置

使用useRef定义变量的好处：