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

Question

我有一个ListView,显然,它呈现了一些项目的列表.之前,我用没有终极版阵营本土,所以当我的底层数据的变化,我打电话setState(),修改数据,那么dataSource = dataSource.cloneWithRows(itemsData);,这是很高性能:如果只有它的数据发生变化的每一行重新呈现(即,如果我rowHasChanged()回来true了那一排).

但是,整体应用程序设计非常特别且维护得不够好,所以我决定尝试使用Redux.

现在,我的场景是"纯粹的",也就是说,它完全取决于传递的道具,这些道具是通过生成的mapStateToProps().但问题是,每当任何项目发生变化时,ListView都会重新创建整个元素,因此,所有项目都会被重新渲染(rowHasChanged()甚至不会调用我的项目).这是非常令人沮丧的,因为摆脱这种行为的唯一方法是使场景再次非纯:添加状态,并在需要时以某种方式更新它.

或者,还有什么其他选择？

Answer 1

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

以下是使用 ListView.DataSource 和取自本文的不可变数据集的示例：

// 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()来过滤数据。通过使用这种技术，并仅传递相关的 props，您可能甚至不需要使用shouldComponentUpdate.