使用 useRef 示例 - JavaScript

在 React 中，我们通常使用 useState 来在组件之间存储和更新数据。但是有时需要访问某个组件中的 DOM 节点或其他 React 元素，这时 useRef 可以派上用场。

useRef 是一个 React Hook，它接受一个初始值作为参数，并返回一个可变的 ref 对象。

如何使用 useRef？

以下是使用 useRef 的基本结构：

import React, { useRef } from "react";

function App() {
  const refContainer = useRef(initialValue);

  return (
    <div>
    ...
    </div>
  );
}

• import useRef 从 react 中引入。
• 在函数组件中，使用 const refContainer = useRef(); 创建一个 ref。
• initialValue 是可选的，可以作为参数传递给 useRef，它的值将用于初始化 ref 的 .current 属性。

useRef 的用途

1. 访问 DOM 元素

使用 useRef 可以轻松地访问 DOM 元素。例如，在以下示例中，我们使用 useRef 参考一个 input 元素并在按钮点击时使用它的值。

import React, { useRef } from "react";

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

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

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Show Input Value</button>
    </div>
  );
}

2. 存储先前的值

在以下示例中，我们使用 useRef 存储先前的值，然后在渲染期间比较它与新值是否相同。如果值没有更改，则更新 UI。

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

function App() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current;

  return (
    <div>
      <p>Current count: {count}</p>
      {prevCount && <p>Previous count: {prevCount}</p>}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3. 存储组件引用

useRef 还可以用于存储组件引用。在以下示例中，我们使用 useRef 存储对子组件的引用，并在父组件中调用子组件方法。

import React, { useRef } from "react";

function ChildComponent({ handleClick }) {
  const buttonRef = useRef();

  const onClick = () => {
    handleClick();
  };

  return (
    <div>
      <button onClick={onClick} ref={buttonRef}>
        Click Me
      </button>
    </div>
  );
}

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

  const handleClick = () => {
    console.log("Button clicked!");
  };

  return (
    <div>
      <ChildComponent handleClick={handleClick} ref={childRef} />
      <button onClick={() => childRef.current.buttonRef.current.click()}>
        Click Child Button
      </button>
    </div>
  );
}

总结

useRef 是一个非常实用的 React Hook，可用于访问 DOM 元素、存储先前的值和存储组件引用。通过使用 useRef，我们可以更轻松地处理 React 中的某些任务。