lintlist incement Listlist

Question

我有3个不同列表的屏幕，所有列表都有一些自定义标题/页脚，并且列表包含大量数据，所以我的问题是 - sectionList内部列表中有任何性能问题吗？

如果这不是最佳解决方案，那么这是我想做什么

const App = () => {
  const renderItem = ({item, section, index}) => {
    switch (section.type) {
      case 'LIST_1':
        return (
          <View>
            <Text>Some custom set of components</Text>
            <FlatList
              data={section.items}
              renderItem={({item}) => (
                <View
                  style={{
                    padding: 20,
                    margin: 10,
                    backgroundColor: 'blue',
                  }}>
                  <Text>{item.title}</Text>
                </View>
              )}
              keyExtractor={item => item.id}
            />
          </View>
        );
      case 'LIST_2':
        return (
          <View>
            <Text>Some custom set of components</Text>
            <FlatList
              data={section.items}
              renderItem={({item}) => (
                <View
                  style={{
                    padding: 20,
                    margin: 10,
                    backgroundColor: 'red',
                  }}>
                  <Text>{item.count}</Text>
                </View>
              )}
              keyExtractor={item => item.id}
            />
          </View>
        );
      case 'LIST_3':
        return (
          <View>
            <Text>Some custom set of components</Text>
            <FlatList
              data={section.items}
              renderItem={({item}) => (
                <View
                  style={{
                    padding: 20,
                    margin: 10,
                    backgroundColor: 'blue',
                  }}>
                  <Text>{item.score}</Text>
                </View>
              )}
              keyExtractor={item => item.id}
            />
          </View>
        );
    }
  };
  const sections = [
    {
      type: 'LIST_1',
      data: [1],
      items: Array.from(Array(50)).map((el, i) => ({
        id: i + 1,
        title: i + 1,
      })),
    },
    {
      type: 'LIST_2',
      data: [2],
      items: Array.from(Array(50)).map((el, i) => ({
        id: i + 1,
        count: i + 1,
      })),
    },
    {
      type: 'LIST_3',
      data: [3],
      items: Array.from(Array(50)).map((el, i) => ({
        id: i + 1,
        score: i + 1,
      })),
    },
  ];

  return (
    <SafeAreaView>
      <SectionList
        sections={sections}
        keyExtractor={item => item}
        renderItem={renderItem}
      />
    </SafeAreaView>
  );
};

，而ScrollView需要花费很多时间才能渲染，您能指导我更好吗？

Answer 1

您的示例可以简单地使用suplactlist来实现。

// Here we define section objects. I arbitrarily added title, footer and style.

const DATA = [
    {
        title: 'Section 1 header',
        footer: 'Section 1 footer',
        data: [...Array(3).keys()],
        style: { backgroundColor: 'red' },
    },
    {
        title: 'Section 2 header',
        footer: 'Section 2 footer',
        data: [...Array(3).keys()],
        style: { backgroundColor: 'blue' },
    },
    {
        title: 'Section 3 header',
        footer: 'Section 3 footer',
        data: [...Array(3).keys()],
        style: { backgroundColor: 'yellow' },
    },
]

// renderItem gets passed an object with item, section, index and separator keys. I'm using item and section to access my own section style.

const Item = ({ item, sectionStyle }) => (
    <View style={[styles.item, sectionStyle]}>
        <Text style={styles.title}>{item}</Text>
    </View>
)

// Use renderSectionHeader and renderSectionFooter props to add, respectively, header and footer.

const App = () => (
    <SafeAreaView style={styles.container}>
        <SectionList
            sections={DATA}
            keyExtractor={(item, index) => item + index}
            renderItem={({ item, section }) => <Item item={item} sectionStyle={section.style} />}
            renderSectionHeader={({ section: { title } }) => <Text style={styles.header}>{title}</Text>}
            renderSectionFooter={({ section: { footer } }) => <Text style={styles.header}>{footer}</Text>}
        />
    </SafeAreaView>
)

为了回答您的原始问题，您可能会遇到React-Natives列表组件的性能问题，这取决于许多因素，包括您的数据和渲染组件。

您可以在此处了解有关该主题的更多信息：
httpps://reaectnative.dev/dev/dev/docs/optimigition-flatlist-flatlist-configuration