react native 一次内存泄漏分析

前端之家收集整理的这篇文章主要介绍了react native 一次内存泄漏分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在项目中添加react native 支持后,leakcanary 检测到有内存泄漏的,如下图

可以分析出,内存泄漏是由ReactRootview 持有activity引用,在activity销毁时,ReactRootView并没有释放这个引用,导致activity无法被回收。
这个是根据log的猜测,需要跟踪代码证实这个猜测。让我们先看ReactRootView 的相关方法

  1. mReactRootView.startReactApplication(mReactInstanceManager,"moudle",bundle);

查看startReactApplication方法

  1. public void startReactApplication(ReactInstanceManager reactInstanceManager,String moduleName,@Nullable Bundle launchOptions) {
  2. UiThreadUtil.assertOnUiThread();
  3. Assertions.assertCondition(this.mReactInstanceManager == null,"This root view has already been attached to a catalyst instance manager");
  4. this.mReactInstanceManager = reactInstanceManager;
  5. this.mJSModuleName = moduleName;
  6. this.mLaunchOptions = launchOptions;
  7. if(!this.mReactInstanceManager.hasStartedCreatingInitialContext()) {
  8. this.mReactInstanceManager.createReactContextInBackground();
  9. }
  10.  
  11. if(this.mWasMeasured) {
  12. this.attachToReactInstanceManager();
  13. }
  14.  
  15. }

mWasMeasured会在view onMeasure() 的时候赋值为true,根据view相关知识,我们知道是测量控件宽高的,这个我的这个view还没有添加到viewgroup中所以会进入这个判断,进入attachToReactInstanceManager()方法(看名字感觉也是添加到管理的操作)

  1. private void attachToReactInstanceManager() {
  2. if(!this.mIsAttachedToInstance) {
  3. this.mIsAttachedToInstance = true;
  4. ((ReactInstanceManager)Assertions.assertNotNull(this.mReactInstanceManager)).attachMeasuredRootView(this);
  5. this.getViewTreeObserver().addOnGlobalLayoutListener(this.getCustomGlobalLayoutListener());
  6. }
  7. }

这个方法中首先是一个boolean判断,这个不影响,查看attachMeasuredRootView()方法实现

  1. public void attachMeasuredRootView(ReactRootView rootView) {
  2. UiThreadUtil.assertOnUiThread();
  3. this.mAttachedRootViews.add(rootView);
  4. if(this.mReactContextInitAsyncTask == null && this.mCurrentReactContext != null) {
  5. this.attachMeasuredRootViewToInstance(rootView,this.mCurrentReactContext.getCatalystInstance());
  6. }
  7.  
  8. }

重点关注代码this.mAttachedRootViews.add(rootView);这里可以看到我们的view被添加到mAttachedRootViews 的list中。而保存这个list的XReactInstanceManagerImpl实例,是在创建ReactInstanceManager 是构建。在我的项目中,我为了减少白屏时间把ReactInstanceManager用单例实现,这样就导致保存view的list一直存在内存中,引起activity内存泄漏。
代码分析证实了猜想,那么在activity onDestory()方法中把view从list中移除,应该就不会引起内存泄漏了。
我在ReactRootView 中找到unmountReactApplication()方法如下:

  1. public void unmountReactApplication() {
  2. if(this.mReactInstanceManager != null && this.mIsAttachedToInstance) {
  3. this.mReactInstanceManager.detachRootView(this);
  4. this.mIsAttachedToInstance = false;
  5. }
  6.  
  7. }

进入detachRootView()方法

  1. public void detachRootView(ReactRootView rootView) {
  2. UiThreadUtil.assertOnUiThread();
  3. if(this.mAttachedRootViews.remove(rootView) && this.mCurrentReactContext != null && this.mCurrentReactContext.hasActiveCatalystInstance()) {
  4. this.detachViewFromInstance(rootView,this.mCurrentReactContext.getCatalystInstance());
  5. }
  6.  
  7. }

可以看到该方法执行了this.mAttachedRootViews.remove(rootView),移除view。我修改onDestory方法如下:

  1. @Override
  2. protected void onDestroy() {
  3. super.onDestroy();
  4. if(mReactRootView!=null) {
  5. mReactRootView.unmountReactApplication();
  6. mReactRootView = null;
  7. }
  8. if (mReactInstanceManager != null) {
  9. mReactInstanceManager.onHostDestroy(this);
  10. }
  11. }

添加没有在出现内存泄漏的log,我知道React Native 提供了一个实现好的ReactActivity,于是好奇的看了一下它是如何实现onDestory的:

  1. protected void onDestroy() {
  2. super.onDestroy();
  3. this.mDelegate.onDestroy();
  4. }
  5. protected void onDestroy() {
  6. if(this.mReactRootView != null) {
  7. this.mReactRootView.unmountReactApplication();
  8. this.mReactRootView = null;
  9. }
  10.  
  11. if(this.getReactNativeHost().hasInstance()) {
  12. this.getReactNativeHost().getReactInstanceManager().onHostDestroy(this.getPlainActivity());
  13. }
  14.  
  15. }

看到这里就明白了,fb自己的ReactActivity中也添加了unmountReactApplication方法。我估计文档中的例子都是最简单的,但是自己的项目中不可能每个activity都像例子那样去实现一个ReactInstanceManager,所以要么用系统的ReactActivity 要么自己添加unmountReactApplication方法

猜你在找的React相关文章