Fix initial-render triggering a render of all items.

Summary:
When rendering a large list without a getItemLayout (ie SectionList, where it's hard to compute), it freaks out and attempt to render them all, starving the rendering/layout engine from computing the size (and more accurately figurnge out how few it actually should render.)

Before this change, with <FlatList maxToRenderPerBatch={5} data={objectOfLengthN} />, I essentially saw it doing:
```
{first: 0, last: 0}
{first: 0, last: 5}
{first: 0, last: 10}
....
{first: 0, last: N}
```
(no more hiPri renders since all elements have been rendered)
(actually renders and lays out all N objects, and computes their sizes)
(realizes that it doesn't need to show all N for my current screen size and row size)
```{first: 0, last: 55}```

After this change, that whole first part where it keeps incrementing `last` to try to "keep up with the scrolling" disappears.
Closes https://github.com/facebook/react-native/pull/14563

Differential Revision: D5278796

Pulled By: sahrens

fbshipit-source-id: 5db117b40909ec4bc92fba9b5556c6a2add046ac
This commit is contained in:
Mike Lambert 2017-06-19 15:55:15 -07:00 committed by Facebook Github Bot
parent 3c4057cbb4
commit ebcf5fd241
1 changed files with 6 additions and 1 deletions

View File

@ -972,7 +972,12 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
(velocity < -2 && distTop < scrollingThreshold) || (velocity < -2 && distTop < scrollingThreshold) ||
(velocity > 2 && distBottom < scrollingThreshold); (velocity > 2 && distBottom < scrollingThreshold);
} }
if (hiPri) { // Only trigger high-priority updates if we've actually rendered cells,
// and with that size estimate, accurately compute how many cells we should render.
// Otherwise, it would just render as many cells as it can (of zero dimension),
// each time through attempting to render more (limited by maxToRenderPerBatch),
// starving the renderer from actually laying out the objects and computing _averageCellLength.
if (hiPri && this._averageCellLength) {
// Don't worry about interactions when scrolling quickly; focus on filling content as fast // Don't worry about interactions when scrolling quickly; focus on filling content as fast
// as possible. // as possible.
this._updateCellsToRenderBatcher.dispose({abort: true}); this._updateCellsToRenderBatcher.dispose({abort: true});