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 коммит произвёл Facebook Github Bot
Родитель 5d79b26011
Коммит 2161f92aaf
2 изменённых файлов: 5 добавлений и 0 удалений

Просмотреть файл

@ -107,6 +107,7 @@ type OptionalProps<ItemT> = {
* {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} * {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 * Remember to include separator length (height or width) in your offset calculation if you
* specify `ItemSeparatorComponent`. * specify `ItemSeparatorComponent`.
*/ */

Просмотреть файл

@ -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, 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. 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 ### 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. 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.