Performance Optimization Practices for React Native ListView in Qunar's QRN

Qunar has deployed React Native (RN) extensively and built a customized solution called Qunar React Native (QRN) that separates public and business packages, re‑encapsulates components and APIs, and adds various development‑efficiency plugins.

For long lists on mobile devices, first‑screen rendering speed and memory reclamation are critical; the default RN ListView renders only visible items but does not truly recycle nodes, keeping references in a virtual tree.

Performance evaluation of RN ListView shows smooth scrolling at 55‑60 fps on iPhone 5S, but memory usage grows rapidly with list length and position‑jumping suffers because the layout system must know the height of every intermediate row.

To address these issues, QRN ListView replaces RN's element‑removal approach with React's virtual‑DOM diff mechanism, using key attributes to enable true element reuse.

The article explains React's list rendering: each item must have a unique key, and during diff React can destroy, create, or update items based on key changes, allowing efficient reuse of rows.

QRN ListView performance under the same test conditions yields 30‑40 fps due to the time spent in virtual‑tree diff, but memory consumption remains stable, while position‑jumping limitations persist.

For fixed‑height row scenarios, QRN InfiniteListView further optimizes by rendering multiple rows simultaneously and reusing them, achieving 55‑60 fps, stable memory growth, and accurate position jumps because row heights are known.

Developers can specify row height via a function, for example: (rowData, rowIndex) => number

In conclusion, QRN InfiniteListView best satisfies Qunar's performance requirements for specific use‑cases, illustrating a strategy of targeted optimization when a universal solution is unattainable, with ongoing work to improve list components.