Những lý do ảnh hưởng đến ReactNative performance của bạn

876
lý do ảnh hưởng đến ReactNative performance

Đối với các bạn mới bắt đầu làm quen React Native thì việc tối ưu performance là điều không cần thiết. Các bạn nên dành thời gian để tìm hiểu xem props/state là gì, tạo style thế nào, tạo component ra sao, blabla…

Xem thêm Component là gì?

Nhưng khi đã thành thạo những kiến thức cơ bản và bắt đầu làm 1 sản phẩm hoàn chỉnh thì việc quan tâm đến performance là điều cực kỳ quan trọng, đặc biệt trong những view phức tạp hoặc có dữ liệu lớn.

Nguyên tắc chung khi lập trình giao diện là: render càng nhiều, performance càng thấp (app càng lag). Vậy nên để cải thiện performance, việc đầu tiên chúng ta phải xem xét là có xử lý nào gây ra những render không cần thiết hay không?

Tuy nhiên, có những thói quen lập trình tưởng chửng rất đơn giản nhưng lại là nguyên nhân của những render không mong muốn. Cùng thử xem các lý do ảnh hưởng đến ReactNative performance của bạn để khắc phục nhé!

  React Native Starter Kit – Top 3 bộ Starter Kit tốt nhất 2019
  6 cách đơn giản để tăng tốc độ React Native cho bạn

Sử dụng literal object làm props

Literal object là gì?

Nó đơn giản chỉ là các JS object như {a:1, b:2} hoặc [1, 2, 3]…

Ví dụ:

Vậy tại sao lại có vấn đề với cách viết super basic này? Thậm chí trên trang chủ của facebook cũng có sample kiểu như vậy!!!

Tất cả đều do cách làm việc của Shallow Compare của React.

Quay lại phân tích ví dụ trên có thể thấy mỗi lần được Component cha của MyView được render, nó sẽ tạo ra 1 literal object {flex: 1} và gán vào props style của MyView => props style bị thay đổi!

Nếu component MyView không phải kế thừa từ React. Component và implement phương thức shouldComponentUpdate để lờ đi sự thay đổi của props này, hoặc sử dụng Function Component mà không có biện pháp xử lý phù hợp thì chắc chắn MyView sẽ bị re-render!

Cách đơn giản nhất để giải quyết vấn đề này đó là:

Không sử dụng literal object làm props

Nếu ParentView là 1 function component thì sao? Câu trả lời là Hooks

Sử dụng arrow function làm props

Thói quen phổ biến thứ 2 gây ra những re-render vô nghĩa là sử dụng arrow function làm props.

hoặc

Khi sử dụng cách viết code này, props của component có sử dụng arrow function sẽ luôn được gán 1 function mới (do arrow function sinh ra) mỗi lần component cha của nó re-render. Có props mới truyền vào, component này sẽ bị re-render theo đúng cơ chế giống như literal object ở trường hợp đầu tiên!

Vì vậy, hãy tử bỏ ngay thói quen sử dụng arrow function làm props.

Nếu ParentView là function component, hãy nghĩ ngay đến Hooks.

Sử dụng hàm bind() khi tạo props

Về cơ bản, hàm bind hoạt động giống với arrow function khi nó luôn tạo ra 1 function mới mỗi khi được gọi.

Chính vì sự tương đồng với arrow function nên cách giải quyết nó cũng giống với arrow function như đã trình bày ở phần 2.

Có thể bạn chưa biết, 1 arrow function đã tự động bind con trỏ this trong scope mà function đó được sinh ra, nên trong nhiều trường hợp, việc bind là không cần thiết.

Nếu thực sự phải bind (do không muốn sửa code hiện tại để tránh sinh ra nhiều different khi commit code chẳng hạn), thì có thể bind trước ở construtor:

Lời kết

Hãy luôn luôn nhớ rằng, render càng nhiều, performance càng thấp. Vì vậy, khi cảm thấy ứng dụng của bạn chạy không mượt mà, hãy điều tra ngay xem có xử lý nào gây nên tình trạng re-render ngoài ý muốn hay không.

Tối ưu performance là công việc quan trọng, đòi hỏi nhiều thời gian và kinh nghiệm. Chúng tôi sẽ tiếp tục đề cập đến vấn đề này trong những bài viết tiếp theo. Nếu có ý kiến đóng góp cho bài viết, vui lòng để lại bình luận cho chúng tôi.

Thanks for reading!

Có thể bạn quan tâm:

Xem thêm việc làm Software Developers hấp dẫn nhất trên TopDev

Người viết: Nguyen Duc Binh

TopDev via blog.icts.vn

  Cùng làm chức năng tương tự Messenger với React Native theo cách của bạn!
  Tăng tốc website. Bí kíp tối ưu Web Performance
SHARE