listview - ListView 在 React Native + Redux 应用中的表现

Question

我有一个 ListView ，显然，它呈现了一些项目的列表。之前，我使用的是没有 Redux 的 React Native，所以当我的底层数据发生变化时，我调用 setState() ，修改数据，然后dataSource = dataSource.cloneWithRows(itemsData); ，而且性能非常好:如果每行的数据发生变化(即，如果我的 rowHasChanged() 为该行返回 true)，就会重新渲染每一行。

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

现在，我的场景是“纯”的，也就是说，它完全依赖于通过 mapStateToProps() 生成的 Prop 。 .但问题是，每当任何项目发生变化时，整个 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()过滤您的数据。通过使用这种技术，并且只传递相关的 props，你可能甚至不必使用 shouldComponentUpdate .