React Native + Redux应用程序中ListView的性能 [英] Performance of ListView in React Native + Redux application

问题描述

我有一个 ListView ， ，显然会渲染一些项目的列表.之前，我使用的是没有Redux的React Native，所以当我的基础数据发生变化时，我先调用setState()，先修改数据，然后再修改dataSource = dataSource.cloneWithRows(itemsData);，并且性能相当好:如果仅更改了数据，则重新渲染每一行(即，如果我的rowHasChanged()返回该行的true).

I have a ListView, which, obviously, renders list of some items. Before, I was using React Native without Redux, so when my underlying data changes, I was calling setState(), modifying the data, then dataSource = dataSource.cloneWithRows(itemsData);, and it was quite performant: each row was re-rendered if only its data changes (i.e. if my rowHasChanged() returned true for that row).

但是，整个应用程序设计是临时的，并且维护性也不佳，所以我决定尝试Redux.

But, the overall application design was quite ad-hoc and not very well maintainable, so I decided to try Redux.

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

Now, my scene is "pure", that is, it depends solely on the passed props, which are generated by means of mapStateToProps(). But the problem is that whenever any item changes, the whole ListView element is recreated, therefore, all items are re-rendered (my rowHasChanged() is not even called). This is quite frustrating, since the only way to get rid of this behaviour is to make the scene non-pure again: add the state, and somehow update it when needed.

或者，还有其他选择吗?

Or, what are other alternatives?

推荐答案

您可以通过在 Immutable.js这样的库使数据不可变.

You can prevent unnecessary re-render by making your own check in shouldComponentUpdate. Also, to speed up comparison by making a shallow compare only, try making your data immutable with a library like Immutable.js.

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

Here is an example using ListView.DataSource and an immutable dataset taken from 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.

In redux, when connecting your component, make sure to use mapStateToProps() to filter your data. By using this technique, and passing the relevant props only, you probably won't even have to use shouldComponentUpdate.

这篇关于React Native + Redux应用程序中ListView的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！