Các thủ thuật tối ưu ứng dụng React Native tốt nhất

react native

6

My Pham viết ngày 29/10/2018

React Native là xu hướng mới trong lập trình hiện này. Nó là một trong những ứng dụng do Facebook phát hành rất được người dùng ưa chuộng. Tuy nhiên không phải ai cũng biết cách tối ưu hóa ứng dụng React Native. Vì thế, bạn đọc hãy cùng vntalking tìm hiểu ngay bài viết sau đây.

React Native là gì?

Hãy khoan tìm hiểu về các thủ thuật tối ưu hóa ứng dụng React Native, trước tiên bạn cần phải hiểu đúng và nắm rõ định nghĩa về nó trước. Vậy React Native là gì? Hiểu một cách đơn giản, React Native là ứng dụng di động do Facebook phát hành. Ứng dụng React Native chỉ sử dụng một ngôn ngữ là Javascript và phù hợp được với cả hệ điều hành IOS và Android.

Những thủ thuật tối ưu ứng dụng React Native hay nhất

Đầu tiên - Đặt key mỗi Items trong List

Đây là cách tối ưu hóa React Native được nhiều người áp dụng. Theo đó để áp dụng thủ thuật này, bạn không thêm khóa cho mỗi mục trên list. Thay vào đó, React sẽ trực tiếp Re-render tất cả các đầu mục Items. Khi đã có khóa, Reach sẽ hạn chế việc Re- render nó lại.

Thứ hai - Sử dụng Perf Monitor để xem FPS

Sử dụng Perf Monitor để xem FPS cũng là cách tối ưu hóa React Native bạn nên biết. Bạn chỉ cần mở Developer Tools và bật Perf Monitor lên. Sau đó, nhìn vào cuộn ứng dụng, bạn có thể tìm ra các điểm chết - nơi FPS bị tụt. Sau đó, bạn hãy Set State hoặc Dispatching Redux Action sai tại những điểm bị tụt và thực hiện quá trình đồng bộ JS trên Thread.

Thứ ba - Sử dụng FlatList, SectionList cho dữ liệu lớn

Với thủ thuật này, bạn chỉ cần áp dụng FlatList, SectionList cho những nội dung có dữ liệu lớn. Theo React Native docs, FlatList và SectionList cho hiệu suất cao hơn khi Render List. Bởi 2 ứng dụng này sử dụng vùng nhớ ít hơn so với những ứng dụng thông thường khác.

Thứ tư - Đừng quên sử dụng PureComponent

PureComponent khá với Component bởi trong React nó không chứa State mà chỉ Render dựa trên dữ liệu từ Props. Với PureComponent bạn hoàn toàn có thể tối ưu hóa ứng dụng React Native bằng cách trả về False.

Thứ năm - Không Update State hay ComponentWillUpdate

Update State hay ComponentWillUpdate là phương thức được sử dụng nhiều trong việc tối ưu hóa React Native. Để chuẩn bị cho một sự thay đổi mới, bạn đừng vội kích hoạt Update State hay ComponentWillUpdate. Nếu muốn Dispatch hay Set State nào mới, bạn hãy viết chúng trong ComponentWillUpdate.

Trên đây là một vài thủ thuật tối ưu hóa ứng dụng React Native mà các bạn có thể tham khảo và áp dụng qua. Hy vọng bài viết đã mang đến nhiều thông tin hữu ích cho bạn. Hãy thường xuyên cập nhật website: https://vntalking.com/ của chúng tôi để tìm hiểu thêm nhiều thông tin hữu ích nhất! Đừng quên khóa học miễn phí React native bên mình nhé