避免在React Native中重新渲染SectionList行组件

时间:2018-09-23 17:47:44

标签: react-native react-native-sectionlist

我在优化部分上工作,发现,节列表正在渲染子组件,即使它们没有变化。在研究中,我发现您必须传递一个唯一标识一个部分的密钥,以避免重新呈现子组件。

我确实将唯一键传递给了子组件,但是甚至没有重新呈现它。

更新:下面的代码

我正在使用react-redux进行状态管理。

渲染:

<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.

最初,Reducer中没有X / Y / Z的任何值,但是如果更新值X,子组件(即YComponentZComponent)也将重新呈现

关于如何避免这种不必要的渲染的任何建议。

0 个答案:

没有答案