React Context API, большой массив и скорость приложения

Question

Приложение построено на Node / React / Express.

У меня есть компонент таблицы, а затем подкомпонент для каждой строки в таблице, которая динамически генерируется из массива (clients), который собираетсяиз БД через контекстный вызов API реагировать и хранится в состоянии.Затем я сопоставляю массив и создаю строку (Client компонент) для каждого клиента.

 <TableBody>
   {clients.map(client => (
    <Client
     key={client.id}
     client={client}
     handleSnackBar={this.props.handleSnackBar}
     handleSendMail={this.props.handleSendMail}
    />
   ))}
 </TableBody>

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

Я ищу а) Любые проблемы, связанные с этим, как яделаю это, б) предложения по ускорению этого процесса и оптимизации кода, в) Redux лучший вариант для этого?Или, я полагаю, d) у меня нереалистичные ожидания, и я должен просто добавить загрузочный счетчик и назвать его хорошим?

Answer 1

1. Где ваш код для активации и деактивации клиента?В компоненте Таблица или в компоненте Клиент?
2. Как вы обновили элемент клиента?Вы обновляете весь массив клиентов или только текущий элемент?
3. Использовали ли вы PureComponent для вашего компонента Client?

For 1. Лучше поместить активирующий / деактивированный материал вваш клиентский компонент.Таким образом, каждый клиентский компонент управляет своим состоянием, и таким образом, когда вы активируете / деактивируете клиент, обновляется не вся ваша таблица.

Для 2. Как сказано в 1. Лучше управлять всеми вещами для каждого клиентасоставная часть.Вы можете создать UncontrolledComponent, чтобы компонент не обновлялся каждый раз при изменении состояния компонента Table.Для этого см. Документ здесь https://reactjs.org/docs/uncontrolled-components.html

Для 3. Когда вы используете огромный список данных, лучше использовать PureComponent, потому что он лучше управляет его состоянием и повышает производительность.См. Документ для получения дополнительной информации https://reactjs.org/docs/react-api.html#reactpurecomponent