https://snack.expo.io/ryD4VtV9H если кликнуть по элементу листа то в консоль пишеться 6 раз лог, это как пример, у меня на самом деле очень большой лист и когда он ререндерится то все подвисает, как сделать так что бы ререндерился только элемент по которому клик ?
2 ответа
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
-
не подходит, у меня просто єто календарь и вывожу ячейки дня, и на екране как миним 2.5 месяца помещаеться тоесть примерно 75 дней по которым можно кликать– Mykoriak29 окт 2019 в 10:11
-
у меня при использовании React.memo, и в вашем примере - лист глючит, рандомно выбираются объекты листа непонятным образом– Mykoriak30 окт 2019 в 11:09
-
Во-первых ошибка в том что одинаковые id у 3,4,5 айтема.Во вторых, если поставить консоль лог в onSelect, хорошо видно, что из-за неправильно использованного замыкания, selected для каждого Item свой, поэтому лист ведет себя неадекватно.– STY1 ноя 2019 в 11:57
если привратить 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>
);
}
}