优化 FlatList Items 性能的最佳方法

Question

这是一个简单的平面列表：

class Products ..
render() {
    return (
          <FlatList
          renderItem={this._renderItem}
           );
}

我想创建一个项目列表并通过 onPress 项目导航到详细信息页面。

请问哪种方法比较好？

方法一：

在子组件（CardProduct 组件）中插入导航到详细信息页面，如下所示：

_renderItem = ({item}) => (

    <CardProduct
      id={item.id}
      title={item.title}
    />
  );

在 CardProduct 组件中：

render() {
    const { id,title } = this.props;

    return (
      <Card style={{flex:1}}>
          <CardItem cardBody button onPress={() => this.props.navigation.navigate('Details',{productId:id})}>
          ...
    );
}

方法二：

在当前组件（Products 组件）中插入导航到详细信息页面，如下所示：

_onPressItem = (id: string) => {
    this.props.navigation.navigate('Details',{productId:id});
};

_renderItem = ({item}) => (

    <CardProduct
      id={item.id}
      title={item.title}
      onPressItem={this._onPressItem}
    />
  );

在 CardProduct 组件中：

_onPress = () => {
    this.props.onPressItem(this.props.id);
};

render() {
    const { id,title } = this.props;

    return (
      <Card style={{flex:1}}>
          <CardItem cardBody button onPress={this._onPress}>
          ...
    );
}

方法1我以前也是这样做的，但是我看了this guide。

Answer 1

react-native 平面列表中性能优化的一个步骤是为 renderItem 使用无状态功能组件。并且您应该始终为每个项目提供一个唯一的密钥。

Answer 2

简答：

你应该选择方法2。

解释：

在 method1 中，您在 CardItem's onPress 中使用箭头函数，因此每次 CardProduct 是 re-rendered onPress 的新引用是创建，这会强制 CardItem 为 re-render，即使所有其他道具都保持不变。在 方法 2 中，您将函数绑定到上下文，这不会强制 re-rendering CardItem。

顺便说一下，一般来说，避免在 render() 中使用箭头函数是个好主意。

优化 FlatList Items 性能的最佳方法

Best method to optimize performance of FlatList Items

react-native

react-native-flatlist

简答：

解释：