React là một thư viện UI rất phức tạp, với số lượng lớn UI library đã được tích lũy trong những năm gần đây. Do đó, nếu bạn muốn trở thành một nhà phát triển web chuyên nghiệp trong tương lai thì React là một lựa chọn tốt. Dưới đây là một số các thủ thuật và mẹo giúp bạn nâng cao kỹ năng lập trình của mình khi sử dụng React!

Anti-pattern là gì?

Thuật ngữ này được xuất hiện trong cuốn sách mang tên Anti-Patterns 1998. Các giải pháp được tái sử dụng và được cho là đem lại lợi ích và hiệu quả ở ban đầu lại dần dần có hại nhiều hơn lợi được gọi là Anti-pattern. Việc này xảy ra khi bạn sử dụng pattern không đúng bối cảnh, thời gian hay paradigm không tốt ngay từ ban đầu. Các Antipattern này cũng thường được gọi là pattern thất bại. Tuy nhiên bạn có thể hoàn toàn nhận biết và tránh chúng.

>>> Tham khảo khoá học Reactjs của Mellori tại đây.

Xây dựng component lồng nhau (nested component)

Trong React, chúng ta có thể lồng ghép các thành phần bên trong với nhau. Điều này giúp tạo ra các Giao diện người dùng phức tạp hơn. Các thành phần được lồng bên trong các parent component (component cha) được gọi là các child component. Các từ khóa Import và Export tạo điều kiện cho các component lồng vào nhau.

Nó có thể được gọi là scope component. Khi viết component trong một số trường hợp bạn có thể lồng các component như sau:

Component con sẽ không được sử dụng bên ngoài MainComponent và nó hiện có thể sử dụng name state variable mà không cần nhận nó như prop. Tuy nhiên việc lồng các function này gây ra một vấn đề nhỏ về hiệu suất. Khi component cha được gọi, nó sẽ tạo lại định nghĩa của component con. Nó sẽ tiếp tục khai báo cùng một function lặp đi lặp lại trong mỗi lần thực thi.

Props Drilling

Prop drilling là một tình huống khi cùng một dữ liệu được gửi ở hầu hết mọi cấp do các yêu cầu ở cấp cuối cùng. Prop drilling là quá trình trong ứng dụng React trong đó các prop được chuyển từ phần này sang phần khác bằng cách đi qua các phần khác không cần dữ liệu mà chỉ giúp truyền nó qua tree. 

Vấn đề với phương pháp này là hầu hết các component mà dữ liệu này được truyền qua không có nhu cầu thực tế về dữ liệu này. Chúng chỉ đơn giản được sử dụng làm phương tiện để vận chuyển dữ liệu này đến component cuối của nó. Điều này có thể gây ra các vấn đề lớn về khả năng tái sử dụng thành phần và hiệu suất ứng dụng. 

Sử dụng Context for Scope toàn cầu

Trong một số trường hợp, ranh giới giữa state và context có thể bị hiểu là giống nhau. Tuy nhiên, bạn nên nhớ state và context là hai thuật ngữ riêng biệt và sử dụng trong các trường hợp khác nhau. 

Context cho phép bạn chia sẻ props giữa các component và giúp bạn ngăn chặn hiệu ứng “prop drill down”, nơi bạn cần phải vượt qua cùng một prop qua 4 cấp độ khác nhau chỉ để đến component nó cần.

Mặc khác, state có nghĩa là để quản lý các giá trị, chiếm ưu thế trong toàn bộ ứng dụng. Nếu bạn muốn sử dụng context trong trường hợp này thì bạn cần phải phát triển một trình cung cấp context để wrap toàn bộ ứng dụng của bạn.

Bạn có thể sử dụng context để quản lý global state. Tuy nhiên, khi bắt đầu làm việc đó trên một ứng dụng, bạn có thể sẽ dễ mất kiểm soát. Bạn nên sử dụng Redux để lưu trữ state và sử dụng API context cho các phần cụ thể của ứng dụng của bạn trong context được xác định rõ ràng. 

Components tree lớn trong một the single component

Khi bắt đầu xây dựng một React app có thể bạn thường bắt đầu bằng cách tạo một component lớn, thường là trong app component do CLI tạo ra như create-react-app. Tuy nhiên, điều này dẫn đến anti-pattern có component quá lớn được lồng vào nhau . 

Với một component như vậy, thật khó để hiểu việc tái cấu trúc và kiểm tra. Bạn có thể cải thiện điều đó bằng các cấu trúc lại nó thành các component có thể tái sử dụng để thể hiện tốt hơn. Công cụ mở rộng VSCode được gọi là Glean có thể tận dụng IDE để thực hiện công việc này cho chúng ta. 

Sử dụng Index như một key trong loop

Bạn cần phải render một danh sách các thứ và nhanh chóng tính vào cú pháp hữu ích được hiển thị bên dưới:

Hầu như bạn sẽ không bao giờ render một danh sách đơn giản như vậy. Trên thực tế, bạn thường render một danh sách những thứ có thể thay đổi, được sắp xếp lại hoặc phức tạp hơn chỉ là một chuỗi. Giá trị của key được React sử dụng để hiểu khi một element được thêm, thay đổi hoặc xóa. Nó có nghĩa là hoạt động như một định danh duy nhất của element và không phải là một index đơn giản trong danh sách.

Mặc dù bạn có thể nghĩ rằng trong ví dụ này, index được sử dụng và hoạt động như một ID, hãy xem xét điều gì sẽ xảy ra nếu bạn chèn nhiều element hơn vào giữa danh sách người dùng. Thay vào đó, các giá trị index mới sẽ tham chiếu đến những người dùng khác nhau do đó một component khác (một li element khác). React sẽ bị nhầm lẫn và tạo ra các hành vi không mong muốn.

Hãy dành thời gian của bạn để tạo một ID duy nhất cho tất cả các element của bạn. Sau đó, sau khi bạn có ID duy nhất, bạn có thể viết lại mã như sau:

Đừng ghi nhớ một phép tính phức tạp

Dưới đây là một ví dụ tương tự về một component hoạt động quá nhiều và cuối cùng có thể gây ra các vấn đề về hiệu suất. Hãy nghĩ về một component có hai state khác nhau. Ở một state, chúng ta cần chạy một phép tính đắt tiền bất cứ lúc nào giá trị thay đổi.

Vấn đề với việc thực thi hiện tại là bất cứ lúc nào, state thay đổi trên component này, nó sẽ chạy lại phép tính đắt tiền mặc dù nó chỉ phụ thuộc vào một giá trị đếm có thể không rõ ràng ở đây, nhưng bạn có thể có tắc nghẽn hiệu suất. Trong tình huống như thế này, bạn sẽ muốn sử dụng hook useMemo. Những gì nó sẽ làm là ghi nhớ giá trị cuối cùng và chỉ chạy function thực tế khi dữ liệu phụ thuộc của nó thay đổi.

Tương tự như vậy, bạn có thể gặp phải hoàn cảnh khi xử lý các function và vì điều đó, React cũng cung cấp Hook useCallback.

Mặc dù React có thể cho phép bạn giải quyết vấn đề theo nhiều cách khác nhau, nhưng hãy tránh những anti-patterns này để bạn có thể sử dụng ứng dụng hiệu suất cao mọi lúc. Đôi khi, những mô hình anti-patterns này có thể bắt đầu giống như một quả cầu tuyết, tích tụ lại thành một trận tuyết lở của các vấn đề sau này.

Mellori hiện đang tuyển dụng Giảng Viên giảng dạy online các lớp học về kỹ năng số với mức offer hấp dẫn. Để hợp tác giảng dạy, vui lòng liên hệ hotline: 090.226.1879, hoặc email: [email protected] (Ms.Nhung)