Блог

Главная - Вопросы по программированию - Как плавно перенаправить дорогостоящий компонент

Как плавно перенаправить дорогостоящий компонент

#reactjs #react-native #react-redux #react-hooks

Вопрос:

Мне нужна твоя помощь здесь ! И привет, ребята

Я создаю приложение в реактивном режиме, у меня есть список разделов, который отображает довольно дорогие/тяжелые элементы. На данный момент в списке не так много пунктов (между 20 и 30).

Дело в том, что мне нужно, чтобы список данных был фильтруемым/группируемым. Когда список отфильтрован или сгруппирован, список разделов повторяется (ну, это ожидаемо), но весь пользовательский интерфейс зависает на 2-3 секунды.

Элементы списка разделов уже занесены в память (React.memo), но они все равно повторяются.

Вся фильтрация/группировка выполняется в селекторе redux (данные также поступают из хранилища).

         <SectionList
          sections={internalOrders}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => <OrderItem order={item} navigation={navigation}></OrderItem>}
          renderSectionHeader={({ section: { name } }) => (
            <Text fontSize="sm" color="grey" py="2" px="4" bg="lightgrey">
              {name}
            </Text>
          )}
        ></SectionList>

Есть ли какой-нибудь способ оптимизировать больше ? Можно ли показать счетчик во время его рендеринга ?

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

1. Вы пробовали переключиться с передачи желаемых функций в качестве реквизитов на именованный дочерний шаблон? Иногда я нахожу, что это мне помогает.

2. код списка разделов кажется мне прекрасным! может ли быть причиной замораживания логика фильтрации в redux?

3. Это может быть вызвано товаром или навигацией, но его объявление не указано в опубликованном коде.

4. @RizwanAtta На самом деле, это элемент заказа, который вызывает замораживание, потому что это довольно тяжелый компонент. Замена его простым текстом удаляет блокировку. Итак, главный вопрос заключается в следующем : как визуализировать тяжелые компоненты без замораживания приложения ? И о списке разделов : похоже, он все равно перенаправляет все элементы. Разве это не должно отображать только элементы на экранах ?

5. можете ли вы попробовать манипулировать данными с помощью реквизитов data и newData? @холирис

Метки: