Giới Thiệu

Khi tôi bắt đầu tìm hiểu về React, tôi đã từng bị bối rối bởi khái niệm hooks. Tại sao chúng ta cần hooks? Chúng làm gì? Chúng nghe có vẻ phức tạp và huyền bí, đặc biệt là useCallback, useEffect, và useRef. Tuy nhiên, khi tôi xây dựng một dự án nhỏ về tạo mật khẩu, mọi thứ đã trở nên rõ ràng. Trong bài viết này, tôi sẽ chia sẻ hành trình của mình và cách những hooks này giúp cuộc sống của chúng ta trở nên dễ dàng hơn so với lập trình JavaScript thuần.

Khó Khăn Với JavaScript Thuần

Trong JavaScript thuần, nếu bạn muốn:

• Phản hồi khi có sự thay đổi, bạn sẽ phải thêm nhiều eventListeners.
• Lưu trữ một hàm để tránh tái tạo, bạn sẽ phải kiểm soát biến và phạm vi một cách thủ công.
• Giữ một tham chiếu đến một phần tử, bạn sẽ phải làm rối với document.querySelector.

Điều này hoạt động, nhưng thật lộn xộn, lặp lại và không phù hợp khi ứng dụng của bạn phát triển.

Đến Với React Hooks

1. useCallback – Giữ Hàm Trong Bộ Nhớ

Hãy nghĩ về useCallback như một cách nói với React:

"Này React, đừng tạo hàm này nhiều lần trừ khi một trong những thứ này thay đổi."

Nó chủ yếu là một bộ nhớ hàm.

Cú Pháp:

const cachedFunction = useCallback(() => {
  // logic của hàm của bạn
}, [dependencies]);

Trong Dự Án Tạo Mật Khẩu của Tôi:

Khi tôi thay đổi độ dài mật khẩu, bật tắt số hoặc ký tự, tôi muốn hàm tạo mật khẩu được cập nhật chỉ khi những thứ đó thay đổi.

const passwordGenerator = useCallback(() => {
  let pass = "";
  let str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  if (numberAllowed) str += "0123456789";
  if (charAllowed) str += "!@#$%^&*(){}[]<>?/";

  for (let i = 1; i <= length; i++) {
    const char = Math.floor(Math.random() * str.length);
    pass += str.charAt(char);
  }

  setPassword(pass);
}, [length, numberAllowed, charAllowed, setPassword]);

Bằng cách này, React không lãng phí thời gian tái tạo hàm khi không có gì thay đổi.

2. useEffect – Thực Thi Các Tác Động Bên Ngoài Khi Có Thay Đổi

Nếu useCallback là về việc lưu trữ một hàm, useEffect là về việc chạy một hàm bất cứ khi nào một trạng thái hoặc thuộc tính thay đổi.

Nó giống như nói:

"Bất cứ khi nào những thứ này thay đổi, hãy chạy hàm này LẠI."

Cú Pháp:

useEffect(() => {
  // thực hiện điều gì đó khi dependencies thay đổi
}, [dependencies]);

Trong Dự Án của Tôi:

Bất cứ khi nào length, numberAllowed, hoặc charAllowed thay đổi, tôi muốn tái tạo mật khẩu:

useEffect(() => {
  passwordGenerator();
}, [length, numberAllowed, charAllowed, passwordGenerator]);

Vì vậy, nếu tôi di chuyển thanh trượt cho độ dài hoặc bật tắt các checkbox, mật khẩu sẽ tự động cập nhật. Không cần phải nhấn nút thủ công.

3. useRef – Giữ Tham Chiếu (Không Cần Tái Render)

Đây là cách React nói:

"Đây là một mảnh giấy dính. Đặt nó lên bất kỳ phần tử nào và tôi sẽ theo dõi nó cho bạn."

Khác với trạng thái, việc thay đổi một ref không gây ra tái render.

Cú Pháp:

const myRef = useRef(null);

<input ref={myRef} />

Trong Dự Án của Tôi:

Tôi đã sử dụng useRef để giữ tham chiếu của trường mật khẩu để khi tôi nhấn nút Sao Chép, tôi có thể sao chép văn bản trực tiếp.

const passwordRef = useRef(null);

const copyPasswordToClipboard = useCallback(() => {
  passwordRef.current?.select();
  window.navigator.clipboard.writeText(password);
}, [password]);

Giờ đây, nút sao chép hoạt động trơn tru, và tôi không cần phải truy vấn DOM một cách thủ công.

Những Suy Nghĩ Cuối

Khi tôi đọc về những hooks này lần đầu, tôi đã nghĩ: "Tại sao tôi không thể chỉ viết JavaScript thuần và xong?" Nhưng sau khi sử dụng chúng trong dự án này, tôi nhận ra:

• useCallback giúp chúng ta không phải tái tạo hàm không cần thiết.
• useEffect cho phép chúng ta chạy mã tự động khi các dependencies thay đổi.
• useRef giúp chúng ta tương tác với các phần tử DOM mà không cần tái render.

Chúng đã giúp tôi tạo ra một trình tạo mật khẩu nhỏ gọn, tối ưu và mang đậm phong cách React. 🚀

Vậy lần tới khi hooks làm bạn bối rối, hãy nhớ - chúng ở đây để giúp cuộc sống của bạn dễ dàng hơn, không phải khó khăn hơn. Và nếu bạn gặp khó khăn, hãy thử xây dựng một thứ gì đó nhỏ và thú vị (như một trình tạo mật khẩu). Mọi thứ sẽ rõ ràng hơn rất nhiều.

Thực Hành Tốt Nhất

• Luôn sử dụng các hook theo cách mà mã của bạn vẫn dễ đọc và dễ bảo trì.
• Tránh việc lạm dụng hook để không làm cho mã trở nên phức tạp.

Những Cạm Bẫy Thường Gặp

• Quên thêm dependencies vào mảng trong useEffect hoặc useCallback, điều này có thể dẫn đến lỗi không mong muốn.

Mẹo Tối Ưu Hiệu Suất

• Sử dụng React.memo để tối ưu hóa các component sử dụng hooks.

Câu Hỏi Thường Gặp

1. useCallback có thực sự cần thiết không?

Có, nếu bạn cần tránh việc tái tạo hàm không cần thiết.

2. Khi nào nên sử dụng useEffect?

Khi bạn cần thực hiện các tác động bên ngoài như gọi API hay thay đổi trạng thái dựa vào sự thay đổi của props.

✨ Đó là tất cả cho bài viết này! Tôi rất muốn biết: Hook nào của React đã làm bạn đau đầu nhất khi bạn mới bắt đầu?