useRef案例详解：React中的useRef使用教程

本文详细介绍了React中useRef的使用方法和应用场景，通过多个useRef案例展示了如何获取DOM节点和管理变量引用。文章还对比了useRef与useState的区别，并通过示例说明了它们各自的适用场景。

1. 引入React及useRef的基本概念

React 是一个用于构建用户界面的 JavaScript 库，它允许开发人员通过声明式编程方式来创建交互式的 Web 应用程序。React 的核心理念之一是“组件化”，即将复杂的 UI 分解成多个可复用的组件。每个组件都可以封装自己的状态和行为，使得代码更加模块化和易于维护。

在 React 中，Hooks 是一类特殊的函数，它们允许你在不编写类组件的情况下使用 React 的生命周期、状态和其他特性。其中，useRef 是一个常用的 Hooks，用于在函数组件中访问 DOM 节点或在组件的生命周期内持久化数据，而不引起组件的重新渲染。

2. useRef的语法及基本用法

useRef 的语法如下：

const ref = useRef(initialValue);

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的 initialValue 参数。该对象在组件的整个生命周期内保持不变，因此可以用来保存任何需要持久化的值，例如 DOM 节点。

例如，下面的代码展示了一个简单的 useRef 使用例子：

import React, { useRef } from 'react';

function Example() {
  const textInput = useRef(null);

  const focusTextInput = () => {
    if (textInput.current) {
      textInput.current.focus();
    }
  };

  return (
    <div>
      <input ref={textInput} type="text" />
      <button onClick={focusTextInput}>Focus the text input</button>
    </div>
  );
}

export default Example;

在这个例子中，textInput 是一个 useRef 对象，初始值为 null。在组件渲染时，通过将 ref 属性设置为 textInput，textInput.current 将指向实际的 <input> DOM 节点。focusTextInput 函数可以通过 textInput.current 来访问并操作这个 DOM 节点。

3. useRef案例一：获取DOM节点

useRef 可用于获取 DOM 节点，这对于需要直接操作 DOM 的场景非常有用。例如，假设有一个输入框，希望能够自动聚焦到该输入框：

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const textInput = useRef(null);

  const focusTextInput = () => {
    if (textInput.current) {
      textInput.current.focus();
    }
  };

  return (
    <div>
      <input ref={textInput} type="text" />
      <button onClick={focusTextInput}>Focus the text input</button>
    </div>
  );
}

export default TextInputWithFocusButton;

在这个示例中，useRef 用于获取输入框的 DOM 节点，并通过点击按钮将焦点设置到该输入框上。注意，ref 属性允许组件直接访问 DOM 节点，这在需要与 DOM 进行交互时非常有用。

4. useRef案例二：管理变量引用

除了获取 DOM 节点，useRef 还可以用于管理引用变量。这对于在组件的生命周期内维持变量引用非常有用。例如，可以使用 useRef 来保存一些不会引起组件重新渲染的值。

import React, { useRef } from 'react';

function Counter() {
  const countRef = useRef(0);

  const incrementCount = () => {
    countRef.current += 1;
  };

  return (
    <div>
      <h1>Count: {countRef.current}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Counter;

在这个示例中，countRef 用于保存计数器的值。每次点击按钮时，都会更新 countRef.current 的值。因为 useRef 不会直接触发组件的重新渲染，所以这种方式可以有效避免不必要的渲染。

5. useRef与useState的区别

useRef 和 useState 都是 React 中使用状态和变量管理的重要 Hooks，但它们在用途上有一定的区别。

• useState 用于管理状态变量，其变化会触发组件的重新渲染。
• useRef 用于访问 DOM 节点或在组件生命周期内持久化数据，其变化不会触发组件的重新渲染。

具体来说，useState 的作用是更新状态值并触发组件重新渲染，这适用于任何需要引起重新渲染的情况。而 useRef 的作用是持久化数据和访问 DOM 节点，适用于不需要重新渲染的情况。

例如，下面的代码对比了 useState 和 useRef 的使用场景：

import React, { useState, useRef } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  const incrementCount = () => {
    setCount(count + 1);
    countRef.current += 1;
  };

  return (
    <div>
      <h1>Count (useState): {count}</h1>
      <h1>Count (useRef): {countRef.current}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

export default Example;

在这个示例中，useState 用于更新 count 并触发重新渲染，而 useRef 用于维护一个不引起重新渲染的计数器。可以看到，更新 countRef.current 并不会导致组件重新渲染。

6. 实践练习：运用useRef解决实际问题

为了更好地理解 useRef 的应用，我们可以解决一个实际问题：在输入框中输入文字时，实时显示当前文本的长度。

import React, { useRef, useState } from 'react';

function TextInputWithTextLength() {
  const [text, setText] = useState('');
  const textInput = useRef(null);

  const onChange = (event) => {
    const inputText = event.target.value;
    setText(inputText);
  };

  return (
    <div>
      <input ref={textInput} value={text} onChange={onChange} />
      <h1>Text Length: {text.length}</h1>
      <button onClick={() => textInput.current.focus()}>Focus the text input</button>
    </div>
  );
}

export default TextInputWithTextLength;

在这个示例中，useRef 用于获取输入框的 DOM 节点，以便在需要时手动聚焦输入框。useState 用于管理输入框的值，并实时更新文本长度。通过这种方式，我们可以更灵活地处理 DOM 操作和状态管理。

总结

useRef 是一个非常有用的 React Hooks，它可以用来获取 DOM 节点和持久化数据，而不引起组件的重新渲染。通过上面的示例，我们展示了 useRef 在获取 DOM 节点和管理变量引用方面的应用。在使用 useRef 时，要注意区分它与 useState 的不同用途，以确保在合适的场景下使用合适的 Hooks。通过这些示例，你可以更好地理解如何在实际项目中运用 useRef 来优化代码和用户体验。

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const textInput = useRef(null);

  const focusTextInput = () => {
    if (textInput.current) {
      textInput.current.focus();
    }
  };

  return (
    <div>
      <input ref={textInput} type="text" />
      <button onClick={focusTextInput}>Focus the text input</button>
    </div>
  );
}

export default TextInputWithFocusButton;