Upgrade to Pro — share decks privately, control downloads, hide ads and more …

1001 Pitfalls of Working with React-Virtualized

1001 Pitfalls of Working with React-Virtualized

1001 Pitfalls of Working with React-Virtualized
Vladislav Kotelnikov, Developer, Exactpro
Dev Meetup: Kostroma
23/07/2019

Youtube Channel https://www.youtube.com/c/exactprosystems
Linkedin https://www.linkedin.com/company/exactpro-systems-llc
Instagram https://www.instagram.com/qakostroma/
Twitter https://twitter.com/exactpro

5206c19df417b8876825b5561344c1a0?s=128

Exactpro
PRO

July 23, 2019
Tweet

Transcript

  1. Build Software to Test Software exactpro.com Тысяча и одна проблема

    виртуализации в React Владислав Котельников, разработчик Exactpro
  2. 2 Build Software to Test Software exactpro.com Sailfish Reports GUI

  3. 3 Build Software to Test Software exactpro.com Списки сообщений и

    экшенов
  4. 4 Build Software to Test Software exactpro.com Виртуализация Обычный список

    Виртуализированный список
  5. 5 Build Software to Test Software exactpro.com React-virtualized <List/> <Grid/>

    <InfiniteLoader/> <Table/>
  6. 6 Build Software to Test Software exactpro.com React-virtualized API (static

    list) Ширина и высота контейнера Количество строк Высота одной строки Функция рендера строки
  7. 7 Build Software to Test Software exactpro.com React-virtualized API (row

    renderer function) Стиль для строки Индекс строки Уникальный ключ div-wrapper
  8. 8 Build Software to Test Software exactpro.com React-virtualized API (static

    list)
  9. 9 Build Software to Test Software exactpro.com React-virtualized API (dynamic

    list) Функция для получения высоты из кэша Высота ячейки по умолчанию Ширина фиксирована
  10. 10 Build Software to Test Software exactpro.com React-virtualized API (dynamic

    list) Ссылка на родительский компонент List Ссылка на кэш размеров ячеек
  11. 11 Build Software to Test Software exactpro.com React-virtualized API (dynamic

    list) Remeasure Callback
  12. 12 Build Software to Test Software exactpro.com React-virtualized API (dynamic

    list)
  13. 13 Build Software to Test Software exactpro.com Потеря состояния Component

    Component Component Component props props props state state
  14. 14 Build Software to Test Software exactpro.com Потеря состояния state

  15. 15 Build Software to Test Software exactpro.com Потеря состояния Component

    Component Context Provider Context Consumer Component Provider state context
  16. 16 Build Software to Test Software exactpro.com Потеря состояния

  17. 17 Build Software to Test Software exactpro.com Поиск по странице

  18. 18 Build Software to Test Software exactpro.com Поиск по странице

    search(string) string.split()
  19. 19 Build Software to Test Software exactpro.com Поиск по странице

    Поисковый запрос Текущий индекс Общее количество результатов
  20. 20 Build Software to Test Software exactpro.com Поиск по странице

  21. 21 Build Software to Test Software exactpro.com В заключение •

    YAGNI (You aren't gonna need it) • Лучше всего поддаются виртуализации списки с одинаковой высотой строк • Списки с динамической высотой тяжелее всего виртуализировать • Поиск по странице не работает с виртуализированными списками
  22. 22 Build Software to Test Software Tel: +7 495 640

    24 60 , +1 415 830 38 49 exactpro.com Спасибо!
  23. 23 Build Software to Test Software exactpro.com Web applications

  24. 24 Build Software to Test Software exactpro.com Нерешенные проблемы •

    Дерганье скроллбара
  25. 25 Build Software to Test Software exactpro.com Нерешенные проблемы •

    Дерганье скроллбара