tripolskypetr 15 июл 2022 в 03:28

Проектируем DataGrid на React так, чтобы сэкономить Boilerplate

13 мин

JavaScript*Программирование*CRM-системы*ReactJS*TypeScript*

Комментарии 7

Закреплённые комментарии

tripolskypetr 16 июл 2022 в 00:07

А компоненты обновил? А что уже было написано с поправкой на отсутствие batching не поломал? А точно нет сторонних модулей с мертвым автором?

https://youtube.com/shorts/eXwplb6mJGY

P.S. А джуна как онбордить ?

napa3um 15 июл 2022 в 04:04

Что если для запроса на сервер нужно получить актуальное значение всех трех состояний единовременно (см кнопку Apply)?

Все разрозненные вызовы setState в рамках одного синхронного вычисления накапливаются в один batch и приводят лишь к одному ререндерингу DOM-а.

вынести запрос на получение данных в чистую функцию

Функция, возвращающая состояние удалённого сервера, по определению нечистива :).

Недавно занимался реализацией дата-грида с виртуализированными строками (это когда таблица умеет отображать триллиард строк данных, рендеря только то, что видно на экране, не забивая память и процессор), долго вентилировал существующие библиотеки, штук 15 накопал, пришёл к выводу, что на рынке универсальных реакт-компонентов есть всего две взрослых библиотеки, реализующих два различных подхода. Классический компонент с набором опций для параметризации под большинство промышленных юскейсов - https://autodesk.github.io/react-base-table/docs/ , и бескомпонентный набор хуков для самостоятельного конструирования "любых" таблиц - https://tanstack.com/table/ (там как раз используется react-window, переписанная и переосмысленная автором библиотека react-virtualized, которую вы рассматривали). Рекомендую всем.

tripolskypetr 15 июл 2022 в 04:12

Batching вроде починили, ранее он не работал после setTimeout. Соответственно, после внедрения любой фичи с debounce мог появиться плавающий баг

https://stackoverflow.com/questions/65426169/why-setstate-in-settimeout-not-batching

Думаю, на tanstack как раз можно реализовать такой конфиг)

napa3um 15 июл 2022 в 04:19

Batching вроде починили, ранее он не работал после setTimeout. Соответственно, после внедрения любой фичи с debounce появлялся плавающий баг

Если разные части стейта устанавливаются в разных асинхронных функциях (одна часть сразу, а другая после таймаута), то они не батчатся, конечно (в общем случае и не должны, мало ли, сколько ждать всех изменений, интерфейс имеет смысл перерисовывать в конце каждой таски V8). Вроде ничего в этом месте не ломалось.

Думаю, на tanstack как раз можно реализовать такой конфиг)

Не очень понятна ценность этого конфига, но может кому-то и пригодится, мало ли :).

Alexandroppolus 15 июл 2022 в 07:15

в разных асинхронных функциях

Именно в одной функции, как по ссылке выше. До 18 версии батчинг работал, только если несколько стейтов синхронно ставились в одном хендлере реактовского события.