Add pertinent info for fresh flatlisters

Summary:
I just worked with a fellow dev who was switching to flatlist and ended up pretty surprised at the performance drop.  The measurement had an exponential bridge saturation, causing flatlist to lose to a scrollview!

We knew something was up, but a little note in the docs would have helped.
Closes https://github.com/facebook/react-native/pull/15400

Differential Revision: D5579483

Pulled By: sahrens

fbshipit-source-id: 2cc2488b6332db4f4d644c67f180088d3a5874a8
This commit is contained in:
Gant Laborde 2017-08-07 17:54:43 -07:00 committed by Facebook Github Bot
parent 5d79b26011
commit 2161f92aaf
2 changed files with 5 additions and 0 deletions

View File

@ -107,6 +107,7 @@ type OptionalProps<ItemT> = {
* {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
* )}
*
* Adding `getItemLayout` can be a great performance boost for lists of several hundred items.
* Remember to include separator length (height or width) in your offset calculation if you
* specify `ItemSeparatorComponent`.
*/

View File

@ -91,6 +91,10 @@ Use the new [`FlatList`](docs/flatlist.html) or [`SectionList`](docs/sectionlist
Besides simplifying the API, the new list components also have significant performance enhancements,
the main one being nearly constant memory usage for any number of rows.
If your [`FlatList`](docs/flatlist.html) is rendering slow, be sure that you've implemented
[`getItemLayout`](https://facebook.github.io/react-native/docs/flatlist.html#getitemlayout) to
optimize rendering speed by skipping measurement of the rendered items.
### JS FPS plunges when re-rendering a view that hardly changes
If you are using a ListView, you must provide a `rowHasChanged` function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would be as simple as a reference equality check.