useRef课程：React组件中useRef的入门教程

本文详细介绍了useRef课程，解释了useRef在React中的概念和用途，并展示了如何使用useRef来访问和操作DOM节点以及保存和更新变量。通过多个示例，文章进一步说明了useRef在实际开发中的应用场景和注意事项。

在React中，useRef 是一个内置的 Hook，它允许你访问一个可变的值，并且这个值可以在组件的整个生命周期内保持不变。与 useState 不同，useRef 不会触发重新渲染，并且它的值不会因为组件的更新而改变。这使得 useRef 成为处理一些需要持续跟踪的变量或者直接操作 DOM 节点的理想选择。

useRef的概念和用途

useRef 的主要用途是存储一个可变的值，这个值在整个组件的生命周期内保持不变。由于 useRef 创建的引用对象中的 .current 属性可以在整个生命周期内改变，所以它可以用来保存任意变量，例如 DOM 节点，或者是任意对象。useRef 的一个重要特性是它不触发组件的重新渲染，因此它适合用来存储不需要引起组件重新渲染的数据。

useRef和HTML元素的关系

useRef 可以用来访问 DOM 节点。当你在 JSX 中将一个引用传递给 useRef，那么这个引用对象的 .current 属性会被设置为对应的 DOM 节点。这使得你在 React 组件中可以直接访问和操作 DOM 节点，而无需通过复杂的状态管理来间接操作。

如何使用useRef

创建useRef实例

使用 useRef 创建一个引用对象时，你需要传递一个初始值给 useRef 函数，这个初始值会被设置为引用对象的 .current 属性的初始值。例如：

import React, { useRef } from 'react';

function ExampleComponent() {
  const ref = useRef(42); // 初始值为42

  console.log(ref.current); // 输出：42

  return (
    <div>
      <h1>{ref.current}</h1>
    </div>
  );
}

在这个例子中，ref.current 的初始值被设置为 42，在组件渲染时，ref.current 的值是 42。之后，ref.current 的值可以被修改，但是它不会影响组件的重新渲染。

在组件中使用useRef

在 React 16.8 及以上版本，你可以使用 useRef 来引用组件内的元素。例如，如果你想引用某个特定的 DOM 节点，你可以这样做：

import React, { useRef } from 'react';

function ExampleComponent() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus(); // 让输入框获得焦点
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>点击聚焦</button>
    </div>
  );
}

在这个例子中，我们创建了一个 inputRef 引用对象，并将其赋值给 <input> 元素的 ref 属性。当点击按钮时，inputRef.current.focus() 会调用输入框的 focus() 方法，使输入框获得焦点。

useRef的基本用法示例

获取DOM元素

在 React 中，你可以使用 useRef 来获取 DOM 元素。这在一些场景下非常有用，例如你需要在组件渲染完成后执行一些操作，比如设置焦点、触发事件等。下面是一个简单的示例，展示了如何使用 useRef 来获取 DOM 元素并设置焦点：

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

function InputFocusExample() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Focus me!" />
    </div>
  );
}

在这个示例中，我们创建了一个 inputRef 引用对象，并将其赋值给 <input> 元素的 ref 属性。然后在 useEffect 中调用 inputRef.current.focus() 来让输入框获得焦点。

修改DOM元素的样式和内容

除了获取 DOM 元素外，useRef 还可以用来修改 DOM 元素的样式和内容。下面是一个简单的示例，展示了如何使用 useRef 来改变 DOM 元素的内容和样式：

import React, { useRef } from 'react';

function ChangeContentStyleExample() {
  const contentRef = useRef(null);

  function changeContent() {
    contentRef.current.textContent = "Content changed!";
    contentRef.current.style.color = "red";
  }

  return (
    <div>
      <div ref={contentRef} style={{ color: "black" }}>
        Original content
      </div>
      <button onClick={changeContent}>Change content and style</button>
    </div>
  );
}

在这个示例中，我们创建了一个 contentRef 引用对象，并将其赋值给 <div> 元素的 ref 属性。然后我们定义了一个 changeContent 函数，该函数会改变 <div> 元素的内容和样式。

useRef的应用场景

更新DOM元素

由于 useRef 可以直接操作 DOM 元素，因此它可以用来实现一些需要直接操作 DOM 的功能。例如，你可以在某个事件触发时更新 DOM 元素的内容或样式：

import React, { useRef } from 'react';

function UpdateDOMExample() {
  const contentRef = useRef(null);

  const [text, setText] = React.useState("Initial text");

  function updateText() {
    contentRef.current.textContent = text;
    setText("Updated text");
  }

  return (
    <div>
      <div ref={contentRef} style={{ color: "black" }}>
        {text}
      </div>
      <button onClick={updateText}>Update text</button>
    </div>
  );
}

在这个例子中，我们定义了一个 updateText 函数，该函数会在点击按钮时更新 contentRef.current 的内容，同时更新 text 状态。

保存和更新变量

除了直接操作 DOM 元素外，useRef 还可以用来保存和更新变量。这是因为 useRef 的 .current 属性可以被修改，并且这个修改不会触发组件的重新渲染。因此，你可以使用 useRef 来存储一些不需要引起组件重新渲染的变量：

import React, { useRef } from 'react';

function SaveAndUpdateExample() {
  const counterRef = useRef(0);

  const increment = () => {
    counterRef.current += 1;
  };

  return (
    <div>
      <p>Counter: {counterRef.current}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

在这个例子中，我们定义了一个 counterRef 引用对象，并将其初始值设为 0。然后定义了一个 increment 函数，该函数会在每次点击按钮时增加 counterRef.current 的值，但不会引起组件的重新渲染。

useRef的注意事项

不修改useRef的.current属性

useRef 的主要目的是在组件的整个生命周期内提供一个可变的值。因此，你不应该直接将 useRef 的 .current 属性赋值为新的对象或者函数，因为这可能会导致一些难以追踪的错误。例如：

import React, { useRef } from 'react';

function CounterExample() {
  const counterRef = useRef({ count: 0 });

  const increment = () => {
    counterRef.current = { count: counterRef.current.count + 1 }; // 不推荐的做法
  };

  return (
    <div>
      <p>Count: {counterRef.current.count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

在这个例子中，increment 函数直接将 counterRef.current 设置为一个新的对象，这会导致 counterRef.current 的引用发生变化，而不是仅仅修改它的值。这可能会导致一些难以追踪的错误。

正确的做法是直接修改 counterRef.current 的属性，而不是替换整个对象：

import React, { useRef } from 'react';

function CorrectCounterExample() {
  const counterRef = useRef({ count: 0 });

  const increment = () => {
    counterRef.current.count += 1;
  };

  return (
    <div>
      <p>Count: {counterRef.current.count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

在这个例子中，increment 函数直接修改了 counterRef.current.count 的值，而不是替换整个对象。

useRef和useState、useEffect的对比

useRef 和 useState、useEffect 都是 React 提供的 Hooks，但是它们的作用和使用场景不同。

• useState: 用于管理组件的状态，即组件的状态值会触发组件的重新渲染。
• useEffect: 用于执行副作用操作，例如设置订阅、调用 API、数据获取等。
• useRef: 用于获取 DOM 节点或保存任意可变值，不会触发组件的重新渲染。

例如，如果你需要在组件的状态变化时执行某些操作，你应该使用 useState 和 useEffect，而不是 useRef。你可以这样使用 useState 和 useEffect：

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

function StateExample() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count is ${count}`);
  }, [count]);

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

在这个例子中，我们使用 useState 来管理 count 状态，并使用 useEffect 来在 count 发生变化时执行一些操作。

小结与实践

总结useRef的使用要点

• useRef 主要用于获取 DOM 节点或者保存任意可变值。
• useRef 创建的引用对象的 .current 属性可以在整个组件生命周期内被修改。
• useRef 不会触发组件的重新渲染。
• 如果你需要直接操作 DOM 元素或者保存一些不会引起组件重新渲染的变量，你应该使用 useRef。
• 不应该直接将 useRef 的 .current 属性赋值为新的对象或者函数，应该直接修改其属性。

提供简单的练习题

1. 编写一个 React 组件，该组件包含一个输入框和一个按钮。当点击按钮时，输入框的内容应该设置为 "Hello, World!"。
2. 编写一个 React 组件，该组件包含一个段落和一个按钮。段落的初始内容应该是 "Initial content"，当点击按钮时，段落的内容应该改变为 "Updated content"，并且段落的字体颜色应该变为红色。
3. 编写一个 React 组件，该组件包含一个计数器和一个按钮。计数器的初始值应该是 0，当点击按钮时，计数器的值应该增加 1，但不会引起组件的重新渲染。

这些练习可以帮助你更好地理解 useRef 的使用方法和应用场景。