即使数据源中的数据没有改变,是否可以强制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
参数,但这没有帮助。任何帮助将不胜感激
最佳答案
因此,据我了解,您的用例是重新渲染 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
关于listview - React Native - 当数据未更改时强制 ListView 重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38000667/