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

小编典典

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参数，但这没有帮助。任何帮助将非常感激

阅读 408

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