У меня есть приложение реагирования, которое принимает довольно большой кусок заказов (мы можем рассматривать их как онлайн-заказы из магазина).Затем я беру эти заказы и сортирую их по различным критериям и отображаю их в различных категориях («Игрушки», «Товары для дома» и т. Д.).
Конечный результат выглядит примерно так:
Игрушки (2)
- Заказ на грузовик
- Заказ на куклу
Товары для дома (2)
Код - это просто, как компонент категории, вызывающий столько компонентов заказа
Компонент категории
- Компонент заказа
- Компонент заказа
Каждый компонент заказа также имеет форму с ним такчто пользователь может, если он хочет, обновить что-то об этом заказе.
Поскольку существует потенциально много категорий (возможно, десятки) и потенциально более тысячи заказов, я не отображаю фактические заказы до тех пор, пока кто-то не нажмет иоткрывает категорию (в противном случае реагирует медленно на сканирование, пытаясь все отрендерить).В реальных заказах я даже зашел так далеко, что не отображал поля формы, пока они не выбрали конкретный заказ для обновления.Как представление заказов, так и формы внутри каждого заказа контролируются условным отображением.
Так что на данный момент производительность довольно приемлема.
Суть в том, что по-прежнему существует задержка, когда пользователь нажимает, чтобы открыть категорию, скажем, с 1000 заказов, может быть, от 3 до 4 секунд.
Я хотел бы указать, что естьнекоторая загрузка продолжается, как только пользователь нажимает, чтобы он не терял терпение, все щелкают счастливыми и монтируются и размонтируются, пока их браузер не взорвется.Это может быть что-то вроде:
- щелчок -
Компонент категории -спиннер или что-то-
- проход от 3 до 4 секунд -
Компонент категории -no spinner-
- Компонент заказа
- Компонент заказа
Я загрузил иконки дляожидание вызовов API и тому подобное, и это нормально, но я не уверен, как на самом деле указать, что мы ожидаем, пока React завершит рендеринг большого количества дочерних компонентов и скажет родительским компонентам больше не отображать счетчик?
Если бы это был только один родительский компонент и один дочерний компонент, я бы передал функцию от родителя дочернему элементу, которая обновляет состояние «эй, я готов» в родительском компоненте, чтобы остановить отображение счетчика.
Однако, если я передам дочерним элементам каждую такую функцию, которая состоит из 1000+ функций, которые 1000+ дочерние элементы будут использовать для обновления одного родительского родителя, кажется плохой идеей обновлять это состояние более 1000 раз.
Я думал о паспойте детям функцию, которая добавляет что-то в массив в родительском.Это будет что-то вроде «создания отчетов в массиве», не имеет значения, что на самом деле находится в массиве, я просто проверю в родительском элементе, имеет ли «отчетность в массиве» ту же длину, что и дочерние элементы ... но это такжечувствовал себя вялым.
Есть ли лучший / хороший способ для родителей знать о текущем состоянии своих детей / если он завершил рендеринг в DOM, или если дети завершили обновление?
Большесрок У меня есть некоторые планы по введению нумерации страниц и другим усилиям по сокращению отображения более 1000 заказов в категории, но на данный момент клиенты «хотят», чтобы все заказы были открыты одновременно.