Реагирует на сбой собственного приложения при загрузке 200+ данных в плоский список - PullRequest
Новая
       3

Реагирует на сбой собственного приложения при загрузке 200+ данных в плоский список

1 голос
/ 15 июня 2019

У меня есть список данных, который идет с бесконечной прокруткой в ​​flatlist.Количество постов 200+.Когда я запускаю приложение на младших устройствах, оно падает.

Я попытался добавить реквизиты removeClippedSubviews в true, но это не очень помогает.

Также я проверил память, используемую приложением вфон.Это продолжает увеличиваться.Как управлять этой памятью? 

          <FlatList
            removeClippedSubviews={true}
            maxToRenderPerBatch={15}
            initialNumToRender={5}
            refreshing={this.state.refresh}
            bounces={false}
            onRefresh={()=>this.refreshAllTweets()}
            data={tweets}
            ref={(c) => {this.flatList = c;}}
            keyExtractor={(item, index) => index.toString()}
            onEndReached={()=>this.endReached()}
            onEndReachedThreshold={0.1}
            renderItem={({item}) => <TweetItem reloadComponent={()=>this.reload()} name={this.state.name}  onPress={()=>this.goToDetail(item.id)} onImagePress={()=>this.toggleModal(item.id)} onCommentPress={()=>this.showComments(item.id)} tweet={item}/>}
            />

Так выглядит мой код плоского списка

1 Ответ

0 голосов
/ 16 июня 2019

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

Кроме того, обработчик события memoize также поможет минимизировать ненужный повторный рендеринг, который раздувал вашу память.Вы можете использовать библиотеку lodash для достижения этой цели. 

yarn add lodash

Вот эффективный способ визуализации FlatList. 

import { memoize, curry } from "lodash/fp";

class YourComponent {
  assignRef = (c) => {
    this.flatList = c;
  }

  onTweetPress = memoize(curry((id, _ev) => {
    this.goToDetail(item.id)
  }));

  onImagePress = memoize(curry((id, _ev) => {
    this.toggleModal(id)
  }));

  onImagePress = memoize(curry((id, _ev) => {
    this.toggleModal(id)
  }));

  onCommentPress = memoize(curry((id, _ev) => {
    this.showComments(id)
  }));

  renderItem = ({ item }) => (
    <TweetItem
      reloadComponent={this.reload}
      name={this.state.name}
      onPress={this.onTweetPress(item.id)}
      onImagePress={this.onImagePress(item.id)}
      onCommentPress={this.onCommentPress(item.id)}
      tweet={item}
    />
  )

  keyExtractor = (item, index) => (index.toString())

  render() {
      return (
      <FlatList
        removeClippedSubviews={true}
        maxToRenderPerBatch={15}
        initialNumToRender={5}
        refreshing={this.state.refresh}
        bounces={false}
        onRefresh={this.refreshAllTweets}
        data={tweets}
        ref={this.assignRef}
        keyExtractor={this.keyExtractor}
        onEndReached={this.endReached}
        onEndReachedThreshold={0.1}
        renderItem={this.renderItem}
      />
    );
  }
}
...