Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Cách tối ưu hóa ứng dụng React Native bạn nên biết!

Chủ đề thuộc danh mục 'Chuyện trò linh tinh' được đăng bởi vntalking, 29/10/18.

Lượt xem: 11,040

  1. vntalking Mới đăng kí

    React Native 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.

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

    Thứ nhất - Đặ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 từ web của chúng tôi để tìm hiểu thêm nhiều thông tin hữu ích nhất!

    ...

Ủng hộ diễn đàn