代码之家 › 专栏 › 技术社区 › David Liu

在virtualizedlist/etc中作为部分的大型组件?

react-native-sectionlist react-virtualized react-native-flatlist react-native

David Liu · 技术社区 · 6 年前

如果我想在一个虚拟化的列表中显示一堆异构数据,那么默认的方法似乎是让父组件收集所有数据,以便它可以创建要提供给列表组件的部分。

是否有任何方法可以避免要求父组件执行此操作?我想将父组件与数据收集部分分离,这样它所要做的就是声明它具有此类和此类组件,然后这些组件将负责收集数据。

如果它是滚动视图,这将非常简单:

<ScrollView>
    <SectionA>
    <SectionB>
    <SectionC>
</ScrollView>

但是,要利用虚拟化DList的性能提升,如果每个部分都很大,我需要将每个部分的单个数据传入虚拟化DList。我不知道该怎么做,如果可能的话。

1 回复 | 直到 6 年前

David Liu 6 年前

不确定这是否是惯用的或严重的反模式,但我解决它的方法是将每个部分实现为纯无头数据。 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()。