React 中 useRef 的使用方法及示例

  • 发布时间:2024-05-16 22:38:43
  • 本文热度:浏览 92 赞 0 评论 0
  • 全文共1字,阅读约需1分钟

React 中的 useRef 是一个 Hook 函数,它在函数组件中创建一个可变的引用,类似于类组件中的 ref 属性。useRef 可以保存任意可变值,并在组件的多次渲染间保持不变。使用时,首先从 React 导入 useRef,然后在组件中调用它并传入一个初始值。useRef 返回一个对象,其包含一个 current 属性,用于存储任意值。

主要用途

  1. 获取 DOM 元素:在函数组件中,可以使用 useRef 获取 DOM 元素的引用,从而直接操作 DOM。

  2. 记忆功能useRef 可以用来存储组件内部的任意可变值,不会在组件多次渲染时重置。

  3. 存储定时器等引用:可以使用 useRef 来存储定时器、请求等引用,以便在组件卸载时清除。

  4. 子组件实例:通过 useRefuseImperativeHandle,可以在父组件中获取子组件的实例和方法。

使用方法

  1. 初始化:在组件内部,调用 useRef 并传入初始值。

    const myRef = useRef(initialValue);
    
  2. 读取和修改:通过 myRef.current 来读取和修改引用的值。

    myRef.current = newValue;
    
  3. 作为 ref 属性:将 useRef 创建的 ref 对象作为 JSX 元素的 ref 属性,可以获取该 DOM 元素的引用。

    <div ref={myRef}>Content</div>
    

示例代码

import React, { useState, useRef, useEffect } from 'react';

export const Demo: React.FC = () => {
  const [timer, setTimer] = useState(0);
  const timerRef = useRef(timer);

  useEffect(() => {
    timerRef.current = timer;
  });

  function onClick() {
    setTimeout(() => {
      console.log('timerRef', timerRef.current);
      console.log('timer', timer);
    }, 2000);
  }

  return (
    <div>
      <div>现在 timer 的值为:{timer}</div>
      <div>timerRef 的值为:{timerRef.current}</div>
      <button onClick={() => setTimer(val => val + 1)}>点击 +1</button>
      <button onClick={onClick}>打印</button>
    </div>
  );
};

在这个示例中,我们使用 useRef 来存储 timer 的值,并在定时器中打印出来。由于 useRef 不会在组件渲染时更新,所以打印的 timerRef.current 值将是上一次的值,而不是最新的值。

总的来说,useRef 提供了一个方便的方式来持久化存储可变值和操作 DOM 元素的引用。

正文到此结束
评论插件初始化中...
Loading...