Блог

Я усердно работаю над оптимизацией своего <FlatList /> компонента, вот мои примеры кодов:

Случай 1:

https://snack.expo.io/HrpJli9EE

Я пытаюсь увеличить количество идентификаторов в selectedIds .
Однако, поскольку контекст selectedIds in не изменяет ссылку
и <FlatList /> выполняет неглубокое сравнение,
поэтому элементы не были повторно отображены со значением в контексте.

Случай 2:

https://snack.expo.io/wRLNRYAmU

Поэтому я пытаюсь создавать новую ссылку на объект каждый раз, когда элемент нажат
(только измените строку 17 из ссылки Case 1)
Теперь элементы могут повторно отображаться с новыми значениями.
Однако компонент memo() не работает для <Item /> компонента,
что может привести к большой загрузке для большого списка.

Итак…

Случай 1: есть ли какой-нибудь способ <FlatList /> не проводить неглубокое сравнение с extraData ?

Или…

Случай 2: Есть ли какой-либо способ предотвратить повторный рендеринг в <Item /> компоненте, если значение элемента одинаковое?

т.е. если я нажимаю на первый элемент, чтобы увеличить номер,
так как номер второго элемента и третьего элемента не увеличивается, они не должны повторно отображаться
но в настоящее время они повторно визуализируются.

Цените любые ответы или комментарии.

Напоминание: Вы можете открыть панель консоли, нажав «Редактор» в нижней панели> включить «Панель»> нажать «ЖУРНАЛ».

Выяснил, используя case 2 с useMemo помощью instead of memo может уменьшить ненужный рендеринг неизмененного элемента:

 import React, { useContext, useMemo } from 'react';
import { Text, TouchableOpacity } from 'react-native';

import { styles } from './styles';

const Item = ({ item, onPress }) => {
  const { selectedIds } = useContext(AppContext);
  const value = selectedIds[item.id] || 0;
  const onItemPress = () => onPress(item.id, value   1);

  return useMemo(() => {
    /* You will only see this console log when this item value is updated */
    console.log("render item", item.id, value);
    return (
      <TouchableOpacity onPress={onItemPress} style={styles.item}>
        <Text style={styles.title}>{item.title} {value}</Text>
      </TouchableOpacity>
    );
  }, [value]);
};