Я отлаживал проблему с памятью в Memory Profiler для приложения React / Redux и заметил эти Detached HTMLDivElements вместе с несколькими другими типами элементов.
Я не использую типичную навигационную библиотеку, просто использую состояние для перемещения экранов. Я не уверен, что это проблема с Chrome, сборщиком мусора или React, который каким-то образом содержит ссылку на старые экраны.
По каким причинам приложение React может оставить эти Отдельные элементы. Может ли приставка connect() потенциально содержать ссылку на хранилище, в результате чего компонент не будет переработан?
Наконец, я должен сказать, что это приложение React / Redux в качестве расширения Chrome.
Рассматривая проблему, я заметил, что класс Messenger (корневой компонент, содержащий логику обмена сообщениями в чате) указан 3 раза в профилировщике памяти.
А вот как я структурировал экраны.
renderScreen = () => {
switch (this.state.screen) {
case Screen.HOME:
return <Home/>
case Screen.MESSENGER:
return <Messenger/>
....
}
}
render() {
...
return this.renderScreen()
}
Означает ли это, что новый класс Messenger создается при каждом переходе к этому компоненту?