React Native + Redux 应用中 ListView 的性能表现

Question

我有一个 ListView，用于显示一些项目的列表。以前我使用React Native而没有Redux时，当我的基础数据发生变化时，我调用 setState() 修改数据，然后使用 dataSource = dataSource.cloneWithRows(itemsData);，这个方法效率很高：只有数据变化时才会重新渲染每一行（即我的 rowHasChanged() 对于该行返回true）。

但是，整个应用程序的设计相当临时而且不易维护，所以我决定尝试Redux。

现在，我的场景是“纯”的，也就是说，它仅依赖于传递的props，这些props通过 mapStateToProps() 生成。但问题在于，每当任何项发生更改时，整个 ListView 元素都会被重新创建，因此所有项都会重新渲染（甚至不会调用我的 rowHasChanged()）。这很令人沮丧，因为摆脱这种行为的唯一方法是再次使场景不纯净：添加状态，并在需要时更新它。

或者，还有其他选择吗？

- Dmitry Frank

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。

- damusnet

---

@Dmitry Frank 这个答案对你有帮助吗？ - Yaron Levi