Skip to content
5 / 21

Как ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‡Π΅Π½ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… списков Π² React-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ?

Основной ΠΌΠ΅Ρ‚ΠΎΠ΄ β€” виртуализация (windowing): Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²ΠΈΠ΄Π½Ρ‹ Π² области ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Π° Π½Π΅ всС 10 000. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ @tanstack/react-virtual ΠΈ react-window ΡΠΎΠ·Π΄Π°ΡŽΡ‚ DOM-ΡƒΠ·Π»Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… строк, подставляя пустоС пространство свСрху ΠΈ снизу. Π­Ρ‚ΠΎ сниТаСт количСство DOM-ΡƒΠ·Π»ΠΎΠ² с тысяч Π΄ΠΎ дСсятков.

Как ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‡Π΅Π½ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… списков Π² React-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ? | JScriptiser