SectionList перерисовывает все неожиданно - PullRequest
Новая
       25

SectionList перерисовывает все неожиданно

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

Я новичок в React-Native, сейчас работаю над проектом, который отображает фотографии и связанную с ними информацию. В проекте используется стандарт SectionList (RN 0,55).

У меня проблема в том, что каждый раз, когда я добавляю фотографию, все подкомпоненты в списке будут перерисовываться. И я заметил значительное замедление, когда список вырос до 50 с чем-то.

У меня есть следующие настройки:

  1. У меня есть хранилище с резервированием, которое содержит Data (в основном оболочку для информации о фотографиях), каждый раз, когда пользователь выполняет какое-либо действие, Data будет копироваться, изменяться, а затем переназначаться обратно в хранилище с резервированием.

  2. Тогда у меня есть класс, подобный следующему, для рендеринга SectionList 

class PhotoList extends PureComponent {
    render() {
       <SectionList
            sections={deriveData(this.props.data)}
            extraData={this.state}
            renderItem={this.onRenderItem} 
       >
    }

    onRenderItem(item) {
         return <View>
               // two nested level components to hold information
               </View>
    }

    driveData(data) {
       // do a lot of data transformation and calculate derived value
       return derivedData;
    }
}
// data is redux connected

Мое основное замешательство заключается в том, что когда SectionList принимает section в моем случае, данные (в целом) уже являются новой копией и изменяются (поскольку добавляется новая фотография), поэтому это вызывает SectionList чтобы сделать все заново?

Я хочу SectionList только для дополнительной визуализации только что добавленной фотографии, какие-либо предложения?

1 Ответ

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

Можете ли вы изменить данные («преобразование данных и вычислить производное значение») во время действия и обновить их в избыточных «данных».Затем измените, как показано ниже. 

class PhotoList extends PureComponent {
    render() {
       <SectionList
            sections={this.props.data} // Directly call data
            extraData={this.props.data}
            renderItem={this.onRenderItem} 
       >
    }

    onRenderItem(item) {
         return <View>
               // two nested level components to hold information
               </View>
    }

}

Если вы используете redux, то вам придется обрабатывать обновление данных на redux.Тогда только результат получится.

...