React Native + Redux应用程序中ListView的性能

Question

我有一个ListView，显然，它显示了一些项目的列表。之前，我在没有Redux的情况下使用React Native，所以当我的底层数据发生变化时，我调用了setState()，修改了数据，然后是dataSource = dataSource.cloneWithRows(itemsData);，它的性能非常好：如果只有数据发生变化，每行都会被重新渲染rowHasChanged()返回该行的true）。

但是，整体应用程序设计相当特别，并且不能很好地维护，所以我决定尝试Redux。

现在，我的场景是“纯粹的”，也就是说，它完全依赖于通过道具生成的mapStateToProps()。但问题是，只要任何项目发生变化，整个ListView元素都会重新创建，因此所有项目都会重新渲染（我的rowHasChanged()甚至没有被调用）。这很令人沮丧，因为消除这种行为的唯一方法是让场景再次变得不纯：添加状态，并在需要时以某种方式更新它。

或者，有什么其他的选择？

Answer 1

您可以通过在shouldComponentUpdate中进行自己的检查来防止不必要的重新渲染。此外，为了加速比较，只需进行浅层比较，尝试使用类似Immutable.js的库来使数据不可变。

下面是使用ListView.DataSource和this article采取一个不变的数据集的例子：

// Use immutable.is() to achieve efficient change detection. 
const ds = new ListView.DataSource({ 
    rowHasChanged: (r1, r2) => !immutable.is(r1, r2) 
}) 
// Shallow convert to a JS array, leaving immutable row data. 
this.state = { 
    dataSource: ds.cloneWithRows(countries.toArray()) 
} 

在redux，连接您的组件时，请务必使用mapStateToProps()筛选资料。通过使用这种技术，并通过相关的道具，你可能甚至不必使用shouldComponentUpdate。