4 Lỗi Phổ Biến, Có Thể Bạn Mắc Phải
Bề ngoài ReactJS cung cấp cho bạn một cách để xây dựng logic và UI người dùng một cách đơn giản. Nhưng trên thực tế nó cũng rất dễ khiến bạn lập trình giảm hiểu suất app hoặc website của bạn, nếu bạn không thật sự hiểu rõ ReactJS. Dưới đây mình liệt kệ 4 trường hợp hay mắc phải:
1. Tính toán quá nhiều lần
2. Prop Drilling
3. Quên xóa một số sự kiện khi sử dụng `useEffect`.
4. Không viết custom hook
1. Tính toán quá nhiều lần
Không ai phủ nhận việc khi functional component ra đời đã giúp việc viết một trở nên ngắn gọn hơn, nhanh hơn, vì nó giống với cách viết của một . Tuy nhiên chính vì sự tối giản này nên việc cần phải xem xét cẩn thận hơn. Ví dụ:
Hàm đang cần phụ thuộc vào state để thực thi một đoạn mã tính toán lớn nào đó. Tuy nhiên khi state hay mọi state nào có trong này thay đổi thì bigQuery đều phải chạy lại thêm cùng với lần rerender đó. Trường hợp này mình cần sử dụng để tránh việc tính toán lại.
Điều này có nghĩa khi dependencies thay đổi thì mới được thực thi lại.
2. Prop Drilling
Prop drilling là một thuật ngữ không chính thức để chỉ việc truyền dữ liệu từ component cha qua các component con lồng nhau để đến được với component con sâu hơn. Vấn đề chỉ thật sự xảy ra khi quá trình truyền dữ liệu này qua các component con mà trên thực tế chúng đang không cần sử dụng dự liệu này mà chỉ đơn giản là con đường vận chuyển đến với component cần được sử dụng.
Ví dụ:
Để giải quyết vấn đề này mình sử dụng .
3. Quên xóa một số sự kiện khi sử dụng .
Giống với class component, khi chúng ta thực hiện một số sự kiện nào đó, sau đó chúng ta phải sử dụng để dọn dẹp chúng đi. Ví dụ: