0

https://snack.expo.io/ryD4VtV9H если кликнуть по элементу листа то в консоль пишеться 6 раз лог, это как пример, у меня на самом деле очень большой лист и когда он ререндерится то все подвисает, как сделать так что бы ререндерился только элемент по которому клик ?

2 ответа 2

1

UPD: В вашем случае проблему решает использование собственной функции проверки изменения props в React.memo, передается вторым аргументом:

const Item = React.memo(
  ({ id, title, selected, onSelect }) => {
    console.log('rerender - ', title);

    return (
      <TouchableOpacity
        onPress={() => onSelect(id)}
        style={[
          styles.item,
          { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
        ]}>
        <Text style={styles.title}>{title}</Text>
      </TouchableOpacity>
    );
  },
  (prevProps, nextProps) => prevProps.selected === nextProps.selected);

Исправленый пример тут: https://snack.expo.io/Hyr6D6H9S

Про проблему можно почитать тут(англ): https://itnext.io/phantom-props-unnecessary-renders-and-what-no-one-told-me-about-memo-b34ebbd48c65


Если бекенд поддерживает, оптимизируйте ваш FlatList добавив пагинацию(Pagination) используя события onEndReached и onEndReachedThreshold для работы со скроллом.

Пример можно глянуть тут(англ.): https://blog.apollographql.com/loading-data-into-react-natives-flatlist-9646fa9a199b

3
  • не подходит, у меня просто єто календарь и вывожу ячейки дня, и на екране как миним 2.5 месяца помещаеться тоесть примерно 75 дней по которым можно кликать
    – Mykoriak
    29 окт 2019 в 10:11
  • у меня при использовании React.memo, и в вашем примере - лист глючит, рандомно выбираются объекты листа непонятным образом
    – Mykoriak
    30 окт 2019 в 11:09
  • Во-первых ошибка в том что одинаковые id у 3,4,5 айтема.Во вторых, если поставить консоль лог в onSelect, хорошо видно, что из-за неправильно использованного замыкания, selected для каждого Item свой, поэтому лист ведет себя неадекватно.
    – STY
    1 ноя 2019 в 11:57
0

если привратить Item в класс то работает:

class ItemClass extends React.Component {
  constructor() {
    super();

    this.handleOnSelect = this.handleOnSelect.bind(this);
  }

  shouldComponentUpdate(nextProps) {
    if (
      this.props.id !== nextProps.id
      || this.props.title !== nextProps.title
      || this.props.selected !== nextProps.selected
    ) {
      console.log('shouldComponentUpdate true:  ', nextProps.title, nextProps.selected);
      return true;
    }
    return false;
  }

  handleOnSelect() {
     const { id, onSelect } = this.props;
     onSelect(id);
  }

  render() {
    console.log('rerender')
    const { title, selected } = this.props;
    return (
      <TouchableOpacity
        onPress={this.handleOnSelect}
        style={[
          styles.item,
          { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
        ]}
      >
        <Text style={styles.title}>{title}</Text>
      </TouchableOpacity>
    );
  }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.