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 來存儲我們計數的前一個值。每次計數改變時，我們都在 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