Избегайте повторного рендеринга компонентов строк SectionList в реагировать нативно - PullRequest
Новая
       28

Избегайте повторного рендеринга компонентов строк SectionList в реагировать нативно

0 голосов
/ 23 сентября 2018

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

Я передал уникальный ключ дочерним компонентам, но даже после его повторной визуализации.

ОБНОВЛЕНИЕ: код ниже

Я использую реакт-редукс для управления состоянием.

рендер: 

<SectionList
            renderItem={this.renderItem}
            renderSectionHeader={this.renderSectionHeader}
            sections={this.getSectionListData()}
            keyExtractor={(item, index) => item + index}
        />

renderItem: 

if (conditionX)
 return <XComponent data={this.getDataX()} action={this.doSomethingToX} />
else if (conditionY)
 return <YComponent data={this.getDataY()} action={this.doSomethingToY} />
else if (conditionZ)
 return <ZComponent data={this.getDataZ()} action={this.doSomethingToZ} />
else 
return <View/>

getDataX = () => return this.props.reduxState.dataX;

getDataY = () => return this.props.reduxState.dataY;

getDataZ = () => return this.props.reduxState.dataZ;

doSomethingToX/Y/Z : Updates the reducer values X/Y/Z respectively.

Изначально у меня нет значений X / Y / Z в редукторе, но если я обновлю значение X, дочерний компонент (т. Е. YComponent, ZComponent) также будет перерисован.

Любое предложение о том, как избежать этого ненужного рендеринга.

...