Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Kỹ thuật giảm thiểu hiển thị lại trong React Native


Kỹ thuật giảm thiểu hiển thị lại trong React Native


Để giảm thiểu việc hiển thị lại trong React Native, hãy làm theo các kỹ thuật sau:

1. Ghi nhớ:
- Sử dụng `useMemo` để lưu các phép tính vào bộ đệm giữa các lần kết xuất lại, ngăn chặn việc kết xuất lại không cần thiết khi đạo cụ hoặc trạng thái không thay đổi[1].

2. Danh sách ảo:
- Sử dụng `FlatList`, `SectionList` hoặc `VirtualList` để chỉ hiển thị hiệu quả các mục hiển thị trên màn hình, tối ưu hóa việc sử dụng bộ nhớ và hiệu suất hiển thị[1].

3. Tối ưu hóa hình ảnh:
- Sử dụng các thư viện như `react-native-fast-image` hoặc `expo-image` để tải hình ảnh và lưu vào bộ nhớ đệm được tối ưu hóa, đảm bảo trải nghiệm người dùng mượt mà hơn[1].

4. Gỡ bỏ các hoạt động đắt tiền:
- Ngăn chặn các lệnh gọi quá mức đến các chức năng như tìm kiếm và yêu cầu mạng bằng cách đưa ra khoảng thời gian trễ hoặc "độ trễ gỡ lỗi" trước khi thực hiện một chức năng[1].

5. Sử dụng React.memo hoặc React.PureComponent:
- Đảm bảo các thành phần chỉ được hiển thị lại khi đạo cụ của chúng thay đổi bằng cách sử dụng `React.memo` hoặc `React.PureComponent`[3].

6. Tránh kết xuất lại không cần thiết:
- Sử dụng `useMemo` để giới hạn thời điểm các đối tượng được cập nhật và tránh việc hiển thị lại không cần thiết do ký tự đối tượng hoặc các phép tính động gây ra[3].

7. Sử dụng phím để tránh hiển thị lại:
- Sử dụng các phím để tránh hiển thị lại khi các mục trong danh sách thay đổi, đảm bảo hiệu suất và hiển thị hiệu quả[4].

8. Tối ưu hóa thành phần thành phần:
- Đảm bảo rằng các thành phần được cấu thành một cách hiệu quả bằng cách tránh hiển thị lại không cần thiết và tối ưu hóa việc sử dụng các hook như `useMemo` và `useCallback`[4].

Những kỹ thuật này giúp giảm thiểu việc hiển thị lại trong React Native, đảm bảo trải nghiệm người dùng mượt mà hơn và hiệu suất tốt hơn.

Trích dẫn:
[1] https://thoughtbot.com/blog/optimizing-performance-in-react-native-tips-and-techniques
[2] https://www.reddit.com/r/reactnative/comments/uaaxyu/tips_on_how_to_reduce_renders/
[3] https://www.debugbear.com/blog/react-rerenders
[4] https://dev.to/femi_akinyemi/how-to-prevent-unnecessary-react-comComponent-re-rendering-3c08
[5] https://www.linkedin.com/pulse/avoid-unnecessary-re-renders-reactjs-christian-zanchetta