React useRef Hook

The useRef Hook 允许你在渲染之间保持值。

它可以用来存储一个可变的值，该值在更新时不会导致重新渲染。

它可以用来直接访问 DOM 元素。

不会导致重新渲染

如果我们尝试使用 useState Hook 来计算我们的应用程序渲染了多少次，我们将陷入无限循环，因为这个 Hook 本身会导致重新渲染。

为了避免这种情况，我们可以使用 useRef Hook。

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [inputValue, setInputValue] = useState("");
  const count = useRef(0);

  useEffect(() => {
    count.current = count.current + 1;
  });

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

useRef() 只返回一个项目。它返回一个名为 current 的对象。

当我们初始化 useRef 时，我们设置初始值：useRef(0)。

在你的电脑上运行它，并尝试在输入框中输入内容，查看应用程序渲染计数的增加。

访问 DOM 元素

通常，我们希望让 React 处理所有 DOM 操作。

但是，在某些情况下，useRef 可以使用而不会造成问题。

在 React 中，我们可以向元素添加一个 ref 属性以直接在 DOM 中访问它。

import { useRef } from "react";
import ReactDOM from "react-dom/client";

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

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

  return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

跟踪状态变化

The useRef Hook 还可以用来跟踪先前状态的值。

这是因为我们能够在渲染之间保持 useRef 值。

import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [inputValue, setInputValue] = useState("");
  const previousInputValue = useRef("");

  useEffect(() => {
    previousInputValue.current = inputValue;
  }, [inputValue]);

  return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

这次我们使用 useState、useEffect 和 useRef 的组合来跟踪先前状态。

在 useEffect 中，我们每次通过在输入字段中输入文本更新 inputValue 时，都会更新 useRef 的当前值。