Производительность ListView в приложении React Native + Redux

Question

У меня есть ListView, что, очевидно, отображает список некоторых элементов. Раньше я использовал React Native без Redux, поэтому, когда мои базовые данные менялись, я вызывал setState(), изменяя данные, затем dataSource = dataSource.cloneWithRows(itemsData);, и это было довольно показательно: каждая строка была повторно отображена, если только ее данные изменяются (т.е. если мой rowHasChanged()true для этой строки).

Но, общий дизайн приложения был довольно ad hoc и не очень хорошо ремонтируемый, поэтому я решил попробовать 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.