ReactJS - 使用 useRef：初学者指南

你好，未来的React开发者们！今天，我们将踏上一段激动人心的旅程，探索React hooks的世界，特别是useRef hook。如果你是编程新手，不用担心——我将作为你的友好向导，一步步解释所有内容。那么，来一杯咖啡（或者如果你的喜好是茶，那就来杯茶），我们开始吧！

useRef是什么？

在开始编码之前，让我们先了解一下useRef。想象你有一个神奇的盒子，可以装下你想要的任何值，而且即使你的组件重新渲染，这个盒子里的内容也不会改变。这就是useRef在React中为我们做的事情！

useRef是一个hook，它提供了一种创建可变引用的方式，这个引用可以跨组件重新渲染保持不变。这就像在你的组件中有一个秘密隔间，你可以在这里存储信息，而不会因为信息的改变而触发重新渲染。

useRef hook的签名

让我们看看如何使用useRef hook：

const refContainer = useRef(initialValue);

这里，initialValue是你想开始的值，refContainer是一个有一个名为current的单一属性的对象。这个current属性持有你引用的实际值。

把它想象成一个上面写着“current”标签的特殊盒子。你放进这个盒子里的任何东西都会成为current的值。

应用ref hook

现在，让我们看看如何在现实世界的场景中使用useRef。想象我们想要创建一个简单的文本输入框，当点击时，它会自动聚焦，允许用户开始输入。

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

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

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

return <input ref={inputRef} />;
}

让我们分解一下：

1. 我们从React中导入了useRef和useEffect。
2. 我们使用useRef(null)创建了一个名为inputRef的引用。
3. 我们使用useEffect hook在组件挂载时聚焦到输入框。
4. 在JSX中，我们使用ref属性将我们的引用附加到输入元素上。

当这个组件渲染时，输入框将自动接收焦点。这就像魔法一样，不是吗？但这不是魔法——这是useRef的力量！

useRef的使用场景

现在我们已经看到了一个基本示例，让我们探索一些useRef的更多使用场景。相信我，这个hook比瑞士军刀还要多用途！

1. 存储之前的值

有时，你可能想要跟踪上一个渲染中的值。useRef非常适合这个！

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

function CounterWithPrevious() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();

useEffect(() => {
prevCountRef.current = count;
}, [count]);

return (
<div>
<p>当前计数：{count}</p>
<p>上一个计数：{prevCountRef.current}</p>
<button onClick={() => setCount(count + 1)}>递增</button>
</div>
);
}

在这个示例中，我们使用useRef来存储我们的count的前一个值。每次count改变时，我们都在useEffect hook中更新我们的引用。这样，我们总是可以访问到当前和上一个计数。

2. 访问DOM元素

useRef也非常适合直接访问DOM元素。让我们以视频播放器组件为例：

import React, { useRef } from 'react';

function VideoPlayer() {
const videoRef = useRef(null);

const playVideo = () => {
videoRef.current.play();
};

const pauseVideo = () => {
videoRef.current.pause();
};

return (
<div>
<video ref={videoRef} src="path/to/your/video.mp4" />
<button onClick={playVideo}>播放</button>
<button onClick={pauseVideo}>暂停</button>
</div>
);
}

在这里，我们使用useRef来获取视频元素的引用。这允许我们直接在视频元素上调用如play()和pause()这样的方法，当按钮被点击时。

3. 在渲染之间保留值

当你需要在渲染之间保留一个值，而不触发重新渲染时，useRef也非常有用。让我们看一个示例：

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

function IntervalCounter() {
const [count, setCount] = useState(0);
const intervalRef = useRef();

useEffect(() => {
intervalRef.current = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);

return () => clearInterval(intervalRef.current);
}, []);

return <div>计数：{count}</div>;
}

在这个示例中，我们使用useRef来存储由setInterval返回的间隔ID。这允许我们在useEffect hook的清理函数中清除间隔，防止内存泄漏。

总结

好了，各位！我们已经穿越了useRef的土地，探索了它的签名、如何应用它以及一些常见的使用场景。记住，useRef就像你在React冒险中的忠实伙伴——当你需要在不触发重新渲染的情况下跟踪某些东西时，它总是随时待命。

以下是我们覆盖的方法的快速回顾：

方法	描述
useRef(initialValue)	创建一个带有提供初始值的ref对象
ref.current	访问或修改ref的当前值
<element ref={refObject}>	将ref附加到DOM元素

随着你继续React的旅程，你会发现更多使用useRef的创造性方法。它是一个强大的工具，正确使用时可以解决React开发中的许多棘手问题。

记住，掌握React（或任何编程概念）的关键是实践。所以，去尝试这些示例，用你自己的想法做实验，不要害怕犯错误。这是我们所有人学习和成长的方式。

快乐编码，愿refs与你同在！

Credits: Image by storyset