小编典典

React Native-数据未更改时强制重新渲染ListView

reactjs

即使dataSource中的数据未更改,是否也可以强制重新渲染ListView?我的应用程序中的选项卡栏中有一个ListView,我希望每次选择该选项卡时都重新绘制它,而不管数据是相同还是已更改。

this.state = {
  data: props.data,
  dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
}

componentWillMount() {
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(nextProps.data)
  })
}

render() {
  <ListView
   dataSource={this.state.data}
   renderRow={this._renderRow}
  />
}

我尝试使用rowHasChanged参数,但这没有帮助。任何帮助将非常感激


阅读 405

收藏
2020-07-22

共1个答案

小编典典

因此,据我所知,您的用例是由于value更改而重新呈现ListView的所有行。我不知道是什么value,要由您确定,但是我会用它value来解释我的答案:

有几种解决方法。每个都有优点和缺点:

  • 简单的方法: 只是<ListView key={value} ... />!它告诉React,值更改时,ListView需要重新渲染(它将被卸载,重新安装)。
  • “骇人听闻的方式”。替换为新的数据源。 this.setState({ dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }).cloneWithData(this.props.data) });
  • (imo)最佳实践方式:在数据中,value正确合并并实现rowHasChanged。例如:(r1, r2) => r1.value !== r2.value && r1.data !== r2.data(<-这只是表示数据的一种可能方式,您必须选择格式,我只是假设您确实使用克隆了dataSource nextProps.data.map(data => ({ data, value }))。

对我来说,第三个也是最后一个解决方案是最好的,因为:

  • 它可以很好地缩放以适应更多的重新渲染条件(其他value
  • 可能发生的情况是实际上只应重新渲染部分行,并且在这种情况下,您不应重新渲染所有行以获得更好的性能。
2020-07-22