Performance React Native: Những điều nên và không nên làm

21/07/2022 09:16

rong bài đăng này, chúng tôi sẽ đưa ra danh sách các đề xuất để tối ưu hóa Performance trong khi xây dựng ứng dụng React Native.

Performance là một chủ đề có nhiều phân nhánh chính để sử dụng một khuôn khổ như React Native trong các ứng dụng di động thế giới thực. Nói một cách đơn giản, React Native nhanh theo mặc định. Tuy nhiên, khi làm việc trên ứng dụng React Native, bạn có thể gặp phải các vấn đề về Performance.

Đừng cho rằng những vấn đề này có thể được khắc phục bằng cách thử nghiệm các thành phần. Trong bài đăng này, chúng tôi sẽ đưa ra danh sách các đề xuất để tối ưu hóa Performance trong khi xây dựng ứng dụng React Native.

NÊN: Sử dụng Giải pháp lưu vào bộ nhớ đệm hình ảnh

React Native cung cấp một thành phần Hình ảnh như một phần của bộ thành phần cốt lõi của nó . Thành phần này được sử dụng để hiển thị hình ảnh, nhưng, ngoài hộp, thành phần này không có giải pháp cho các vấn đề như:

hiển thị nhiều hình ảnh trên một màn hình
nói chung Performance thấp
tải Performance thấp từ bộ nhớ cache
chập chờn

Thành phần Image trong React Native xử lý các hình ảnh trong bộ nhớ đệm giống như các trình duyệt web, điều này đôi khi là nguyên nhân của các vấn đề trên. Chúng dễ dàng được giải quyết bằng cách sử dụng thư viện của bên thứ ba có tên là react-native-fast-image . Nó có sẵn cho cả iOS và Android và hiệu quả trong việc lưu trữ hình ảnh vào bộ nhớ đệm.

NÊN: Sử dụng kích thước hình ảnh thích hợp

Tối ưu hóa hình ảnh rất quan trọng đối với Performance của ứng dụng React Native nếu ứng dụng dựa vào việc sử dụng một lượng lớn hình ảnh. Việc hiển thị nhiều hình ảnh có thể dẫn đến việc sử dụng nhiều bộ nhớ trên thiết bị nếu hình ảnh không được tối ưu hóa thích hợp về kích thước. Điều này có thể khiến ứng dụng gặp sự cố.

Một số việc có thể làm để tối ưu hóa hình ảnh trong ứng dụng React Native bao gồm:

Sử dụng định dạng PNG thay vì JPG
Sử dụng hình ảnh có kích thước nhỏ hơn
Sử dụng định dạng WEBP cho hình ảnh. Nó có thể giúp giảm kích thước nhị phân trên iOS và Android xuống 29%.

NÊN: Tránh các kết xuất không cần thiết

React Native dựa trên thư viện React và xử lý các thành phần hiển thị theo cách tương tự như React.js. Do đó, các kỹ thuật tối ưu hóa hợp lệ với React cũng được áp dụng cho các ứng dụng React Native. Một kỹ thuật tối ưu hóa là tránh các kết xuất không cần thiết và trong các thành phần chức năng, điều này có thể được thực hiện bằng cách sử dụng React.memo().

React.memo()được sử dụng để xử lý ghi nhớ. Khái niệm ghi nhớ được mô tả như sau: nếu một thành phần nhận được cùng một bộ đạo cụ nhiều lần, nó sẽ sử dụng các đạo cụ đã lưu trong bộ nhớ cache trước đó và hiển thị JSX được trả về bởi thành phần chức năng chỉ một lần.

Ví dụ, hãy xem xét thành phần cha và một thành phần con sau đây. Thành Parentphần có một biến trạng thái được gọi là biến trạng thái countđược cập nhật khi nút được nhấn.

Bất cứ khi nào nút được nhấn, Childthành phần cũng được hiển thị lại mặc dù giá đỡ của nó textkhông thay đổi trên mỗi lần kết xuất. Nó không làm bất cứ điều gì đặc biệt với thành phần mẹ của nó và chỉ hiển thị một số văn bản. Điều này có thể được tối ưu hóa bằng cách gói nội dung của Childthành phần với React.memo().

// Parent.js

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title='Press me' onPress={() => setCount(count + 1)} />
      <Child text='Placeholder text' />
    </View>
  );
};

// Child.js
const Child = React.Memo(({ text }) => {
  return <Text>{text}</Text>;
});

NÊN: Sử dụng nativeDriver với thư viện Animated

Có nhiều cách để tạo hoạt ảnh trong ứng dụng React Native. Một trong những cách phổ biến nhất để làm điều này là sử dụng thư viện Animated .

Animated sử dụng nativeDriverđể gửi hoạt ảnh qua cầu nối gốc trước khi hoạt ảnh bắt đầu. Điều này giúp các hoạt ảnh thực thi độc lập với một chuỗi JavaScript bị chặn, do đó mang lại trải nghiệm mượt mà hơn mà không bị giảm nhiều khung hình.

Để sử dụng nativeDrivervới thư viện Animated, bạn có thể đặt giá trị của nó thành true. Trong ví dụ dưới đây, useNativeDriverđược sử dụng trên một onScrollsự kiện Hoạt ảnh trong một ScrollViewthành phần.

<ScrollView
  showsVerticalScrollIndicator={false}
  scrollEventThrottle={1}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: animatedValue } } }],
    { useNativeDriver: false }
  )}
>
  // Component's content
</ScrollView>

NÊN: Sử dụng Flipper để gỡ lỗi các vấn đề

Phiên bản React Native 0.62.0đã giới thiệu một công cụ mới có tên là Flipper . Đó là một nền tảng gỡ lỗi cho các ứng dụng iOS, Android và React Native. Nó tích hợp trực tiếp với mã gốc và tích hợp với ứng dụng React Native được bật sẵn.

Sử dụng Flipper để gỡ lỗi ứng dụng không yêu cầu gỡ lỗi từ xa. Nó yêu cầu một phiên bản Metro được kết nối cục bộ để tương tác với ứng dụng React Native. Nó có React DevTools để kiểm tra cây thành phần và kiểm tra trạng thái và đạo cụ của một thành phần React.

Nó sử dụng một hệ sinh thái plugin gốc để gỡ lỗi cả ứng dụng iOS và Android. Các plugin này được sử dụng cho nhật ký thiết bị, báo cáo sự cố, kiểm tra yêu cầu mạng, kiểm tra cơ sở dữ liệu cục bộ của ứng dụng, kiểm tra hình ảnh được lưu trong bộ nhớ cache, v.v.

NÊN: Sử dụng Hermes

Hermes là một công cụ JavaScript mã nguồn mở được tối ưu hóa cho các ứng dụng di động. Kể từ phiên bản React Native 0.60.4, Hermes đã có sẵn cho nền tảng Android. Nó giúp giảm kích thước tải xuống của một ứng dụng (APK dành cho Android), giảm tiêu thụ bộ nhớ và giảm thời gian để một ứng dụng có thể sử dụng được (TTI - Thời gian để tương tác).

Để kích hoạt công cụ Hermes trong ứng dụng Android, hãy mở build.gradlevà sửa đổi các phần sau:

def enableHermes = project.ext.react.get("enableHermes", true);

Kể từ phiên bản React Native 0.64-rc.0, Hermes cũng có sẵn để sử dụng trên nền tảng iOS. Để bật nó cho iOS, hãy mở Podfilevà sửa đổi mã sau:

use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true

KHÔNG NÊN: Để lại các câu lệnh bảng điều khiển trong mã nguồn

Sử dụng console.logcâu lệnh là một trong những phương pháp phổ biến nhất để gỡ lỗi trong các ứng dụng JavaScript nói chung, cũng như trong các ứng dụng React Native. Tuy nhiên, việc để lại các câu lệnh console trong mã nguồn khi xây dựng ứng dụng React Native cho một nền tảng có thể gây ra một số tắc nghẽn lớn trong chuỗi JavaScript.

Một cách để theo dõi các câu lệnh của bảng điều khiển và loại bỏ chúng là sử dụng gói của bên thứ ba có tên babel-plugin-transform-remove-console. Để sử dụng nó, hãy cài đặt gói bằng cách sử dụng lệnh sau trong cửa sổ dòng lệnh:

yarn add babel-plugin-transform-remove-console

Sau đó, sửa đổi .babelrctệp để xóa tất cả các câu lệnh bảng điều khiển:

{
  "env": {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

KHÔNG NÊN: Sử dụng Scrollview để hiển thị một danh sách lớn các mục dữ liệu

Có một số cách để tạo danh sách có thể cuộn trong React Native. Hai trong số những cách phổ biến có sẵn trong lõi React Native là ScrollViewvà FlatListcác thành phần.

Một ScrollViewthành phần rất đơn giản để thực hiện. Nó thường được sử dụng để duyệt qua một danh sách có số lượng hữu hạn các mục bằng cách sử dụng map()hàm của JavaScript. Ví dụ:

<ScrollView>
  {items.map(item => {
    return <Item key={item.id.toString()} />;
  })}
</ScrollView>

Thành ScrollViewphần hiển thị tất cả các phần tử con cùng một lúc. Điều này rất tốt cho các trường hợp sử dụng mà số lượng các mục trong danh sách cần hiển thị là khá thấp. Xử lý một lượng lớn dữ liệu có thể ảnh hưởng trực tiếp đến Performance của ứng dụng.

Để đối phó với danh sách lớn các mục, React Native cung cấp một thành phần được gọi là FlatList. Thành phần này đảm bảo rằng các mục được tải chậm để ứng dụng không sử dụng lượng bộ nhớ không phù hợp.

Ví dụ:

<FlatList
  data={elements}
  keyExtractor={item => `${items.id}`}
  renderItem={({ item }) => <Item key={item.id.toString()} />}
/>

Sự kết luận

React Native là một framework mã nguồn mở được sử dụng để tạo các ứng dụng di động đa nền tảng. Nó sử dụng JavaScript ở cốt lõi của nó và có một API nguyên thủy của các thành phần để xây dựng các giao diện và chức năng di động. Đó là một khung Performance cao miễn là bạn xây dựng có lưu ý đến Performance ngay từ đầu.