React Hook 学习之旅：探索 useRef 的奇妙世界

2023-11-11 06:22:56

引言

在上一篇 React Hook 学习之旅中，我们了解了如何使用 useCallback 和 useEffect Hook 来管理组件的状态。本篇旅程，我们将继续探索另一位强大的 Hook —— useRef。useRef Hook 允许我们引用组件中的值，而不会导致重新渲染。这在某些情况下非常有用，例如：

当你想在组件中存储一个值，但又不想让它触发重新渲染时。
当你想引用 DOM 元素时。
当你想在组件之间共享数据时。

useRef 的用法

useRef Hook 的用法非常简单。首先，你需要导入它：

import React, { useRef } from "react";

然后，你可以在组件中使用它来创建一个 ref：

const ref = useRef();

这个 ref 可以被用来引用任何值。例如，你可以引用一个字符串：

ref.current = "Hello, world!";

或者你可以引用一个 DOM 元素：

const element = document.getElementById("my-element");
ref.current = element;

useRef 的优势

useRef Hook 具有以下几个优势：

它不会导致重新渲染。 因为 useRef Hook 不会触发重新渲染，所以它非常适合存储那些你不希望在组件重新渲染时发生变化的值。
它可以引用 DOM 元素。 useRef Hook 可以用来引用 DOM 元素，这在某些情况下非常有用，例如：
- 当你想在组件中操纵 DOM 元素时。
- 当你想在组件之间共享 DOM 元素时。
它可以在组件之间共享数据。 useRef Hook 可以用来在组件之间共享数据，这在某些情况下非常有用，例如：
- 当你想在父组件和子组件之间共享数据时。
- 当你想在不同的组件之间共享数据时。