Trước khi phát hành một React App, bất kỳ nhà phát triển nào cũng cần kiểm tra hiệu suất và tìm cách tối ưu hóa app nhằm tạo trải nghiệm cho người dùng. Bạn có thể khám phá các cách khác nhau để tối ưu hóa một React App, nó cho phép tăng đáng kể tốc độ và trải nghiệm người dùng cho các ứng dụng của bạn.
Mục lục
React là gì?
React là một thư viện JavaScript để xây dựng giao diện người dùng. React giúp giảm thiểu đối đa dung lượng hoạt động DOM khi cập nhật giao diện người dùng. Đối với nhiều ứng dụng, sử dụng React sẽ giúp giao diện người dùng đẹp, thân thiện và tải nhanh mà không cần làm nhiều việc để tối ưu hóa hiệu suất.
>>> Tham khảo khoá học Reactjs của Mellori tại đây.
Sử dụng React.Fragment để tránh tạo thêm các nodes vào DOM
Khi làm việc với React, có những trường hợp bạn sẽ cần render nhiều các elements hoặc trả về một nhóm các items liên quan. Đây là một ví dụ:
Nếu bạn cố gắng chạy ứng dụng của mình với code trên, bạn sẽ gặp phải lỗi “Adjacent JSX elements must be wrapped in an enclosing tag”. Điều này ngụ ý rằng bạn cần wrap cả hai elements trong một parent div.
Làm điều này sẽ giúp bạn khắc phục lỗi nhưng kèm theo đó là một mức độ rủi ro nhất định. Bạn đang thêm một node vào DOM, và điều này là không cần thiết. Trong trường hợp này, ở trên là một component child sẽ được đặt trong một component parent và điều này trở thành một vấn đề.
HTML kết quả cho Table component sẽ không hợp lệ do các div bổ sung đã được thêm vào.
Tuy nhiên nếu bạn sử dụng React Fragment thì sẽ không cần bổ sung thêm bất kì node nào cho DOM. Cú pháp sẽ được thực hiện như sau:
Bạn cũng có thể sử dụng cú pháp ngắn <> </> để khai báo một Fragment.
Sử dụng bản Production
Một cách khác để tối ưu hóa một ứng dụng React là bằng cách đảm bảo bạn gói các ứng dụng của mình để sản xuất trước khi deploy. Theo mặc định, ứng dụng của bạn ở development mode, có nghĩa là React sẽ bao gồm các cảnh báo hữu ích. Điều này có thể rất hữu ích trong khi bạn đang phát triển, nhưng nó có thể làm cho kích thước ứng dụng của bạn lớn và phản hồi chậm hơn bình thường.
Nếu dự án của bạn được xây dựng với create-react-app, bạn có thể fix bằng cách chạy bản npm run trước khi deploy, sẽ tạo ra bản production-ready của app trong một folder mà sau đó bạn có thể deploy. Bạn có thể xác nhận nếu ứng dụng của bạn đang ở trong chế độ development hoặc production bằng cách sử dụng React Developer Tools.
Nếu React icon có màu xanh với nền tối, nó biểu thị ứng dụng của bạn ở chế độ production.
Nếu React app của bạn ở chế độ development, biểu tượng sẽ chuyển sang nền màu đỏ như được hiển thị trong hình ảnh bên dưới.
Ngoài ra, điều đáng chú ý là nếu bạn đang sử dụng React thông qua CDN, bạn nên nhớ cập nhật React từ các development files lên các tệp phù hợp cho production.
Sử dụng React.Suspense và React.Lazy cho Lazy Loading Components
Lazy Loading là một kỹ thuật tuyệt vời để tối ưu hóa và tăng tốc render time của ứng dụng của bạn. Lazy loading là load một component chỉ khi cần thiết. React đi kèm với API React.Lazy để bạn có thể render một dynamic import như một component thông thường.
Bạn có thể cắt giảm rủi ro hiệu suất bằng cách sử dụng lazy method để render một component.
React.lazy có một function phải gọi là một dynamic import(). Sau đó nó sẽ trả lại một Promise giúp giải quyết cho một module với một default export mà chứa một React component.
Lazy component nên được render trong một Suspense component, giúp bạn thêm nội dung dự phòng dưới dạng trạng thái tải trong khi chờ tải lazy component.
Sử dụng React.memo cho Component Memoization
React.memo là một cách tuyệt vời để tối ưu hóa hiệu suất vì nó giúp cache các functional components.
Memoization là một kỹ thuật tối ưu hóa được sử dụng chủ yếu để tăng tốc các chương trình máy tính bằng cách lưu trữ kết quả của các function calls và return kết quả được lưu trong bộ nhớ cache khi cùng một inputs xảy ra.
Khi một hàm được render bằng kỹ thuật này, nó sẽ lưu kết quả vào bộ nhớ và lần tiếp theo function có cùng một argument được gọi sẽ return kết quả đã lưu mà không cần thực hiện lại chức năng, tiết kiệm băng thông của bạn.
Trong context của React, các functions là các functional components và các arguments là props.
React.Memo là một component bậc cao và nó tương tự như React.PureComponent nhưng để sử dụng các function components thay vì các Class.
Ảo hóa một list lớn bằng cách sử dụng react-window
Khi bạn muốn render một table hoặc một list data khổng lồ, nó có thể làm chậm đáng kể hiệu suất của app. Ảo hóa có thể giúp một tình huống như thế này với sự trợ giúp của một thư viện như react-window. React-window giúp giải quyết vấn đề này bằng cách chỉ render các items trong list hiện đang hiển thị, cho phép render hiệu quả các list với bất kỳ kích thước nào.
Các kỹ thuật được nêu ở trên là tất cả các cách hữu ích để bạn thực hành tối ưu hóa hiệu suất cho các apps của bạn. Hãy luôn nỗ lực để xây dựng một ứng dụng hiệu suất sẽ cải thiện đáng kể tốc độ của ứng dụng và trải nghiệm của người dùng bằng cách xây dựng dự án đầu tiên và sau đó tối ưu hóa hiệu suất khi cần thiết.
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)
