Оптимизация React-приложения: Display:'none' или перерендер

[harios]

1. потребление памяти находится в рамках 600-1200мб в случае с рендером методами React

2. от 1800 до 3200мб в случае со скрытием табов через стили

Я тебе какое зло сделал

[DarthVictor]

Ну так

Мы генерируем 2 списка по 50000 строк

Вообще, можно ли нагрузочный тест считать корректным, если пробки не выбило?

[Zakhar_82]

Спасибо за идею, надо будет дополнить :)

[devlev]

Из личного опыта могу сказать что такое решение подойдет не во всех случаях. Дочерние компоненты в табе могу создавать различные вебворкеры, постоянные соединения с сервером, или делать циклически какие то действие, а так же как то реагировать на размеры окна и тем самым подстраиваться под видимую область. В случае с использованием подхода с display:none нужно учитывать это в каждом компоненты которые будет в скрытой вкладке и как то реагировать на это. Это приводит к еще больше накладным расходам. Все это негативно влияет как на расходуемую память так и на стабильность работы.

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

[Zakhar_82]

Да, конечно, всегда необходимо взвешивать всё в сумме. У нас многие компоненты используют react-window (ну как много ... два). Постарался предложить максимально изолированный и простой пример. Мне кажется, что скрывать табы разумно было бы в случае, если у тебя есть условная лента и несколько вспомогательных табов, которые просты и предсказуемы, чтобы не терять не перезагружать и не перерендеревать ленту при переключении.

[MentalBlood]

Очень не хватает графиков зависимостей потребления памяти от кол-ва строк

[nin-jin]

Тут проходил мимо $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.

[Zakhar_82]

Спасибо большое за комментарий, впервые от Вас услышал про $mol, я так понимаю - точка входа https://mol.hyoo.ru/, как раз скоро отпуск - буду расширять кругозор)))

[Gary_Ihar]

Синтаксис - боль

[nin-jin]

Тоже не люблю синаксис тайпскрипта. Очень уж он вербозный. То ли дело яваскрипт, где можно лаконично массивы с объектами складывать.