Большие компоненты в виде разделов в VirtualizedList / etc?
Если я хочу отобразить кучу разнородных данных в виртуализированном списке, кажется, что по умолчанию это делается так, чтобы родительский компонент собирал все данные, чтобы он мог создавать разделы для предоставления компоненту списка.
Есть ли способ избежать этого, чтобы родительский компонент делал это? Я хотел бы отделить родительский компонент от части сбора данных, чтобы все, что ему нужно было сделать, это объявить, что у него есть такие-то компоненты, и тогда эти компоненты будут нести ответственность за сбор данных.
Это было бы чрезвычайно просто, если бы это был ScrollView:
<ScrollView>
<SectionA>
<SectionB>
<SectionC>
</ScrollView>
Однако, чтобы использовать прирост производительности VirtualizedList, если каждый раздел большой, мне нужно будет передать отдельные данные каждого раздела в VirtualizedList. Я не знаю, как это сделать и возможно ли это.
Ответы 1
Не уверен, является ли это идиоматическим или грубым антипаттерном React, но я решил, что каждый раздел должен быть реализован как полностью безголовый Component.
export type SectionDataComponentProps = {
onDataChanged?: () => void, // call this whenever the data updates.
}
export class SectionDataComponent<P : SectionDataComponentProps, S, ItemT> extends React.PureComponent<P, S> {
// Implemented by subclasses
getSectionData() : Array<SectionT<ItemT>> {
// returns an array of sections for a SectionList...
}
render() {
// business logic component only.
return null;
}
}
Родительский компонент отслеживает их с помощью ref, а затем при необходимости вызывает getSectionData ().