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:
parent
5d79b26011
commit
2161f92aaf
|
@ -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`.
|
||||
*/
|
||||
|
|
|
@ -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.
|
||||
|
|
Loading…
Reference in New Issue