Hook useRef để làm việc với refs trong React

Trong bài học này, chúng ta sẽ làm việc với refs. Để minh họa rõ ràng, hãy cùng phân tích cách hoạt động của hook useRef so với hook useState.

Hãy tạo một component với một nút bấm:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Import useState vào component:

import { useState } from 'react';

Và tạo một state state:

const [state, setState] = useState(0);

Bây giờ hãy làm sao để khi nhấp vào nút, state của chúng ta sẽ tăng lên 1. Chúng ta sẽ hiển thị giá trị state ngay trong văn bản của nút:

<button onClick={handleStateClick}>
	state click: {state}
</button>

Mô tả hàm xử lý sự kiện nhấp chuột handleStateClick:

function handleStateClick() {
	setState(state + 1);
}

Hãy nhấp vào nút và chúng ta sẽ thấy giá trị state tăng lên.

Bây giờ hãy tạo component App, nhưng sử dụng ref thay vì state.

Đầu tiên, import useRef vào component:

import { useRef } from 'react';

Và tạo một ref ref. Hook useRef trả về một đối tượng ref với thuộc tính duy nhất current, đây là thứ chúng ta sẽ quan tâm sau này. Hãy đặt giá trị ban đầu của nó là 0:

const ref = useRef(0);

Thêm trình xử lý sự kiện click vào nút. Hãy nhớ rằng chúng ta phải đọc/thay đổi không phải bản thân ref, mà là thuộc tính current của nó:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

Thêm hàm xử lý sự kiện click cho nút của chúng ta. Ở đây chúng ta sẽ tăng current lên 1, giống như trong ví dụ trước với state. Khác với state, nơi cần hàm setState để thay đổi giá trị của nó, chúng ta làm việc trực tiếp với thuộc tính của ref:

function handleRefClick() {
	ref.current = ref.current + 1;
}

Bây giờ hãy nhấp vào nút của chúng ta. Và chúng ta thấy gì? Khi nhấp vào nó, giá trị vẫn là 0 như ban đầu và không thay đổi.

Tất nhiên, bạn có thể bắt đầu nghi ngờ rằng giá trị có thực sự thay đổi hay không. Hãy kiểm tra điều đó. Để làm điều này, trong hàm xử lý sự kiện click, hãy thêm một dòng mã nữa để in giá trị current ra console:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

Bây giờ, mở console trong trình duyệt, một lần nữa nhấp vào nút và đảm bảo rằng giá trị thực sự thay đổi với mỗi lần nhấp và không có sự lừa dối nào.

Bây giờ chúng ta thấy rằng, không giống như state, việc thay đổi giá trị của ref không gây ra render lại component. Đó là lý do tại sao mỗi lần trong văn bản của nút, chúng ta đều thấy giá trị ban đầu là 0.

Vì vậy, nếu dữ liệu của bạn được sử dụng để render, hãy lưu trữ chúng trong state, còn nếu bạn không cần render, trong trường hợp đó việc sử dụng ref có thể hiệu quả hơn.

Giả sử trong component của bạn có một đoạn văn với văn bản 'text' và một nút bấm. Hãy làm sao để mỗi lần nhấp vào nút thì một dấu chấm than được thêm vào cuối văn bản của đoạn văn. Hãy thực hiện điều này bằng cách sử dụng state.

Tạo một component App, nhưng thay vì state bây giờ hãy sử dụng ref. Đảm bảo rằng khi nhấn nút, văn bản của đoạn văn sẽ không thay đổi. Cũng hãy thêm việc in văn bản của đoạn văn ra console, mở nó ra và đảm bảo rằng trên thực tế văn bản có thay đổi.