React Native-数据未更改时强制重新渲染ListView [英] React Native - Force ListView Re-render when data has not changed

问题描述

即使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参数，但这没有帮助.任何帮助将不胜感激

解决方案

因此，据我所知，您的用例是由于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(<-这只是表示数据的一种可能方式，您必须选择格式，我只是假设您确实使用nextProps.data.map(data => ({ data, value })克隆了dataSource).

---

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

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

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

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

Is it possible to force a ListView to re-render, even if the data in the dataSource has not changed? I have a ListView within a tab bar in my app and I want it to redraw every time that tab is selected, regardless of if the data is the same or has changed.

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}
  />
}

I tried playing with the rowHasChanged arguments but that did not help. Any help would be much appreciated

解决方案

So your use-case, as I understand it, is to re-render all rows of ListView because of value changes. I don't know what value is, up to you to determine it, but I will use value to explain my answer:

There are a few ways to solve this. each have pros and cons:

• easy way: just <ListView key={value} ... /> !! It tells React that ListView needs to get re-render when value changes (it will be unmounted, remounted).
• "hacky way". replace with a new DataSource. this.setState({ dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }).cloneWithData(this.props.data) });
• the (imo) best practice way: in the data, incorporate value and implements rowHasChanged properly. For instance: (r1, r2) => r1.value !== r2.value && r1.data !== r2.data (<- this is JUST a possible way to represent the data, you have to chose your format, I just assumed you did clone dataSource with nextProps.data.map(data => ({ data, value })).

---

to me, the third and last solution is the best because:

• it scales nicely to more condition of re-rendering (other values)
• it can happen that only part of your rows actually should get re-rendered, and, in that case, you shouldn't re-render all rows for better performance.

here is an other answer I gave on that subject:

What are the exact inputs to rowHasChanged in ListView.DataSource

这篇关于React Native-数据未更改时强制重新渲染ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！