status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Libraries/Lists/FlatList.js
View File

@ -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`.
*/ */

4
docs/Performance.md
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, 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.