Giới thiệu

React là một thư viện front-end phổ biến, dễ học và dễ sử dụng. Tuy nhiên, có một số khái niệm mà các nhà phát triển nên hiểu để viết mã hiệu quả và hiệu quả. Trong bài viết này, chúng ta sẽ thảo luận về một số vấn đề và khái niệm liên quan đến cách thức hoạt động của trạng thái và hiệu ứng trong React.

Bắt nguồn từ Nhà nước

Đôi khi, chúng ta cần tạo một biến trạng thái phụ thuộc vào một biến trạng thái khác. Một cách để làm điều này là sử dụng hook useEffect và cập nhật biến trạng thái phụ thuộc vào biến trạng thái khác.

Ví dụ: giả sử chúng ta có một thành phần select hiển thị danh sách ID người dùng. Chúng tôi muốn theo dõi ID người dùng đã chọn bằng biến trạng thái userId . Đây là cách chúng ta có thể làm điều này:

Bây giờ, giả sử chúng ta muốn hiển thị người dùng đã chọn trên màn hình. Chúng ta có thể tạo một biến trạng thái khác có tên là selectedUser và cập nhật nó bất cứ khi nào userId thay đổi bằng cách sử dụng hook useEffect .

Cách tiếp cận này hoạt động, nhưng nó không phải là cách hiệu quả nhất để cập nhật selectedUser . Vấn đề với phương pháp này là thành phần đầu tiên hiển thị khi userId thay đổi và sau đó hook useEffect được kích hoạt sau khi kết xuất vì userId được chuyển vào mảng phụ thuộc của nó. Điều này có nghĩa là thành phần hiển thị hai lần chỉ để cập nhật selectedUser , lần đầu tiên khi userId thay đổi và lần thứ hai khi hook useEffect cập nhật selectedUser .

Cách tiếp cận tốt hơn là chỉ cần lấy trực tiếp giá trị của selectedUser từ userId .

Điều này hoạt động vì người dùng selectedUser được lấy trực tiếp từ userId và không được theo dõi dưới dạng một biến trạng thái riêng biệt. Điều này có nghĩa là thành phần sẽ chỉ hiển thị lại khi userId thay đổi, thay vì hiển thị lại hai lần như trong ví dụ trước.

Đặt trạng thái bên trong Trình xử lý sự kiện

Đôi khi, chúng ta cần cập nhật trạng thái bên trong trình xử lý sự kiện, chẳng hạn như sự kiện nhấp chuột hoặc sự kiện gửi biểu mẫu. Trong những trường hợp này, điều quan trọng là đảm bảo rằng cập nhật trạng thái được thực hiện không đồng bộ để thành phần có cơ hội kết xuất lại trước khi trình xử lý sự kiện kết thúc thực thi.

Dưới đây là một ví dụ về cách thiết lập chính xác trạng thái bên trong trình xử lý sự kiện:

Trong ví dụ này, chúng ta có một thành phần Counter hiển thị số đếm và có một nút tăng số đếm khi được nhấp. Trình xử lý sự kiện handleClick cập nhật biến trạng thái count bằng hàm setCount .

Điều quan trọng cần lưu ý là hàm setCount không đồng bộ, có nghĩa là cập nhật trạng thái có thể không được phản ánh ngay lập tức trong thành phần. Thay vào đó, thành phần sẽ kết xuất lại sau khi trình xử lý sự kiện kết thúc thực thi.

Nếu chúng ta cần thực hiện một thao tác phụ thuộc vào giá trị hiện tại của trạng thái, chúng ta có thể chuyển một hàm cho hàm setCount , như sau:

Trong ví dụ này, hàm setCount được gọi với một hàm lấy giá trị hiện tại của count làm đối số và trả về giá trị mới. Điều này đảm bảo rằng cập nhật trạng thái được thực hiện chính xác, ngay cả khi thành phần chưa có cơ hội kết xuất lại.

chức năng dọn dẹp

Đôi khi, chúng ta cần thực hiện một số hành động dọn dẹp khi một thành phần không được đếm hoặc khi một điều kiện nhất định không còn được đáp ứng. Trong những trường hợp này, chúng ta có thể sử dụng chức năng dọn dẹp với hook useEffect .

Hàm dọn dẹp là một hàm được gọi khi một thành phần không được đếm hoặc khi các thành phần phụ thuộc của hook useEffect thay đổi. Đó là một nơi tốt để thực hiện bất kỳ công việc dọn dẹp cần thiết nào, chẳng hạn như hủy yêu cầu mạng hoặc xóa trình lắng nghe sự kiện.

Dưới đây là một ví dụ về cách sử dụng chức năng dọn dẹp với hook useEffect :