问题 如何更快地使React Native移动应用程序？

首先，你应该运行你的应用程序 DEBUG。在Android上它是通过改变来完成的 MainApplication 方法：

@Override
public boolean getUseDeveloperSupport() {
  return false; // BuildConfig.DEBUG;
}

制作包：

react-native bundle --platform android --dev false --entry-file ./index.js --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/ --sourcemap-output ./android/app/src/main/assets/index.android.map

至于代码，这里有一些优化react-native的建议：

1. 解析和序列化（例如 response.json() 要么 JSON.stringify）阻塞js线程，所以所有JS动画和处理程序（如 onScroll 和 onPress， 而且当然 render 方法）受此影响。尝试仅加载您需要显示的内容。
2. 使用原生动画（useNativeDriver: true 参数）尽可能，并尽量不使用 onScroll。
3. 记录所有你的 render 方法并尝试尽可能少地调用这些方法。当组件的道具或状态发生变化时调用它。
4. 了解如何 PureComponent 工作，并尝试在必要时使用它。但请记住，如果使用不当，它也会降低应用程序速度。
5. 一直用 StyleSheet 对于样式，它会兑换它们并替换为样式id（整数）。

坏：

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

好：

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

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

6. 与功能相同。

坏：

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

好：

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

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

7. 大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. 使用 Flatlist 在Scrollview上：

   • 加 initialNumToRender={number} 支持Flatlist，因为它只显示屏幕上可见的组件并分离其他组件

2. 使用 PureComponent 在Flatlist中呈现renderItem（在你的情况下它将是每张Card），这样它们只会在它们的道具被改变时呈现。

3. 检查您的组件是否一次又一次地重新渲染，以便在render（）或ComponentWillRecieveProps中测试put控制台，如果发生这种情况，则使用ShouldComponentUpdate。

4. 从render（）和ComponentWillRecieveProps中删除console.log。

进行这些更改，您会发现您的表现比以前好多了。

可能有各种原因使反应原生应用程序变慢。我建议以下关键点可以提供帮助：

1. 比较喜欢 dumb components 过度 class components 尽可能。
2. 尝试使用 redux，它是一个功能强大的状态管理工具，如果正确实施，可以为您提供最佳代码。
3. 使用像 react-monocole 和 appr。指南 反应-monocole。
4. 生成已签名的apk，已调试的react-native应用程序中包含其他功能。这是一个指南 生成签名的apk。

如果 mqt_js 是性能问题的主要原因，这意味着在每次点击时，您的应用程序的JS线程都有很多事情要做。 JS业务逻辑和底层本机领域之间的通信是异步完成的，当按下按钮时需要在JS端完成的操作越多，应用程序就越慢。

回答 由Pritish Vaidya给出的已经击中头部的钉子。我只想再提一点关于使用的问题 redux 在你的应用程序中如果您的应用程序的数据流主要使用完成 redux那么你可以检查以下事项：

• 如果每次点击事件都发生了太多的redux动作，请尝试删除不必要的动作，或者先确定触发重要动画的动作的优先级，然后在新的RN组件完成渲染后触发其他动作。你可以看到哪些动作是最底层的 redux-logger。

• 将侦听redux存储的组件分解为较小的组件，每个组件都监听存储的不同部分。因此，如果更新redux的存储，则只应重新呈现一小组组件而不是所有组件。

• 使用memoized选择器来处理经常更新的数据。 重新选择 在这种情况下可以帮助你。