React Native - Force ListView在数据未更改时重新呈现

Bri*_*ean 10 listview reactjs react-native

是否可以强制ListView重新渲染,即使dataSource中的数据没有更改?我在我的应用程序的选项卡栏中有一个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}
  />
}
Run Code Online (Sandbox Code Playgroud)

我试着玩这些rowHasChanged争论,但这没有帮助.任何帮助将非常感激

gre*_*gre 34

因此,根据我的理解,您的用例是因为value更改而重新呈现ListView的所有行.我不知道是什么value,由你决定,但我会value用来解释我的答案:

有几种方法可以解决这个问题.各有利弊:

  • 简单的方法:只是<ListView key={value} ... />!! 它告诉React ListView需要在值更改时重新呈现(它将被卸载,重新安装).
  • "hacky方式".替换为新的DataSource. 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 })).

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

  • 它可以很好地扩展到更多重新渲染的条件(其他values)
  • 可能会发生只有部分行实际应该重新渲染,在这种情况下,您不应该重新渲染所有行以获得更好的性能.

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

ListView.DataSource中rowHasChanged的确切输入是什么