ReactJS - Sử dụng useRef: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn, những nhà phát triển React tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của React hooks, cụ thể là hook useRef. Đừng lo lắng nếu bạn mới bắt đầu lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, giải thích từng bước. Vậy, hãy lấy một cốc cà phê (hoặc trà, nếu bạn thích), và cùng nhau bắt đầu nhé!

useRef là gì?

Trước khi bắt đầu viết mã, hãy hiểu useRef hoạt động như thế nào. Hãy tưởng tượng bạn có một hộp ma thuật có thể chứa bất kỳ giá trị nào bạn muốn, và hộp này không thay đổi ngay cả khi thành phần của bạn được re-render. Đó chính xác là điều useRef làm cho chúng ta trong React!

useRef là một hook cung cấp cách để tạo một tham chiếu có thể thay đổi mà tồn tại跨越 thành phần re-render. Nó giống như có một ngăn bí mật trong thành phần của bạn nơi bạn có thể lưu trữ thông tin mà không gây ra re-render khi thông tin đó thay đổi.

Định nghĩa của hook useRef

Hãy cùng xem cách chúng ta sử dụng hook useRef:

const refContainer = useRef(initialValue);

Ở đây, initialValue là giá trị bạn muốn bắt đầu với, và refContainer là một đối tượng có một thuộc tính duy nhất gọi là current. Thuộc tính current giữ giá trị thực tế bạn đang tham chiếu.

Hãy tưởng tượng nó như một hộp đặc biệt có một nhãn trên đó nói "current". Bất kỳ điều gì bạn đặt vào trong hộp này sẽ trở thành giá trị của current.

Áp dụng hook useRef

Bây giờ, hãy xem cách chúng ta có thể sử dụng useRef trong một tình huống thực tế. Hãy tưởng tượng chúng ta muốn tạo một ô nhập văn bản đơn giản mà khi nhấp vào, tự động聚焦 và cho phép người dùng bắt đầu gõ.

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

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

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

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

Hãy phân tích điều này:

1. Chúng ta nhập useRef cùng với useEffect từ React.
2. Chúng ta tạo một tham chiếu叫做 inputRef sử dụng useRef(null).
3. Chúng ta sử dụng hook useEffect để聚焦 vào ô nhập khi thành phần được mount.
4. Trong JSX, chúng ta gắn tham chiếu của chúng ta vào phần tử nhập bằng cách sử dụng thuộc tính ref.

Khi thành phần này render, ô nhập sẽ tự động nhận được focus. Nó giống như phép thuật, phải không? Nhưng nó không phải phép thuật - đó là sức mạnh của useRef!

Các trường hợp sử dụng useRef

Bây giờ chúng ta đã xem qua một ví dụ cơ bản, hãy khám phá thêm một số trường hợp sử dụng cho useRef. Tin tôi đi, hook này linh hoạt hơn cả một cây kéo đa năng!

1. Lưu trữ Giá trị Trước đó

Đôi khi, bạn có thể muốn theo dõi giá trị từ render trước. useRef hoàn hảo cho điều này!

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>Giá trị hiện tại: {count}</p>
<p>Giá trị trước đó: {prevCountRef.current}</p>
<button onClick={() => setCount(count + 1)}>Tăng</button>
</div>
);
}

Trong ví dụ này, chúng ta sử dụng useRef để lưu trữ giá trị trước của count. Mỗi khi count thay đổi, chúng ta cập nhật tham chiếu của chúng ta trong hook useEffect. Bằng cách này, chúng ta luôn có quyền truy cập vào cả giá trị hiện tại và giá trị trước đó.

2. Truy cập vào DOM Elements

useRef cũng rất tuyệt vời để truy cập trực tiếp vào các phần tử DOM. Hãy tạo một thành phần phát video làm ví dụ:

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}>Phát</button>
<button onClick={pauseVideo}>Dừng</button>
</div>
);
}

Ở đây, chúng ta sử dụng useRef để lấy tham chiếu đến phần tử video. Điều này cho phép chúng ta gọi các phương thức như play() và pause() trực tiếp trên phần tử video khi các nút được nhấp.

3. Lưu trữ Giá trị Giữa Các Render

useRef cũng rất hữu ích khi bạn cần lưu trữ một giá trị giữa các render mà không gây ra re-render. Hãy xem một ví dụ:

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>Đếm: {count}</div>;
}

Trong ví dụ này, chúng ta sử dụng useRef để lưu trữ ID interval trả về bởi setInterval. Điều này cho phép chúng ta xóa interval trong hàm làm sạch của hook useEffect, ngăn chặn rò rỉ bộ nhớ.

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của useRef, khám phá签名, cách áp dụng nó và một số trường hợp sử dụng phổ biến. Nhớ rằng, useRef giống như một người bạn trung thành trong hành trình React của bạn - luôn có mặt khi bạn cần theo dõi điều gì mà không gây ra re-render.

Dưới đây là một tóm tắt nhanh về các phương thức chúng ta đã xem qua:

Phương thức	Mô tả
useRef(initialValue)	Tạo một đối tượng tham chiếu với giá trị đầu tiên được cung cấp
ref.current	Truy cập hoặc thay đổi giá trị hiện tại của tham chiếu
<element ref={refObject}>	Gắn tham chiếu vào phần tử DOM

Khi bạn tiếp tục hành trình React của mình, bạn sẽ tìm thấy nhiều cách sáng tạo hơn để sử dụng useRef. Đây là một công cụ mạnh mẽ mà khi sử dụng đúng cách, có thể giải quyết nhiều vấn đề phức tạp trong phát triển React.

Nhớ rằng, chìa khóa để thành thạo React (hoặc bất kỳ khái niệm lập trình nào) là thực hành. Vậy, hãy thử các ví dụ này, thực nghiệm với ý tưởng của riêng bạn, và đừng sợ mắc lỗi. Đó là cách chúng ta đều học hỏi và phát triển như những nhà phát triển.

Chúc các bạn may mắn và hãy mã hóa vui vẻ, và may refs luôn ở bên bạn!

Credits: Image by storyset