useRef 简单易懂解析（二）useRef 的例子

2023-12-27 09:38:29

useRef：React 中的秘密武器

获取和控制 DOM 元素

useRef 是 React 中一个强大的 API，它让我们能够存储在组件重新渲染时不会丢失的数据。我们最常见的用例之一是获取和控制 DOM 元素。通过使用 useRef，我们可以访问 DOM 元素的底层属性，并在必要时操作它们。

一个常见的例子是获取按钮元素并附加事件侦听器。

import React, { useRef } from "react";

function App() {
  const buttonRef = useRef();

  const handleClick = () => {
    console.log(buttonRef.current); // 输出按钮的 DOM 元素
  };

  return (
    <button ref={buttonRef} onClick={handleClick}>
      点击我
    </button>
  );
}

export default App;

聚焦元素

useRef 还可用于轻松地聚焦元素。这对于自动聚焦输入字段或在用户与特定元素交互时切换焦点非常有用。

import React, { useRef } from "react";

function App() {
  const inputRef = useRef();

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

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

export default App;

测量元素

衡量元素的尺寸和位置对于创建响应式布局和实现流畅的动画至关重要。useRef 允许我们访问元素的 DOM 属性，从而可以轻松测量它们。

import React, { useRef } from "react";

function App() {
  const elementRef = useRef();

  const measureElement = () => {
    const element = elementRef.current;
    console.log(`宽度：${element.clientWidth}px`);
    console.log(`高度：${element.clientHeight}px`);
  };

  return (
    <>
      <div ref={elementRef}>这是一个元素</div>
      <button onClick={measureElement}>测量元素</button>
    </>
  );
}

export default App;

滚动元素

滚动元素是另一个可以通过 useRef 轻松实现的交互。它允许我们平滑地滚动列表或容器，从而提供更好的用户体验。

import React, { useRef } from "react";

function App() {
  const listRef = useRef();

  const scrollToTop = () => {
    listRef.current.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };

  return (
    <>
      <ul ref={listRef}>
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
      </ul>
      <button onClick={scrollToTop}>滚动到顶部</button>
    </>
  );
}

export default App;

动画

useRef 为我们提供了在 React 组件中创建动态和引人入胜的动画的机会。通过操纵 CSS 类和 DOM 属性，我们可以实现各种效果，例如淡入淡出、滑动和旋转。

import React, { useRef, useEffect } from "react";

function App() {
  const elementRef = useRef();

  useEffect(() => {
    const element = elementRef.current;
    element.classList.add("fade-in");
  }, []);

  return <div ref={elementRef}>这是一个元素</div>;
}

export default App;