在React Native中使用AppState来提高性能

前端小工
772 阅读5分钟

了解一个应用程序的当前状态是至关重要的，原因有很多，最明显的是内存管理。不断地更新应用程序的状态会消耗大量的能量，有时在用户不与应用程序互动时暂停更新会更好。

这就是React Native AppState API的作用。AppState告诉你，当一个应用不活动或在后台时，你可以停止非必要的进程，节省内存，并提高React Native应用的性能。

在本教程中，我们将向你介绍AppState，并通过一个简单的例子来演示它是如何工作的。

什么是React Native中的AppState？

在React Native中，AppState代表应用程序的当前状态--即应用程序是在前台还是后台。

AppState对于收集应用程序的使用数据很有用--例如，用户在将其放入后台或关闭应用程序之前在应用程序中花费的时间。分析这些数据有助于你了解用户与你的应用程序的互动方式，这样你就可以在必要时做出改变，以提高参与度。

有无数的SDK旨在帮助你产生这种类型的洞察力，但AppState使你能够在不依赖任何第三方工具的情况下自行监测状态变化。

AppState是用来做什么的？

如上所述，AppState最常用于内存管理和用户状态管理。让我们深入了解，看看它是如何参与这些重要任务的。

内存管理

AppState可以帮助你在用户不与应用程序交互时避免不必要的状态变化。

创建一个isMounted 属性，根据应用程序的状态来改变，这是一个好的做法。如果我们把类组件考虑在内，一旦componentDidMount ，isMounted ，false ，componentWillUnmount ，就会被设置为true 。

isMounted 你可以在整个组件中使用this 的属性，只在组件被安装时调用this.setState 。

this.isMounted && this.setState(...)

你可以使用AppState的功能来限制相应的状态更新--例如，当应用程序在后台或不活动时暂停更新（在iOS中），当用户返回到应用程序时恢复。

用户状态管理

当涉及到分析时，AppState使你能够更新用户互动的数据库--例如，当用户返回应用或将其置于后台时，这些数据会告诉你用户是如何与你的应用互动的。

AppState还可以帮助你确定用户是在线还是离线，这对聊天应用特别重要。你可能在WhatsApp、Telegram和其他提供聊天功能的应用程序中看到过 "在线 "和 "最后一次见到..."。

你可以很容易地根据AppState的变化来更新用户状态--例如，当用户正在与应用程序互动时，当应用程序当前处于活动状态时，或当应用程序处于前台时，在线；而当用户将应用程序放到后台或关闭时，离线。

如何在React Native中使用AppState

为了看到AppState的作用，我们将创建一个React Native聊天应用程序，显示用户的在线状态。我们将使用AppState来显示用户在应用程序打开或在前台时的在线状态，以及应用程序在后台或关闭时的在线状态。

AppState是react-native 库的一部分，可以使用以下代码轻松导入。

import {AppState} from 'react-native';

现在你已经准备好在你的应用程序中使用AppState和它的监听器了。

AppState最基本的用例是使用currentState 属性来获取应用程序的状态。

AppState.currentState

我们可以从上述属性中获得两种状态：active 和background 。

  • active 意味着应用程序目前正在运行并处于前台。
  • background 表示该应用正在运行，但目前处于后台--即，用户要么在另一个应用上，要么在查看他们的主屏幕

上述状态在安卓和iOS上都有，但iOS支持一个额外的AppState，叫做inactive ，当用户在两个应用之间转换、打开通知中心或接到来电时，就会出现这种状态。

倾听AppState的变化

AppState带有监听器，用于监听状态中的变化。change 监听器在Android和iOS上都被支持。

要添加一个新的监听器，请输入以下内容。

AppState.addEventListener

然后添加change 事件监听器，根据变化更新应用程序。

const appStateListener = AppState.addEventListener(
  'change',
  nextAppState => {
    console.log('Next AppState is: ', nextAppState);
    setAppState(nextAppState);
  },
);

为了性能考虑，清理监听器总是一个好的做法。要清理AppState监听器，只需使用remove 方法。

appStateListener.remove()

下面是我们例子的完整代码。

import React, {useEffect, useState} from 'react';
import {View, StyleSheet, Text, AppState} from 'react-native';

const App = () => {
  const [aState, setAppState] = useState(AppState.currentState);
  useEffect(() => {
    const appStateListener = AppState.addEventListener(
      'change',
      nextAppState => {
        console.log('Next AppState is: ', nextAppState);
        setAppState(nextAppState);
      },
    );
    return () => {
      appStateListener?.remove();
    };
  }, []);
  return (
    <View style={styles.container}>
      <Text style={styles.txt}>
        Current App State is: <Text style={styles.aState}>{aState}</Text>
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000',
  },
  txt: {
    color: '#d9d9d9',
    fontSize: 18,
  },
  aState: {
    color: '#fff',
  },
});
export default App;

还有两个特定的Android监听器你可以使用。

  • focus ，当用户与一个应用程序交互时
  • blur ，当用户拉下通知中心的时候。

下面是最终的结果。

<！--[if lt IE 9]>document.createElement('video')。 blog.logrocket.com/wp-content/…

总结

现在你对AppState工具有了基本的了解，以及如何在React Native应用中使用它。你可以用它来改变应用中的用户状态（从在线到离线或反之），收集应用使用情况的分析，并在你的应用中播放或暂停AV内容，这取决于你正在进行的项目类型。

谢谢你的阅读!

The postUsing AppState in React Native to improve performanceappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝