Блог

Главная - Вопросы по программированию - Реагировать игнорировать изменения реквизита в shouldComponentUpdate()

Реагировать игнорировать изменения реквизита в shouldComponentUpdate()

#javascript #reactjs #performance #react-native

#javascript #reactjs #Производительность #реагировать-родной

Вопрос:

Иногда использование PureComponent или Memo для элементов плоского списка может быть полезным для оптимизации производительности плоского списка, но иногда это также может вызвать дополнительные проблемы с производительностью. Это зависит от реквизитов, которые передаются элементу списка. Если в элемент списка передается слишком много реквизитов, это может только ухудшить производительность.

В моем случае основной компонент списка имеет много свойств, поэтому мне нужно реализовать собственную функцию shouldComponentUpdate. Поскольку мои реквизиты не будут вызывать повторную визуализацию (обновление), мне нужно игнорировать их в shouldComponentUpdate (но не в состоянии).

Я пробовал что-то вроде этого:

  state = {
    count: 0,
    player: {
       name: "Nick"
    }
 } 


 shouldComponentUpdate(nextProps, nextState) {
    return nextState !== this.state;
 }

Но не работает, так как nextState ссылается на ту же память, что и this.state (я думаю).

Есть идеи, как это сделать?

(Делаю это, потому что я следую этим советам, чтобы повысить производительность FlatList). Это мой плоский список:

  keyExtractor = ({ id }) => id; // each element in the data array has an unique uuid.

 <FlatList
    data={data}
    getItemLayout={this.getItemLayout}
    keyExtractor={this.keyExtractor}
    listKey={listKey}
    legacyImplementation={false}
    numColumns={1}
    renderItem={this.renderItem}
    initialNumToRender={10}
    windowSize={5}
    maxToRenderPerBatch={5}
    updateCellsBatchingPeriod={50}
    removeClippedSubviews={false}
    ListFooterComponent={this.renderFooter}
    ListEmptyComponent={ListEmptyComponent}
    onEndReached={onEndReached}
    onEndReachedThreshold={0.15}
  />

Спасибо.

Комментарии:

1. Это звучит так, так, так, так, так, так неправильно. Вы ошибочно пришли к «решению» своей проблемы, не могли бы вы описать, в чем заключается ваша реальная проблема (производительность?), И тогда вы получите лучший ответ

2. Посмотрите на пункт 8 codingislove.com/optimize-react-native-flatlist-performance Я следую этим советам для своего плоского списка, и единственный, которому я не подчиняюсь, — это это. Например, у меня есть тема свойства (из react-native-paper): {colors: ….}, которая является действительно длинным объектом, и я думаю, что расширение React . PureComponent с неглубоким сравнением может повлиять на производительность.

3. Да, пункт 8 действителен — не используйте PureComponent или memo , когда у вас много реквизита. Но вы перевели то make shouldComponentUpdate return false for everything except state changes , что является просто диким.

4. Но если shouldComponentUpdate вызывается только после первого рендеринга, почему было бы не игнорировать реквизит?

5. Это просто требует отладки — удалите свой сложный компонент и замените его простым и посмотрите, быстро ли он отображается. Затем постепенно добавляйте фрагменты обратно и смотрите, когда он начнет замедляться.