菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

React useRef Hook


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

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

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


不引起重新渲染

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

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

示例

使用 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 来访问 count。

在你的电脑上运行此代码,尝试输入内容,看看应用程序的渲染计数如何增加。


w3schools CERTIFIED . 2022

获得认证!

完成 React 模块,完成练习,参加考试,并获得 w3schools 认证!

$95 注册

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

运行示例 »


跟踪状态更改

useRef Hook 还可以用来跟踪前一个状态值。

这是因为我们可以在渲染之间持久化 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 />);

运行示例 »

这次我们结合使用 useStateuseEffectuseRef 来跟踪前一个状态。

useEffect 中,每次通过在输入框中输入文本来更新 inputValue 时,我们都在更新 useRef 的当前值。


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持