提高 React Native App 的性能

了解如何提高React Native 应用程序的性能、缩短启动时间、减少包大小和内存使用量。 @[TOC](如何提高React Native App的性能)

1、Hermes的使用

Hermes是一个针对 React Native 优化的开源 JavaScript 引擎。Hermes 集成有助于缩短启动时间、减少内存使用并缩小应用程序大小。

使用 Hermes，您的应用程序将以 2 倍的速度启动，内存使用率将降低至 30%，Android 应用程序包大小减少 30%，iOS 应用程序性能将得到提升。

让我们看看如何整合爱马仕。Hermes 0.64 版本后支持iOS。因此，请确保使用React Native Upgrade Helper升级您的应用程序。

启用Hermes Android -使用方法

在 android/app/build.gradle 中添加以下代码行
project.ext.react = [
  entryFile: "index.js",
-     enableHermes: false  // clean and rebuild if changing
      enableHermes: true  // clean and rebuild if changing
]

如果您使用 ProGuard，请在 proguard-rules.pro 中添加以下规则：

-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }

清理构建

cd android && ./gradlew clean

iOS -使用方法

使用以下代码行编辑 ios/Podfile 文件 -
use_react_native!(
  :path => config[:reactNativePath],
  # to enable hermes on iOS, change false to true and then install pods
-    :hermes_enabled => false
     :hermes_enabled => true
)
安装 Hermes pod
cd ios && pod install

就是这样，现在创建您的 iOS 和 Android 版本并查看应用程序启动速度、内存使用情况和特别的包大小。

2、避免使用 useMemo 重新渲染

useMemo hooks帮助开发人员避免重新渲染子组件以提高React应用程序的性能。useMemo 用于处理记忆化，这意味着如果任何组件多次接收相同的 props，它将使用先前缓存的 props 并渲染 JSX 视图并返回组件。

在下面的示例中，我采用了 FlatList 和 Button。第一次 Flatlist 完美呈现。现在，当用户按下按钮时，新的 setCount 将更新状态变量，并且即使 Array 中没有值更新，整个组件也会重新加载 FlatList。为了避免这种情况，我用 useMemo 包装了 FlatListItem (UseMemoListItem)，因此 useMemo 检查 props 中是否有任何更改，然后它只会渲染 JSX，否则它将返回渲染并返回视图之前的 props。 代码如下：

const technology = [
  { name: 'React Native' },
  { name: 'React.js' },
  { name: 'Next.js' },
 ];
 const [arrTechnology, setArrTechnology] = useState(technology);
 const [count, setCount] = useState(0);

 function UseMemoListItem({item, onChange, arrTechnology}) {
  return useMemo(() => {
    return (
      <View style={Styles.container}>
        <Text>{item.name}</Text>
      </View>
    );
  }, [item.status]);
 }

  return (
    <View style={Styles.container}>
      <Button title='Increment' onPress={() => setCount(count   1)} />
      <FlatList
        data={arrTechnology}
        keyExtractor={(item) => String(item.name)}
        renderItem={({item, index}) => (
          <UseMemoListItem
            item={item}
          />
        )}
        ItemSeparatorComponent={() => <UseMemoListItemSeprator />}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );

3、使用缓存图像

React Native Image 组件允许开发人员在应用程序中显示图像，但仍然存在一些问题，例如 -

图像渲染数量（产品列表 - 电子商务应用程序） 缓存图片加载性能低 图像闪烁 为了解决这个问题，React Native通过启用以下代码行来支持iOS的内置缓存。 代码如下：

<Image
  source={{
    uri: 'https://example.com/image.png',
    cache: 'only-if-cached'
  }}
  style={{ width: 400, height: 400 }}
/>
但是，对于 Android 该怎么做，有一个名为 - react-native-fast-image的流行第三方库，它非常适合 iOS 和 Android。使用 Fast Image，您可以为应用程序用户提供快速的图像渲染、缓存机制等。
import FastImage from 'react-native-fast-image'

const YourImage = () => (
    <FastImage
        style={{ width: 200, height: 200 }}
        source={{
            uri: 'https://yourimageurl.com/image.png',
            headers: { Authorization: 'token' },
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)

4、将 nativeDriver 与动画库一起使用

我们在应用程序中使用动画，但有时它不会按预期顺利运行，这会影响应用程序渲染性能。为了避免闪烁并运行流畅的动画，请使用NativeDriver，它在组件上开始动画之前将动画发送到本地桥接器。这有助于在单独的 javascript 实例上执行动画，从而产生更流畅的动画。 代码如下

//集成非常简单 - useNativeDriver: true
Animated.timing(this.state.animatedValue, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true, // <-- Add this
}).start();

5、使用 Redux/MobX/Apollo 进行状态管理

很多时候需要在本地管理数据意味着缓存数据，当用户回到应用程序时，这些数据会立即显示给用户而不会中断。我们正在使用 AsyncStorage，本地数据库存储来存储数据，当用户下次回来/下次打开应用程序时，我们正在获取数据并将其保存在全局变量中以访问应用程序中的任何地方。

为了在各种屏幕中管理它并将数据存储到各种数组中，对象 Prefer 流行的状态管理库，如 Redux、Redux Rematch、MobX和Apollo。这些库将存储| 管理 | 为您检索数据，您可以轻松访问整个应用程序而不会中断。

6、删除控制台日志

我们使用console.log('你好，React!')来调试应用程序。在部署应用程序时，如果我们保留 console.log() 那么它会由于 javascript 线程而产生性能问题。

要删除生产中的 console.log，请遵循简单的安装和设置。

npm install babel-plugin-transform-remove-console

现在，修改 .babelrc 文件以删除控制台语句，如下所示：

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

7、优化安卓应用大小

React Native Android 应用程序包含 -图片、字体等资源。 为不同的 CPU 架构编译了四种不同的二进制文件 带有业务逻辑的 Javascript 包 其他内置文件 在您构建应用程序时，这将结合所有这些并为您创建一个二进制文件。通过添加以下行来优化React Native 中的二进制大小 Android 构建

在 android/app/build.gradle 中更新以下行

def enableProguardInReleaseBuilds = true

如果你想根据你的 CPU 架构提取四种不同的二进制文件，那么，

def enableSeparateBuildPerCPUArchitecture = true

感谢阅读博客😀😀😀下次见😴😴！！！

这篇好文章是转载于：学新通技术网