Блог

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

пример кода

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

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

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

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

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

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

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

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

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

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

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

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

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

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