如果我想在虚拟化列表中显示一堆异构数据,似乎默认的方法是让父组件收集所有数据,以便它可以创建要提供给列表组件的部分。
有什么方法可以避免要求父组件执行此操作?我想将父组件与数据收集部分分离,以便它要做的就是声明它具有此类组件,然后这些组件将负责收集数据。
如果它是ScrollView,这将非常简单:
<ScrollView>
<SectionA>
<SectionB>
<SectionC>
</ScrollView>
但是,要利用VirtualizedList的性能提升,如果每个部分很大,我将需要将每个部分的单独数据传递到VirtualizedList中。我不确定如何执行此操作,或者是否可能。
答案 0 :(得分:0)
不确定这是不是惯用的还是总的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()。