Лучший способ оптимизировать производительность FlatList Items - PullRequest
Новая
       5

Лучший способ оптимизировать производительность FlatList Items

0 голосов
/ 07 мая 2019

Это простой FlatList: 

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

Я хочу создать список элементов и перейти на страницу сведений по элементам onPress.

Может подскажите, какой метод лучше?

Метод 1:

Вставить навигацию к странице сведений в дочернем компоненте (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})}>
          ...
    );
}

Метод 2:

Вставить навигацию к странице сведений в текущем компоненте (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, но прочитал это руководство .

Ответы [ 2 ]

1 голос
/ 07 мая 2019

Краткий ответ:

Вы должны пойти на метод2.

Пояснение:

В method1 вы используете функцию стрелки в CardItem's onPress, поэтому каждый раз, когда CardProduct перерисовывается, создается новая ссылка onPress, которая заставляет CardItem перерисовывать, даже если все остальные реквизиты остались прежними. В методе 2 вы привязываете функцию к контексту, что не будет вызывать повторный рендеринг CardItem.

Кстати, в общем, неплохо бы запретить использование функций стрелок в render().

0 голосов
/ 07 мая 2019

Одним из шагов для оптимизации производительности в реактивном собственном плоском списке является использование функционального компонента без сохранения состояния для renderItem.и вы всегда должны давать каждому предмету уникальный ключ.

...