React `useRef` Hook

这个useRefHook 允许您在渲染之间保留值。

它可用于存储可变值，该值在更新时不会导致重新渲染。

它可用于直接访问 DOM 元素。

不会导致重新渲染

如果我们尝试计算应用程序使用以下方式渲染的次数useStateHook，我们会陷入无限循环，因为这个 Hook 本身会导致重新渲染。

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

例子：

使用useRef跟踪应用程序渲染。

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)。

就像这样做：const count = {current: 0}。我们可以通过使用来访问计数count.current。

在您的计算机上运行此程序并尝试输入输入以查看应用程序渲染计数的增加。

访问 DOM 元素

一般来说，我们希望让 React 处理所有 DOM 操作。

但也有一些情况useRef可以使用而不会引起问题。

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

例子：

使用useRef集中输入：

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 />);

运行示例 »

跟踪状态变化

这个useRefHook 还可用于跟踪以前的状态值。

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

例子：

使用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，我们正在更新useRef每次的当前值inputValue通过在输入字段中输入文本来更新。

React useRef Hook

不会导致重新渲染

例子：

访问 DOM 元素

例子：

跟踪状态变化

例子：

React `useRef` Hook