Вопрос про списки Простой список: class Deep extends React.Component<any> {

componentDidMount() {
console.log('Deep item mounted');
}

shouldComponentUpdate() {
return false;
}

render() {
return (
<View style={itemStyles.view} />
);
}
}

class Item extends React.Component<any> {
shouldComponentUpdate() {
return false;
}

render() {
return (
<Deep />
);
}
}

export class List extends React.Component<Props> {
renderItem = () => (
<Item />
)

render() {
const {
list,
onRefresh,
refreshing,
loadMore
} = this.props;

return (
<FlatList
refreshControl={(
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
/>
)}
initialNumToRender={4}
style={styles.list}
data={list}
keyExtractor={id => id}
renderItem={this.renderItem}
onEndReached={loadMore}
onEndReachedThreshold={2}
ref={this._flatList}
/>
);
}
}
Обратите внимание, что элементы этого списка не должны обновляться:
shouldComponentUpdate() {
return false;
}

По идее это супер-оптимизированный список. Но в реальности все не так как на самом деле. На видео видно что компоненты ПЕРЕСОЗДАЮТСЯ каждый раз заново. То есть в запрете на апдейт смысла нет ,если компонент пересоздается.

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

Такой же вопрос не давно возникал, я в консоль выводил, при скролле почти все элементы на каждый скролл пересоздавались, я тоже не понял в чем прикол