Closed
Description
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
- Review the documentation: https://facebook.github.io/react-native
Environment
React Native Environment Info:
System:
OS: macOS 10.14.1
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Memory: 1.78 GB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.2.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 19, 23, 25, 26, 27
Build Tools: 23.0.1, 23.0.3, 25.0.2, 26.0.2, 27.0.3, 28.0.3
System Images: android-23 | Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.1 => 16.6.1
react-native: 0.57.7 => 0.57.7
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-create-library: 3.1.2
react-native-git-upgrade: 0.2.7
Description
Using FlatList/SectionList, found FlatList.getItemLayout called too many times.
Even scroll a little distance FlatList will call getItemLayout for whole data, several times, perform bad.
#20467 is closed by bot.
Reproducible Demo
cd Destop && react-native init CrazyFlatList && cd CrazyFlatList && react-native run-ios// App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
const ItemHeight = 15
function _getLargeData() {
let largeData = []
for (let index = 0; index < 500; index++) {
largeData.push(index.toString())
}
return largeData
}
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<FlatList
data={_getLargeData()}
renderItem={({ item }) => <ItemView text={item} />}
keyExtractor={(item, index) => item}
getItemLayout={(data, index) => {
// eg. I can find 'getItemLayout 0' 47 times in render method
if (index == 0) {
console.log("getItemLayout " + index)
}
return {
index,
length: ItemHeight,
offset: ItemHeight * index,
}
}}
/>
</View>
);
}
}
class ItemView extends React.PureComponent {
render() {
return <Text style={styles.item}>{this.props.text}</Text>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
item: {
height: ItemHeight,
}
});