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

Question

即使数据源中的数据没有改变，是否可以强制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 参数，但这没有帮助。任何帮助将不胜感激

Answer 1

因此，据我了解，您的用例是重新渲染 ListView 的所有行，因为 value变化。我不知道什么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 (<- 这只是表示数据的一种可能方式，您必须选择格式，我只是假设您使用 nextProps.data.map(data => ({ data, value }) 克隆了数据源)。

<小时/>

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

• 它可以很好地适应更多的重新渲染条件(其他 value s)
• 实际上可能只有部分行需要重新渲染，在这种情况下，您不应该重新渲染所有行以获得更好的性能。

这是我就该主题给出的另一个答案:

What are the exact inputs to rowHasChanged in ListView.DataSource