ReactHooks:useRef使用场景

1. 使用 ref 引用一个值

const intervalRef = useRef(initialValue);

useRef 返回一个具有单个 current 属性的 ref 对象。current 属性值可以修改,初始值为 initialValue。与 state 不同的是,改变 ref 不会触发重新渲染,因此可以使用 useRef 存储那些在组件多次渲染之间需要存储但又不需要渲染在页面上的数据,如定时器 ID、缓存的请求结果等。

js 复制代码
import { useRef } from "react";

export default () => {
  const count = useRef(0);

  const handleClick = () => {
    count.current += 1;
    console.log(count.current);
  };

  return (
    <>
      <span>count: {count.current} </span>
      <button onClick={handleClick}>点击增加</button>
    </>
  );
};


使用 useRef 实现倒计时,可用于发送验证码

js 复制代码
import { useRef, useState } from "react";

export default () => {
  const [count, setCount] = useState(undefined);
  const intervalId = useRef(null);

  const handleStart = () => {
    setCount(5);
    intervalId.current = setInterval(() => {
      setCount((count) => {
        if (count === 0) {
          clearInterval(intervalId.current);
          return undefined;
        }
        return count - 1;
      });
    }, 1000);
  };

  return (
    <>
      <button onClick={handleStart}>
        {count ? "倒计时:" + count : "发送验证码"}
      </button>
    </>
  );
};

2. 通过 ref 操作 DOM

useRef 可以关联到组件的 DOM 元素上,通过 ref.current 来访问该 DOM 元素,以便直接访问元素的方法或属性,如获取焦点、获取滚动位置等。

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

export default () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        聚焦输入框
      </button>
    </>
  );
}

3. 访问其他组件的 DOM 节点或方法

默认情况下,react 不允许访问其他组件的 DOM 节点,即使是自己的子组件。需要使用 forwardRef API 将父组件的 ref 转发给子组件,从而使父组件可以操作子组件的 DOM。

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

const MyInput = forwardRef((props, ref) => {
  return <input { ...props} ref={ref} />
});

export default () => {
  const ref = useRef(null);

  const handleClick = () => {
    ref.current.focus();
  }

  return (
    <>
      <MyInput ref={ref} />
      <button onClick={handleClick}>
        聚焦输入框
      </button>
    </>
  );
}

useImperativeHandle 通常和 forwardRef 一起使用,用于向父组件暴露一个自定义的 ref 句柄。通常用于需要在父组件中调用子组件中定义的函数的情况。

js 复制代码
import { useRef, forwardRef, useImperativeHandle } from "react";

const MyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  const handleFocus = () => {
    inputRef.current.focus();
  };

  // useImperativeHandle 返回一个对象,包含了父组件可以通过 ref 访问到的属性和方法
  useImperativeHandle(ref, () => ({
    handleFocus,
  }));
  
  // useImperativeHandle(ref, () => {
  //   return { handleFocus };
  // });
  
  return <input {...props} ref={inputRef} />;
});

export default () => {
  const ref = useRef(null);

  const handleClick = () => {
    ref.current.handleFocus();
  };

  return (
    <>
      <MyInput ref={ref} />
      <button onClick={handleClick}>聚焦输入框</button>
    </>
  );
};

上面两段代码都实现了聚焦输入框的功能,区别在于:

  • 单独使用 forwardRef 时,父组件可以通过 ref 直接访问到子组件的 DOM 节点,而无法访问到子组件的属性或方法。在第一个例子中,子组件渲染了一个 input 元素,并通过 forwardRef 将父组件创建的 ref 传递给这个元素,从而可以在父组件中通过 ref.current 来调用 input 这个 DOM 元素上的方法 focus。
  • 结合使用 forwardRef 和 useImperativeHandle 时,可以自定义父组件通过 ref 访问到的子组件的方法。这就意味者你可以暴露子组件内部自定义的函数给父组件,而不仅仅是 DOM 节点。在第二个例子中,父组件并没有直接操作子组件的 DOM 元素,而是通过 ref 来调用子组件暴露给父组件的 handleFocus 方法来达到效果。
相关推荐
智能化咨询7 分钟前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang10 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼13 分钟前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css
前端君9 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_61410 小时前
Web前端面试题(2)
前端