Cross‑Platform ListView Performance Optimization in React Native and Weex

Speaker Jiang Zhu introduces himself and the topic “Cross‑Platform ListView Performance Optimization”. He has been working on iOS and React Native at Qunar since 2011.

Qunar’s journey with React Native (RN) started in March 2016 with version 0.22, gradually replacing hybrid pages. By now about 18 hotel‑related pages use RN.

How RN implements ListView

RN’s ListView is built on RCTScrollView , using a data‑source pattern similar to iOS UIKit. It inherits features from RCTView and manages sub‑views via updateClippedSubviews when removeClippedSubviews is true.

ListView adds two important props: initialListSize (items on first screen) and pageSize (items loaded per pagination), and supports section headers, footers, and onScroll callbacks.

Compared with native UITableView , RN’s ListView lacks true cell reuse; it only caches views in an array ( mViews ) without recycling.

Proposed Solutions

1. JavaScript‑based cell reuse: listen to onScroll and move off‑screen cells to reusable positions. This approach suffers from high JS‑to‑native bridge traffic and cannot guarantee 16 ms frame budget.

2. Bridge a native UITableView into RN: create VirtualView objects that conform to RCTComponent , map them to real native views, and expose the full UITableViewDataSource API to JavaScript.

The bridge approach reduces memory usage and offers better performance on iOS, but requires extensive mapping for each cell type and is less portable to Android.

Weex ListView

Weex implements ListView natively on both iOS and Android. On iOS it uses a single reuseIdentifier without true reuse; on Android it leverages RecyclerView with ViewHolder patterns, achieving proper cell recycling via getItemViewType and onBindViewHolder .

Conclusion

Native‑bridged UITableView gives the best memory footprint on iOS, while Weex’s Android implementation provides the most efficient reuse. RN‑based JavaScript solutions are portable but incur higher bridge overhead.

Q&A session covers version management, testing strategies, and the challenges of mixing native and RN codebases.