你不知道的 useRef

2024-02-20 06:55:04

useRef 是 React hook 中的一个非常有用的工具，它允许我们直接访问 DOM 元素。这对于需要与 DOM 元素进行交互的组件非常有用，例如输入字段、按钮和图像。

useRef 的语法非常简单：

const ref = useRef();

这将创建一个新的 ref 对象，它可以被用来存储对 DOM 元素的引用。要将 ref 对象附加到 DOM 元素，我们可以使用 ref 属性：

<input ref={ref} />

现在，我们可以使用 ref.current 属性来访问 DOM 元素：

ref.current.focus();

这将把焦点设置到输入字段上。

useRef 与其他 React hook 有几个区别。首先，useRef 不是一个状态 hook。这意味着它不会触发重新渲染。其次，useRef 是一个持久引用。这意味着即使组件重新渲染，它也不会改变。

useRef 可以用于各种各样的目的。以下是一些示例：

访问 DOM 元素
聚焦输入字段
滚动到特定元素
测量元素的尺寸
创建自定义动画

useRef 是一个非常强大的工具，它可以帮助我们创建更强大的 React 组件。如果您需要与 DOM 元素进行交互，那么 useRef 是一个很好的选择。

现在，让我们来看看一些使用 useRef 的示例。

示例 1：聚焦输入字段

import React, { useRef } from "react";

const InputFocus = () => {
  const inputRef = useRef();

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

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default InputFocus;

这个示例创建了一个简单的组件，它包含一个输入字段和一个按钮。当用户点击按钮时，输入字段将被聚焦。

示例 2：滚动到特定元素

import React, { useRef } from "react";

const ScrollToElement = () => {
  const elementRef = useRef();

  const scrollToElement = () => {
    elementRef.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div>
      <div ref={elementRef}>This is the element</div>
      <button onClick={scrollToElement}>Scroll to Element</button>
    </div>
  );
};

export default ScrollToElement;

这个示例创建了一个简单的组件，它包含一个元素和一个按钮。当用户点击按钮时，元素将被滚动到视图中。

示例 3：测量元素的尺寸

import React, { useRef } from "react";

const MeasureElement = () => {
  const elementRef = useRef();

  const measureElement = () => {
    const element = elementRef.current;
    console.log(`Width: ${element.offsetWidth}px`);
    console.log(`Height: ${element.offsetHeight}px`);
  };

  return (
    <div>
      <div ref={elementRef}>This is the element</div>
      <button onClick={measureElement}>Measure Element</button>
    </div>
  );
};

export default MeasureElement;

这个示例创建了一个简单的组件，它包含一个元素和一个按钮。当用户点击按钮时，元素的尺寸将被测量并打印到控制台中。

示例 4：创建自定义动画

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

const CustomAnimation = () => {
  const elementRef = useRef();

  useEffect(() => {
    const element = elementRef.current;

    // Create a new animation
    const animation = element.animate([
      { transform: "translateX(0px)" },
      { transform: "translateX(100px)" },
      { transform: "translateX(0px)" }
    ], {
      duration: 1000,
      iterations: Infinity
    });

    // Stop the animation when the component is unmounted
    return () => {
      animation.cancel();
    };
  }, []);

  return (
    <div>
      <div ref={elementRef}>This is the element</div>
    </div>
  );
};

export default CustomAnimation;