Комментарии 10
1. потребление памяти находится в рамках 600-1200мб в случае с рендером методами React
2. от 1800 до 3200мб в случае со скрытием табов через стили
Я тебе какое зло сделал
Из личного опыта могу сказать что такое решение подойдет не во всех случаях. Дочерние компоненты в табе могу создавать различные вебворкеры, постоянные соединения с сервером, или делать циклически какие то действие, а так же как то реагировать на размеры окна и тем самым подстраиваться под видимую область. В случае с использованием подхода с display:none нужно учитывать это в каждом компоненты которые будет в скрытой вкладке и как то реагировать на это. Это приводит к еще больше накладным расходам. Все это негативно влияет как на расходуемую память так и на стабильность работы.
Ну и пара признать что не стоит рендерить 50к строк и надеяться что все будет работать быстро. Виртуальный скролл решает данную проблему.
Да, конечно, всегда необходимо взвешивать всё в сумме. У нас многие компоненты используют react-window (ну как много ... два). Постарался предложить максимально изолированный и простой пример. Мне кажется, что скрывать табы разумно было бы в случае, если у тебя есть условная лента и несколько вспомогательных табов, которые просты и предсказуемы, чтобы не терять не перезагружать и не перерендеревать ленту при переключении.
Очень не хватает графиков зависимостей потребления памяти от кол-ва строк
Тут проходил мимо $mol_man, набросал по быстрому вёрстку:
$my_tabs $mol_view
count 50000
sub /
<= Deck $mol_deck items /
<= Left $mol_list
title \Left
rows <= left /
<= Left_row*0 $mol_paragraph
sub / <= row_text* \Row 0
<= Right $mol_list
title \Right
rows <= right /
<= Right_row*0 $mol_paragraph
sub / <= row_text* \Row 0
Раскрасил её стилями:
namespace $.$$ {
const { px } = $mol_style_unit
$mol_style_define( $my_tabs, {
Left_row: {
border: {
width: px(1),
style: 'solid',
color: 'green',
},
padding: $mol_gap.text,
},
Right_row: {
border: {
width: px(1),
style: 'solid',
color: 'tomato',
},
padding: $mol_gap.text,
},
} )
}
Оживил логикой:
namespace $.$$ {
export class $my_tabs extends $.$my_tabs {
@ $mol_mem
left() {
return Array.from( { length: this.count() }, ( _, i )=> this.Left_row( i ) )
}
@ $mol_mem
right() {
return Array.from( { length: this.count() }, ( _, i )=> this.Right_row( i ) )
}
row_text( index: number ) {
return `Row ${ index } Tab ${ this.Deck().current() }`
}
}
}
И получил чуть больше секунды на переключение табов и 140мб потребления памяти:
Слишком быстро, подумал он, и пошёл учить react-way.
Спасибо большое за комментарий, впервые от Вас услышал про $mol, я так понимаю - точка входа https://mol.hyoo.ru/, как раз скоро отпуск - буду расширять кругозор)))
Синтаксис - боль
Оптимизация React-приложения: Display:'none' или перерендер