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:
parent
3c4057cbb4
commit
ebcf5fd241
|
@ -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});
|
||||||
|
|
Loading…
Reference in New Issue