Hiệu suất của ListView trong ứng dụng React Native + Redux

Question

Tôi có một ListView, trong đó, hiển nhiên, hiển thị danh sách một số mục. Trước đây, tôi đã sử dụng React Native mà không có Redux, vì vậy khi dữ liệu cơ bản của tôi thay đổi, tôi đã gọi số setState(), sửa đổi dữ liệu, sau đó dataSource = dataSource.cloneWithRows(itemsData); và hoàn toàn hoạt động: mỗi hàng được hiển thị lại nếu chỉ thay đổi dữ liệu (ví dụ: rowHasChanged() trả lại true cho hàng đó).

Tuy nhiên, thiết kế ứng dụng tổng thể khá đặc biệt và không được bảo trì tốt, vì vậy tôi quyết định dùng thử Redux.

Bây giờ, cảnh của tôi là "thuần túy", nghĩa là, nó chỉ phụ thuộc vào đạo cụ được truyền, được tạo ra bằng phương tiện mapStateToProps(). Nhưng vấn đề là bất cứ khi nào bất kỳ mục nào thay đổi, toàn bộ phần tử ListView được tạo lại, do đó, tất cả các mục được hiển thị lại (số rowHasChanged() của tôi thậm chí không được gọi). Điều này là khá bực bội, vì cách duy nhất để thoát khỏi hành vi này là làm cho cảnh không thuần khiết một lần nữa: thêm trạng thái, và bằng cách nào đó cập nhật nó khi cần thiết.

Hoặc các lựa chọn thay thế khác là gì?

Answer 1

Bạn có thể ngăn không cho hiển thị lại không cần thiết bằng cách thực hiện đăng ký của riêng mình shouldComponentUpdate. Ngoài ra, để tăng tốc độ so sánh bằng cách chỉ so sánh nông cạn, hãy thử làm cho dữ liệu của bạn không thay đổi được bằng một thư viện như Immutable.js.

Dưới đây là một ví dụ sử dụng ListView.DataSource và một bộ dữ liệu bất biến lấy từ 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()) 
} 

Trong redux, khi kết nối thành phần của bạn, hãy chắc chắn để sử dụng mapStateToProps() để lọc dữ liệu của bạn. Bằng cách sử dụng kỹ thuật này và chỉ truyền các đạo cụ có liên quan, bạn có thể sẽ không phải sử dụng shouldComponentUpdate.