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

react的useRef作用是什么怎么使用

article 2024/11/15 12:02:32

useRef 是 React 中的一个 Hook，它允许你在函数的整个生命周期内保持对某个值的“引用”不变。这个 Hook 特别适用于需要直接访问 DOM 元素或者在函数的多次渲染之间需要保持某些数据不变（如缓存值）的场景。

作用

访问 DOM 元素：你可以通过 useRef 创建一个 ref 对象，并将其附加到 React 元素上，以便通过 ref 直接访问 DOM 元素。
在组件的整个生命周期内保持数据不变：useRef 返回的 ref 对象在组件的整个生命周期内保持不变，这意味着你可以用它来存储任何可变值，而不会在组件重新渲染时丢失这些值。

使用方法

访问 DOM 元素

import React, { useRef } from 'react';  
  
function TextInputWithFocusButton() {  
  const inputEl = useRef(null);  
  const onButtonClick = () => {  
    // `current` 指向已挂载到 DOM 上的文本输入框元素  
    inputEl.current.focus();  
  };  
  return (  
    <>  
      <input ref={inputEl} type="text" />  
      <button onClick={onButtonClick}>Focus the input</button>  
    </>  
  );  
}

存储数据

import React, { useRef } from 'react';  
  
function Counter() {  
  const countRef = useRef(0);  
  
  function increment() {  
    countRef.current = countRef.current + 1;  
  }  
  
  return (  
    <>  
      Count: {countRef.current}  
      <button onClick={increment}>Increment</button>  
    </>  
  );  
}

在上面的例子中，countRef 使用 useRef 初始化，并设置初始值为 0。每次点击按钮时，increment 函数都会将 countRef.current 的值增加 1。由于 countRef 在组件的整个生命周期内保持不变，所以它的 .current 属性可以用来跨渲染存储和更新数据。

注意事项

不要过度使用：虽然 useRef 可以在组件的多次渲染之间保持数据，但滥用它可能会导致代码难以理解和维护。通常，你应该首先考虑使用状态（useState）来管理你的数据。
与 useState 的区别：useState 会在组件的每次渲染时返回一个新的状态变量和更新它的函数，而 useRef 返回的 ref 对象在组件的整个生命周期内保持不变。此外，useState 引起的状态更新会导致组件重新渲染，而 useRef 的更新不会引起渲染。