react-native - 如何提高 React Native 应用程序的性能

Question

适用于 Android 的 React Native 应用程序

我已经在应用类似的东西

删除控制台日志。

1. 没有内联样式。

2. 不在未安装的组件上调用 setState。

3. 使用平面列表呈现数据。

但这还不够，还需要构建 Android 版本。不幸的是，存在巨大的性能差距。

Answer 1

有很多方法和步骤可以提高 react 原生应用程序的性能。

1. 您应该使用 React.PureComponent (如果使用基于类的组件)来定义组件，而不是 React.Component。它对 props 和 state 进行浅层比较，并且仅在组件发生更改时重新渲染组件。

如果使用函数式组件，请将组件包装在 React.memo 中，它的作用与函数式组件中的 React.PureComponent 类似。对 Flatlist 的 renderItem 中使用的组件执行相同的操作。

不改变数据( Prop 和状态)，而是创建一个副本并对其进行编辑。更多详情here

在从其他文件导入某些模块或任何内容时，请确保仅导入您需要的内容，而不是导入所有内容。

错误的方式(除非你需要一切或者这是使用其他 api 的必要条件)；

import * as everything from 'path/to/some/file'

正确的方法；

import {firstthing, secondthing} from 'path/to/some/file'

正如您提到的 Flatlist，您还应该使用 initialNumToRender 属性减少初始渲染上显示的项目数量，以加快响应速度。

如果使用动画，请尝试通过在动画 View 上设置 useNativeDriver={true} 来使用 native 驱动程序(如果可能)。这将使动画顺利运行，并且它们不会被 js 线程阻塞。

尝试减小应用程序的大小。如果您的应用中有不使用的内容，请将其删除。

例如，如果您正在使用 expo，但您的应用并没有使用 expo 中的太多内容，例如 expo API 和其他功能，最好退出。

您可能已经意识到，expo应用程序在创建时(当我们没有编写代码而只是完成设置过程时)，应用程序的大小接近40-50 MB。

还有很多其他的事情(我并不知道一切 🙂🙂)。您可以在网上找到很多有关此问题的详细信息。