Необходимо ли размонтировать состояние в ComponentWillUnmount?

Question

Я выполняю запросы к серверу в моем приложении в пределах componentDidMount. Поэтому я звоню setState в пределах componentDidMount. Мне нужно размонтировать этот state в пределах componentWillUnmount? Это решение дляКак избежать утечки памяти в моем приложении? Пожалуйста, помогите мне найти решение для этого. Спасибо!

пример кода

componentDidMount(){
  fetch({ /* ... */ })
    .then(res => res.json())
    .then((responseData) => {
      this.setState({
        result: responseData.meta.data
      })
    })
}

componentWillUnmount(){
  this.setState({
    result:''
  })
}

Answer 1

Не нужно размонтировать состояние.Установка result для пустой строки не лучше, чем установка любого другого значения.

Причиной утечек памяти является то, что где-то используется ссылка на объект (экземпляр компонента), это мешает емусборщик мусора как неиспользуемый.

В этом фрагменте кода setState может вызываться после размонтирования компонента, поскольку запрос не отменен.Это приведет к предупреждению:

Невозможно выполнить обновление состояния React для неустановленного компонента.Это не работает, но это указывает на утечку памяти в вашем приложении.Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount.

Если запрос достаточно длинный, это приведет к утечке памяти.Чтобы этого избежать, запрос или обещание, вызывающее setState вызов, необходимо отменить.Что касается запроса Fetch API, это можно сделать с помощью AbortController.

Answer 2

Вам не придется беспокоиться об очистке состояния при размонтировании, так как причины этого уже отмечены людьми выше.

Но если вы оставили слушателей, подключенных к вашему компоненту, «не удаленными», то это могло бы стать возможным кандидатом на утечку памяти. componentDidMount() можно использовать в качестве места для подключения слушателей и componentWillUnmount для удаления этих подключенных слушателей. '

В архитектуре Flux мы используем их для подключения и удаления прослушивателей событий, отправляемых из stores.

public componentDidMount() {
    sampleStore.addListener('sampleEventFired', this.oncatch);
}

public componentWillUnmount() {
    sampleStore.removeListener('sampleEventFired', this.oncatch);
}

Answer 3

React очищает состояние компонента при размонтировании, поэтому вам не нужно сбрасывать состояние для componentWillUnmount.

То, что может произойти при выполнении запроса в компонентах, заключается в том, чтоВаш запрос может быть выполнен после Ваш компонент снова отключен.В этот момент вы пытаетесь выполнить setState для компонента, который не смонтирован.Вы получите ошибку в своей консоли в этот момент.Большинство HTTP-библиотек предлагают функции для отмены запросов, это можно использовать для предотвращения этого. Пример из библиотеки axios здесь ...