React Native 為何要新設計一個 ListView （FlatList ）？

相比原來的 ListView 它好在哪裡？

github commit 原地址：Better ListView - FlatList · facebook/react-native@a345748

Summary:
We really need a better list view - so here it is!

Main changes from existing `ListView`:

* Items are "virtualized" to limit memory - that is, items outside of the render window are unmounted and their memory is reclaimed. This means that instance state is not preserved when items scroll out of the render window.
* No `DataSource` - just a simple `data` prop of shape `Array&`. By default, they are expected to be of the shape `{key: string}` but a custom `rowExtractor` function can be provided for different shapes, e.g. graphql data where you want to map `id` to `key`. Note the underlying `VirtualizedList` is much more flexible.
* Fancy `scrollTo` functionality: `scrollToEnd`, `scrollToIndex`, and `scrollToItem` in addition to the normal `scrollToOffset`.
* Built-in pull to refresh support - set set the `onRefresh` and `refreshing` props.
* Rendering additional rows is usually done with low priority, after any interactions/animations complete, unless we"re about to run out of rendered content. This should help apps feel more responsive.
* Component props replace render functions, e.g. `ItemComponent: ReactClass&<{item: Item, index: number}&>` replaces `renderRow: (...) =&> React.Element&<*&>`
* Supports dynamic items automatically by using `onLayout`, or `getItemLayout` can be provided for a perf boost and smoother `scrollToIndex` and scroll bar behavior.
* Visibility callback replaced with more powerful viewability callback and works in vertical and horizontal mode on at least Android and iOS, but probably other platforms as well. Extra power comes from the `viewablePercentThreshold` that lets the client decide when an item should be considered viewable.

Demo:

https://www.facebook.com/groups/576288835853049/permalink/753923058089625/

Reviewed By: yungsters


最近一直被 ListView 性能問題困擾，終於看到點希望了......不請自答一下

-------------------------分隔線

FlatList 主要是解決 ListView 性能問題，數據量大時 ListView 性能很差，佔用內存持續增加；這個問題一直被詬病，參見這兩篇：

• [ListView] renders all rows? · Issue #499 · facebook/react-native
• ListView性能問題 · Issue #7 · soliury/noder-react-native

我看攜程和去哪兒等有能力的公司都封裝了自己的高性能 ListView，以下兩篇文章有提及：

• 攜程是如何做React Native優化的
• Qunar React Native 大規模應用實踐 Sina Visitor System

之前也有一些開發者自己優化 ListView，比如：

• sghiassy/react-native-sglistview
• 39otrebla/react-native-enhanced-listview

坑爹的是這類組件用到的最核心的方法是：OnChangeVisibleRows，React Native Android 版遲遲沒有實現這個方法......

也有人試圖通過回收復用 View 提高性能：droidwolf/react-native-RealRecyclerView

看了以上種種思路，都沒有發現真正解決大數據 ListView 的好辦法......只到看到這篇文章React Native 的 ListView 性能問題已解決，才看到了一絲曙光

引用兩條 FlatList 性能好些的原因：

FlatList 之所以節約內存、渲染快，是因為它只將用戶看到的(和即將看到的)部分真正渲染出來了。而用戶看不到的地方，渲染的只是空白元素。渲染空白元素相比渲染真正的列表元素需要內存和計算量會大大減少，這就是性能好的原因。

FlatList 將頁面分為 4 部分。初始化部分/上方空白部分/展現部分/下方空白部分。初始化部分，在每次都會渲染；當用戶滾動時，根據需求動態的調整(上下)空白部分的高度，並將視窗中的列表元素正確渲染出來。

性能比ListView好，沒了

使用官方的 ListView 創建帶圖片的無限下拉列表，下拉到 500 條以後簡直卡的不行(MX5 實測)，1000 條以後低端機型甚至出現過奔潰的情況。

FlatList 馬上就會被正式支持，等到 FlatList 支持固定頭部(sticky header)，那麼官方的 ListView 也就可以退休了。

Things should be pretty stable now. I have a diff up internally to move these out of Experimental and the examples should be live in the UIExplorer. Main thing left is to add sticky header support then I think we can officialy mark ListView deprecated.

所以說設計 FlatList 就是為了代替 ListView。