Как обнаружить утечки памяти в реагирующем приложении

Question

Я создал приложение для системы управления обучением на реагирующем нативном Android. Я использую AsyncStorage для простого управления состоянием и вообще не использовал избыточность. Проблема, с которой я сейчас сталкиваюсь, заключается в том, собираюсь ли я использовать приложение непрерывно, выполняя различные действия, затем приложение становится очень медленным. Я думаю, что это утечка памяти, потому что, когда я убиваю приложение из фона и открываю его снова, оно работает безо всякой задержки. Так что я не знаю, как избежать этой памяти Утечка. Я пробовал много решений

1. Удалено все console.log из приложения
2. Изменены все встроенные стили
3. Используется ComponentDidMount вместо ComponentWillMount.
4. Пробная предварительная выборка данных.

Но я не знаю, как удалять данные из динамической памяти. Сохраняются ли данные в heap при каждой навигации? Так что это сделает приложение очень медленным в производительности. Я не знаю, прав ли я. Извините, если в моей концепции есть какая-то ошибка. Сейчас нет времени менять управление состоянием на redux. Кто-нибудь, пожалуйста, помогите мне найти решение, это будет большая помощь. Спасибо!

Answer 1

У меня была та же проблема, несколько методов, которые помогли:

Использование transform-remove-console:

https://www.npmjs.com/package/babel-plugin-transform-remove-console

addэто для ваших плагинов производства Babel и установить его.Он будет скрывать все журналы консоли в приложении в рабочем состоянии.

Добавление смонтированного состояния

В частности, вызов setState () в размонтированном компоненте означает, чтоВаше приложение по-прежнему содержит ссылку на компонент после его демонтажа, что часто указывает на утечку памяти!

https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html

import React, { Component } from 'react';


class App extends Component {

  _isMounted = false;

  componentDidMount() {
    this._isMounted = true;
    // ... do your stuff here
  }

  componentWillUnmount() {
    // tells the component that component is now unmounted
    this._isMounted = false;
  }

  getUsersFromApi(){
    if(this._isMounted){
      // ... tasks
    }
  }

}

export default App;

Answer 2

У меня тоже была та же проблема из-за вызова setState для не подключенного компонента,

Итак, у меня обычно есть этот шаблон для любого компонента на основе классов, который имеет состояние:

Я забыл о setState() и использую setComponentState, объявленный как:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      // other fields...
      isUnmounted: false,
    };
  }

  componentWillUnmount() {
    this.setState({ isUnmounted: true });
  }

  setComponentState = (values) => {
    if (!this.state.isUnmounted) this.setState(values);
  };
}