5 Khái Niệm Cơ Bản Mọi Nhà Phát Triển Cần Có

Tram Ho

React là một thư viện front-end phổ biến, dễ học. Tuy nhiên, các nhà phát triển cần hiểu một số khái niệm để viết mã nhanh và hiệu quả. Bài viết này trình bày chi tiết các lưu ý và khái niệm liên quan đến cách các trạng thái và hiệu ứng hoạt động trong React .

lấy được trạng thái

Đô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 đó là sử dụng hook useEffect để cập nhật các biến trạng thái phụ thuộc. Ví dụ: giả sử bạn có một thành phần select hiển thị danh sách ID người dùng. Tôi muốn theo dõi id người dùng đã chọn trong biến trạng thái userId . Để làm như vậy, hãy làm như sau:

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

Cách tiếp cận này hiệu quả nhưng 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 hiển thị đầu tiên khi userId thay đổi, sau đó móc useEffect được kích hoạt, vì vậy userId được chuyển đến mảng phụ thuộc. Điều này có nghĩa là thành phần sẽ được hiển thị hai lần để 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à lấy giá trị của selectUser trực tiếp 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, không phải hai lần như trong ví dụ trước.

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

Đôi khi, bạn 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à phải đảm bảo rằng các 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 thực thi xong.

Một ví dụ về cách đặt trạng thái chính xác 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 được gọi là ” Counter ” có nút tăng số lượng khi được nhấp, hiển thị số lượng. handleClick sử dụng hàm setCount để cập nhật biến trạng thái count .

Điều quan trọng cần lưu ý là hàm setCount không đồng bộ, nghĩa là các 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 được kết xuất lại khi trình xử lý sự kiện kết thúc thực thi.

Nếu bạn cần thực hiện một thao tác phụ thuộc vào giá trị trạng thái hiện tại, bạn có thể chuyển một hàm cho hàm setCount . Ví dụ:

Trong ví dụ này, hàm setCount được gọi với giá trị count hiện tại và một hàm trả về giá trị mới. Điều này đảm bảo rằng các cập nhật trạng thái được thực hiện chính xác ngay cả khi thành phần đó không bao giờ 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 các hành động dọn dẹp khi một thành phần không được đếm hoặc một số điều kiện không còn được đáp ứng. Trong những trường hợp này, bạn 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 phần phụ thuộc trong hook useEffect thay đổi. Đây là một nơi tốt để thực hiện mọi thao tác dọn dẹp cần thiết như hủy yêu cầu mạng hoặc xóa trình lắng nghe sự kiện.

Một ví dụ về cách sử dụng chức năng dọn dẹp với hook useEffect :

Trong ví dụ này, tôi có một thành phần được gọi là Users truy xuất người dùng từ API phụ trợ dựa trên biến trạng thái userId . useEffect được sử dụng để kích hoạt tìm nạp khi userId thay đổi.

useEffect cũng có chức năng dọn dẹp sẽ được gọi nếu thành phần không được đếm hoặc biến trạng thái userId đã thay đổi. Trong trường hợp này, chức năng dọn dẹp chỉ ghi một thông báo vào bảng điều khiển.

Điều quan trọng là chức năng dọn dẹp chỉ được gọi khi các thành phần phụ thuộc trong hook useEffect thay đổi hoặc thành phần không được đếm. Điều này có nghĩa là nếu biến trạng thái userId thay đổi nhưng phụ thuộc hook useEffect thì không, hàm dọn dẹp sẽ không được gọi.

Cập nhật trạng thái khi prop thay đổi

Đôi khi chúng ta cần cập nhật trạng thái thành phần dựa trên các đạo cụ được truyền cho thành phần. Trong những trường hợp này, bạn có thể sử dụng hook useEffect để phát hiện khi chỗ dựa thay đổi và cập nhật trạng thái tương ứng.

Một ví dụ về cách cập nhật trạng thái khi prop thay đổi:

Trong ví dụ này, chúng tôi có một thành phần được gọi là ” User ” truy xuất người dùng từ API phụ trợ dựa trên userId prop. Một hook useEffect được sử dụng để kích hoạt tìm nạp khi prop userId thay đổi.

Điều quan trọng là mảng phụ thuộc trong hook useEffect phải chứa các props và biến trạng thái mà hiệu ứng phụ thuộc vào. Trong trường hợp này, hiệu ứng phụ thuộc vào chỗ dựa userId , do đó, nó được bao gồm trong mảng phụ thuộc.

Nếu phụ thuộc hook useEffect không được chỉ định chính xác, các hiệu ứng có thể được kích hoạt không cần thiết, điều này có thể dẫn đến các vấn đề về hiệu suất.

lưu trạng thái ở cùng một vị trí

Đôi khi tôi cần giữ nguyên trạng thái của một thành phần khi vẽ lại trang ở vị trí cũ. Trong những trường hợp này, bạn có thể sử dụng useState useMemo để lưu trạng thái.

useMemo hook là một tối ưu hóa hiệu suất cho phép các giá trị được ghi nhớ để chúng chỉ được tính toán lại khi các thành phần phụ thuộc thay đổi. Điều này hữu ích để duy trì trạng thái thành phần khi kết xuất lại ở cùng một vị trí.

Một ví dụ về cách sử dụng hook useMemo để lưu trạng thái thành phần:

Trong ví dụ này, tôi có một thành phần gọi là “Bộ đếm”, với một nút tăng số lượng khi được nhấp và hiển thị số lượng. Hàm ‘ gia số ‘ được tạo bằng useMemo increment chỉ được tính toán lại nếu biến trạng thái count thay đổi. Điều này có nghĩa là hàm ‘ increment ‘ sẽ luôn có giá trị chính xác là ‘ count ‘ ngay cả khi thành phần ‘ Counter ‘ được vẽ lại ở cùng một vị trí.

Điều quan trọng là mảng phụ thuộc của hook useMemo phải chứa các biến trạng thái và đạo cụ mà giá trị được ghi nhớ phụ thuộc vào. Trong trường hợp này, hàm ‘ increment ‘ phụ thuộc vào biến trạng thái count , vì vậy nó được bao gồm trong mảng phụ thuộc.

Nếu các phụ thuộc hook useMemo không được chỉ định chính xác, các giá trị được ghi nhớ có thể được tính toán lại một cách không cần thiết, điều này có thể dẫn đến các vấn đề về hiệu suất.

Phần kết luận

Chúng ta đã nói về một số khái niệm liên quan đến trạng thái và hiệu ứng trong React . Tạo trạng thái, thiết lập trạng thái trong trình xử lý sự kiện, sử dụng hook useEffect và chức năng dọn dẹp, cập nhật trạng thái khi đạo cụ thay đổi và hiển thị lại ở cùng một vị trí Chúng tôi đã đề cập đến những thứ như giữ trạng thái thành phần.

Việc hiểu các khái niệm này rất quan trọng để viết mã hiệu quả và hiệu quả trong React, cũng như hiểu cách các trạng thái và hiệu ứng hoạt động trong khung React .

Như mọi khi, tôi hy vọng bạn thích bài viết này và học được điều gì đó mới.

Cảm ơn rất nhiều. Hẹn gặp lại các bạn trong bài viết tiếp theo!

Nếu các bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách like và subscribe. Cảm ơn rất nhiều.

Giới thiệu

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo