如何改善混合应用程序中反应本机视图的加载时间答案

【问题标题】：How to improve load time of react native view in hybrid app如何改善混合应用程序中反应本机视图的加载时间
【发布时间】：2018-03-26 17:15:07
【问题描述】：

我创建了一个混合应用程序，其中很少有屏幕（聊天）是用 react native 编写的。我遵循了react-native integration with existing app 指导方针，并创建了一个活动以在创建我的 android 活动时启动反应应用程序。我的活动代码类似于，

public class MyReactActivity extends Activity implements 
    DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(getApplication());
        mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
      super.onBackPressed();
   }
}

这种方法的问题是，每次创建 MyReactActivity 时都会创建 React 应用程序，这个过程需要 1-2 秒。即使当用户按下并返回此活动时，它也会再次启动反应应用程序。我想减少这个加载时间。

如果我稍微修改上面的代码并将 ReactRootView 和 ReactInstanceManager 更改为静态。每次我创建活动时，它都使用相同的 ReactRootView 和 InstanceManager。这肯定会缩短我的活动的加载时间，但可能会导致性能下降。新的Activity代码类似于，

public class MyReactActivity extends Activity implements 
    DefaultHardwareBackBtnHandler {
    private static ReactRootView mReactRootView;
    private static ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if(mReactRootView != null) {
            return;
        }
        mReactRootView = new ReactRootView(getApplication());
        mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
    }

    @Override
    public void onStart() {
       super.onStart();
       setContentView(mReactRootView);
    }

    @Override
    protected void onStop(){
      if (mReactRootView != null) {
          ViewGroup parent = (ViewGroup) mReactRootView.getParent();
          if(parent != null) {
              parent.removeView(mReactRootView);
          }
      }
      super.onStop();
   }

    @Override
    public void invokeDefaultOnBackPressed() {
      if (mReactRootView != null) {
          ViewGroup parent = (ViewGroup) mReactRootView.getParent();
          if(parent != null) {
              parent.removeView(mReactRootView);
          }
      }
      super.onBackPressed();
   }
}

这种方法似乎工作正常，但我认为它可能会导致内存泄漏，因为对 ReactRootView 和 ReactInstanceManager 的静态引用将始终将它们保留在内存中。令人惊讶的是，当我为内存监视器运行分析器任务时，我没有看到任何内存泄漏。

有人对此有什么建议吗？可以使用静态引用吗？每次我加载我的活动时，有没有其他方法可以优化反应应用的加载时间？

谢谢！

【问题讨论】：

当然你会在“不保持活动”的情况下对其进行测试？不？那么你应该...
老实说，我不知道有任何此类选项。谢谢你，我刚刚测试过，一切似乎都很好。
有什么建议吗？

标签： android performance react-native memory-leaks react-native-android

【解决方案1】：

您所遵循的方法是正确的方向。

文档提到您可以使用singleton 拥有一个 ReactInstanceManager 实例：

一个 ReactInstanceManager 可以在多个活动和/或片段之间共享。您将想要制作自己的 ReactFragment 或 ReactActivity 并拥有一个持有 ReactInstanceManager 的单例持有者。当您需要 ReactInstanceManager（例如，将 ReactInstanceManager 连接到这些活动或片段的生命周期）时，请使用单例提供的那个。

https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

【讨论】：