如何使本地移动应用更快地做出反应？

Question

React 应用程序在每次单击时都运行得非常慢。我正在使用react本机v0.40.0，下面是我的项目的依赖项。

{
    "analytics-react-native": "^1.1.0",
    "apisauce": "^0.7.0",
    "babel-preset-es2015": "^6.18.0",
    "es6-promise": "^4.0.5",
    "flow-bin": "^0.36.0",
    "geolib": "^2.0.22",
    "immutable": "^3.8.1",
    "intl": "^1.2.5",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.17.4",
    "lodash.range": "^3.2.0",
    "prop-types": "^15.5.10",
    "raven-js": "^3.13.1",
    "react": "^15.4.2",
    "react-native": "^0.40.0",
    "react-native-apple-healthkit-rn0.40": "^0.3.2",
    "react-native-blur": "^2.0.0",
    "react-native-button": "^1.7.1",
    "react-native-checkbox": "^2.0.0",
    "react-native-code-push": "^1.17.3-beta",
    "react-native-datepicker": "^1.4.4",
    "react-native-device-info": "^0.10.1",
    "react-native-easy-toast": "^1.0.6",
    "react-native-fbsdk": "^0.5.0",
    "react-native-geocoder": "^0.4.5",
    "react-native-gifted-chat": "^0.1.3",
    "react-native-global-props": "^1.1.1",
    "react-native-image-crop-picker": "^0.15.1",
    "react-native-image-picker": "^0.25.1",
    "react-native-image-slider": "^1.1.5",
    "react-native-keyboard-aware-scroll-view": "^0.2.7",
    "react-native-maps": "0.15.2",
    "react-native-modal-dropdown": "^0.4.4",
    "react-native-popup-menu": "^0.7.2",
    "react-native-push-notification": "^2.2.1",
    "react-native-radio-buttons": "^0.14.0",
    "react-native-router-flux": "3.38.0",
    "react-native-segmented-android": "^1.0.4",
    "react-native-snap-carousel": "2.1.4",
    "react-native-stars": "^1.1.0",
    "react-native-swipeout": "^2.2.2",
    "react-native-swiper": "^1.5.4",
    "react-native-tableview-simple": "0.16.5",
    "react-native-vector-icons": "^4.0.0",
    "react-native-video": "^1.0.0",
    "react-native-zendesk-chat": "^0.2.1",
    "react-redux": "^4.4.6",
    "recompose": "^0.20.2",
    "redux": "^3.5.2",
    "redux-thunk": "^2.0.1"
  }

我在android中使用stacktrace进行了分析，发现mqt_js是每次点击UI都要花费更多时间的原因之一。您可以检查堆栈跟踪报告这里。

有人能帮我解决这个性能问题吗？

Answer 1

以下是一些优化的建议-本机反应：

1. 解析和序列化(如response.json()或JSON.stringify)阻塞js线程，因此所有JS动画和处理程序(例如onScroll和onPress，当然还有render方法)都会受到这种影响。尝试从后端加载您需要显示的数据。
2. 在可能的地方使用本机动画(useNativeDriver: true参数)，并尽量不使用onScroll。另外，考虑在动画中使用反应本土化。
3. 优化您的render方法，并尽可能少地调用它。当组件的道具或状态发生更改时，调用它。
4. 了解PureComponent和React.memo的工作原理，并在必要时尝试使用它们。但是要记住，如果不能正确使用，它们也可以减慢应用程序的速度。
5. 始终对样式使用StyleSheet，它将它们兑现并替换为样式id (整数)，因此样式只传递一次，然后使用样式id。

坏：

// style object is created on every render
render() {
    return <View style={{flex:1}}/>
}

好：

render() {
    return <View style={styles.flex}/>
}

// style is created once
const styles = StyleSheet.create({
    flex: { flex: 1 }
});

1. 功能也一样。

坏：

// onPress handler is created on every render
render() {
    return <TouchableOpacity onPress={() => this.props.navigator.navigate('SignIn')}/>
}

好：

render() {
    return <TouchableOpacity onPress={this.onPressSignIn}/>
}

// onPressSignIn is created once
onPressSignIn = () => {
    this.props.navigator.navigate('SignIn');
}

1. 客户端上所有操作的大O应该是常量。尽可能少地枚举数组。在可能的情况下，始终使用Object和Set而不是Array。当需要从服务器/数据库加载大量数据、为服务器保留排序和其他繁重的计算时，请使用分页。

例如，如果您经常需要通过id获取对象，最好使用：

let items = {
    "123": { id: "123", ... },
    "224": { id: "224", ... }
};

let item = items["123"];

而不是通常的数组：

let items = [
    0: { id: "123", ... },
    1: { id: "224", ... }
];

let item = items.find(x => x.id === "123");

1. 查看这个文档：https://reactnative.dev/docs/performance

Answer 2

这是一个非常广泛的基于的和观点的问题，但我将尝试根据列出的profiler突出most common points和建议。

查看堆栈跟踪，主要问题在于包名(即UI Thread )中的com.fitspot.app.debug。

正如前面提到的，这里。

为了显示一个框架，我们所有的UI工作都需要在16 of周期结束前完成。

一旦边界间隔设置为16ms，您就可以看到，在一个周期内，mqt_js或JS Thread比16ms花费的时间要长得多，这意味着您的JS Thread在不断地运行。

在当前的profiler中，不清楚在JS Thread中执行哪些进程，因此很明显，问题主要在于JS Code而不是UI Thread。

有多种方法可以使react-native应用程序更快，这在页面中有很好的记录。下面是一个相同的basic要点。

• 错误和警告消息是在模式dev=true中提供的，您可以在整个应用程序中禁用它们以获得更好的性能。
• 从应用程序中删除所有console.log语句，因为它会导致JS线程上的bottleneck。您可以使用此插件删除console*文件中提到的所有这里语句，如 { "env"：{“生产”：{ "plugins"：“转换-删除-控制台”}
• 您需要componentize您的项目结构，并使用Pure Components，以仅依赖props和state，使用immutable data structures进行更快的比较。
• 对于slower navigation transitions，您可能需要检查navigation library代码，因为大多数情况下，它们都有用于default transitions的timeout。作为一种解决办法，您可以考虑构建自己的transitioner。
• 如果在代码库中使用Animations，可以考虑设置nativeDriver=true，这将减少JS thread的负载。这是一个解释得很好的示例。
• 您还可能希望检查Profiling，检查JS Thead和Main Thread操作，在本页面中有很好的解释。
• 其他东西包括，而不是requiring/importing模块，这是不必要的，只导入classes所需，而不是whole component。
• 另外，您不需要external libraries来制作simple UI components，因为它们的性能比react-native的原生元素要慢得多。您可以考虑使用styled-components将UI组件化。

Answer 3

1. 在滚动视图上使用平表：

- add `initialNumToRender={number}` prop to Flatlist, as it will show only those components which are visible on screen and detach the other components

​

1. 在Flatlist renderItem中使用renderItem(在您的示例中，它将是每张卡)，以便它们只在其道具被更改时呈现。
2. 检查组件是否正在一次又一次地重新呈现，以便测试put控制台，无论是在render()中还是在ComponentWillRecieveProps中，如果发生这种情况，那么使用ShouldComponentUpdate。
3. 从render()和ComponentWillRecieveProps中删除ComponentWillRecieveProps。

做这些改变，你就会发现你的表现比以前好多了。