如何提高混合应用程序中react原生视图的加载时间

Question

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

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秒。即使当用户按下返回并返回到该活动时，它也会再次启动react应用程序。我想减少这个加载时间。

如果我稍微修改上面的代码，并将ReactRootView和ReactInstanceManager更改为静态。每次我创建活动时，它都使用相同的ReactRootView和InstanceManager。这无疑提高了我活动的加载时间，但可能会导致性能不佳。新的活动代码类似于

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的静态引用将始终将它们保留在内存中。令人惊讶的是，当我为内存监视器运行分析器任务时，我并没有看到任何内存泄漏。

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

谢谢！

Answer 1

您所采用的方法是正确的。

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

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

https://reactnative.dev/docs/integration-with-existing-apps