Question

我的列表组件如下所示：

<List>
  <FlatList
    data={films}
    renderItem={({ item }) => (
      <FilmListItem
        filmSummary={item}
        navigateToDetailsScreen={navigateToDetailsScreen}
      />
    )}
    keyExtractor={() => cuid.slug()}
    ListHeaderComponent={<Header totalResults={totalResults} />}
    ListFooterComponent={<Footer />}
    onEndReached={() => dispatchFetchPage()}
  />
</List>

FilmListItem渲染功能如下所示：

  render() {
    const { filmSummary } = this.props
    return (
      <TouchableOpacity onPress={this.onPress}>
        <ListItem title={filmSummary.Title} subtitle={filmSummary.Year} />
      </TouchableOpacity>
    )
  }

FlatList加载一个包含多个项目的屏幕，然后再继续加载另外三个屏幕。但是，已经呈现的TouchableOpacity项目不会响应触摸，直到FlatList加载了其他页面为止。

FlatList加载完成后，项目会响应触摸，但之前不会响应。如果我将列表滚动到底部并且FlatList继续加载更多项目，则可见项目将再次无响应。

我错过了什么吗？

Answer 1

似乎与性能问题有关。我的建议：

将纯组件用于渲染项目功能。它会比较浅，所以它不会轻易地重新渲染。表现有所改善。
不要在道具上使用匿名功能。将它移出外部渲染功能。因此，每次重新渲染组件时，该功能都不会重新创建。
将initialNumToRender={number}道具添加到Flatlist。它只会显示屏幕上可见的那些组件。

示例代码：

// 1. make sure your FilmListItem is pure component!!
class FilmListItem extends React.PureComponent {
  render() {
    // ....
  }
}

// 2. Move out all anonymouse function
_renderItem = ({ item }) => (
  <FilmListItem
    filmSummary={item}
    navigateToDetailsScreen={navigateToDetailsScreen}
  />
);

_keyExtractor = () => cuid.slug();

// render of your main component
render() {
  return (
    <List>
      <FlatList
        initialNumToRender={number} // 3. try add initialNumToRender
        data={films}
        renderItem={this._renderItem}
        keyExtractor={this._keyExtractor}
        ListHeaderComponent={<Header totalResults={totalResults} />}
        ListFooterComponent={<Footer />}
        onEndReached={dispatchFetchPage} // no need anonymouse function
      />
    </List>
  );
}

您可以在此处查看类似的性能问题：

https://github.com/facebook/react-native/issues/13649

当FlatList加载新项目时，FlatList项目不会响应触摸

1 个答案: