React Native Performance - Cải thiện hiệu năng sử dụng trên ứng dụng React native (P2)
Tiếp tục với phần 2 về cải thiện performance cho ứng dụng nha, vào luôn nào
Luôn cập nhập phiên bản RN mới nhất
Hãy luôn cập nhập phiên bản RN mới nhất cho ứng dụng của bạn nếu có thể, để có thẻ nhận được những sự cải tiến mới nhất, những tính năng mới nhất vì biết đâu ở những phiên bản mới nhất đó đã có những bản vá hay những cách khắc phục tốt nhất cho performance ứng dụng.
- Vấn đề: Khi ứng dụng của bạn đang chạy với phiên bản RN cũ, không được hỗ trợ và không có những cải tiến, tính năng mới.
Giữ cho ứng dụng luôn được cập nhập thường xuyên là rất quan trọng. Theo cách đó, bạn sử dụng các tính năng mới nhất, cải tiến performance và các bản sửa lỗi bảo mật. Hệ sinh thái JavaScript đặc biệt thú vị ở khía cạnh này, vì nó "di chuyển" rất nhanh. Nếu bạn không cập nhật ứng dụng của mình thường xuyên, rất có thể ứng dụng, đoạn code của bạn sẽ bị tụt lại khá xa so với hiện nay, cũng vì đó việc nâng cấp nó sẽ trở nên khó khăn và rủi ro nhiều hơn khi các thư viện liên quan trong ứng dụng cũng sẽ cập nhập nếu bạn cập nhập RN lên.
Tuy nhiên, để có thể cập nhập lên phiên bản mới của RN cũng không hề dễ dàng. Vì bạn cần phải phân tích và so sánh cẩn thận giữa phiên bản cũ và mới sẽ có những gì khác nhau, các thư viện tích hợp vào ứng dụng sẽ có gì khác nếu như tiến hành cập nhập lên.
VD: có thể khi cập nhập lên thì các modules hoặc các components đang sử dụng trong ứng dụng có thể sẽ không còn là một phần trong lõi của RN nữa.
Những thay đổi được Facebook đưa ra trong một quá trình gọi là Lean core, với mục tiêu là:
- Làm cho gói react-native nhỏ hơn, linh hoạt hơn và dễ bảo trì hơn bằng cách trích xuất một số phần của lõi và chuyển chúng vào kho lưu trữ cộng đồng react-native
- Chuyển giao việc bảo trì các modules đã trích xuất cho cộng động RN
- Sử dụng React Native Upgrade Helper:
Trang web giúp bạn xem ở phiên bản hiện tại so với phiên bản bạn định cập nh ập sẽ có file nào cần thay đổi, thay đổi như thế nào. Và có những cập nhập gì mới trong các phiên bản lớn ở giữa phiên bản hiện tại của ứng dụng và phiên bản bạn định cập nhập (Nên đọc để biết trong đó sẽ có những thay đổi gì lớn).
Đối với một số thay đổi có thể được chú thích thêm bằng một thông tin đặc biệt sẽ cung cấp thêm bối cảnh về lý do tại sao sự thay đổi đó lại xảy ra.
- Khi thực hiện nâng cấp, bạn có thể thấy rất nhiều thay đổi đến từ folder ios của dự án (mọi thứ bên trong .xcodeproj, bao gồm cả .pbxproj). Đây là những tệp được tạo bằng Xcode khi bạn làm việc với phần iOS của ứng dụng React Native.
- Nếu bạn gặp sự cố với nâng cấp của mình, bạn có thể kiểm tra https://github.com/react-native-community/upgrade-support dự án. Đây là một kho lưu trữ nơi các nhà phát triển chia sẻ kinh nghiệm của họ và giúp đỡ lẫn nhau giải quyết một số hoạt động khó khăn nhất liên quan đến nâng cấp.
- Với kinh nghiệm của TiT thì khi update lên từ 0.59.10 lên 0.62 vì ở 2 version này thực sự khác nhau rất nhiều và có thêm Flipper, đôi khi có lỗi phát sinh nên các bạn phải check thật kỹ (Được cái là những lỗi này đã được cộng đồng fix rất dễ hiểu nên khi search có thể ra luôn ở các trang github - cứ cái nào nhiều tym mà fix theo =))))
Hãy luôn xoá những console statements trong dự án
Trước khi build ứng dụng nào ra, bạn cần xoá tất cả những log hiện có trong project như console.log vậy. Như hồi TiT mới vào 1 dự án của một công ty làm product cho Nhật, thì khi đó mỗi lần log data ra thì y như rằng cả 1 lùi warning+console.log hiện ra trước mắt :))) log tuy rất tốt cho debugging tuy nhiên nếu sử dụng xong mà không comment lại hoặc xoá đi thì sẽ có rất nhiều tác hại:
- Người code sau dễ choáng và không tìm được chính log của mình đặt ra.
- log nhiều chỉ phù hợp cho debugging thôi, còn khi build ra product thì rất là dễ làm giảm performance của app đó nha.
- log vô tội vạ mà không xoá đi là dễ làm file code dài lên lắm.
=> Do đó tốt nhất nên mỗi lần sau khi log xong thì nên xoá đi. Và để xoá dễ hơn thì các bạn nên có cấu trúc log riêng mà chỉ mình bạn dùng trong team thôi nha. Vd như TiT sẽ thường log như này nè: console.log('xxxx ...', data). Đó như vầy mỗi lần xoá log có phải dễ hơn không, cứ Ctrl+F thôi à, và còn dễ nhận ra đâu là log của mình nữa.
Nên sử dụng useCallback, useMemo (func component) và PureComponent (class component)
Trong dự án của bạn nếu có sử dụng những component phải xử lý nặng trước khi hiển thị trên giao diện như biểu đồ, bản đồ, menu con đa cấp, animations ... thì các bạn nên sử dụng để cải thiện performance hơn. Tránh tình trạng re-render lại component đó khi không cần thiết.
Tuy nhiên, không nên dùng cho tất cả các components đó nha.
Tips của TiT trong dự án gần đây đó là hiển thị đồ thị phần lịch sử đi bộ đã được lưu trong db local. Do phần này lần đầu tiên làm nên code khá ngẩn :))) tuy nhiên sau khi được leader review lại thì có nên khuyên nên hạn chế lại số lần render(vì mỗi khi chuyển tháng/năm thì biểu đồ dữ liệu sẽ được load lại đâm ra lâu). Thì TiT có tìm hiểu về useCallback, useMemo để cải thiện hơn performance cho app.
=> tips sẽ là nên code trước đi, nếu cảm thấy có phần nào khi load dữ liệu của component đó phải đợi 1 lúc thì mới suy nghĩ tới việc sử dụng chúng =)). Vì react native đã làm đủ tốt để các component bình thường có thể chạy mượt rồi.
Một số link tham khảo về hook này nha: