Improved overall performance by remove FlatList extraData and adding keys

This commit is contained in:
Arnaud Vergnet 2020-04-04 21:36:58 +02:00
parent ab554cae94
commit 8723765e43
12 changed files with 48 additions and 69 deletions

View file

@ -172,6 +172,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
{/*$FlowFixMe*/} {/*$FlowFixMe*/}
<SectionList <SectionList
sections={dataset} sections={dataset}
extraData={this.props.updateData}
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
refreshing={this.state.refreshing} refreshing={this.state.refreshing}

View file

@ -19,7 +19,6 @@ type Props = {
}; };
type State = { type State = {
active: string,
isLoggedIn: boolean, isLoggedIn: boolean,
dialogVisible: boolean, dialogVisible: boolean,
}; };
@ -156,7 +155,6 @@ class SideBar extends React.PureComponent<Props, State> {
this.colors = props.theme.colors; this.colors = props.theme.colors;
ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value)); ConnectionManager.getInstance().addLoginStateListener((value) => this.onLoginStateChange(value));
this.state = { this.state = {
active: 'Home',
isLoggedIn: ConnectionManager.getInstance().isLoggedIn(), isLoggedIn: ConnectionManager.getInstance().isLoggedIn(),
dialogVisible: false, dialogVisible: false,
}; };
@ -238,9 +236,10 @@ class SideBar extends React.PureComponent<Props, State> {
style={styles.drawerCover} style={styles.drawerCover}
/> />
</TouchableRipple> </TouchableRipple>
{/*$FlowFixMe*/}
<FlatList <FlatList
data={this.dataSet} data={this.dataSet}
extraData={this.state} extraData={this.state.isLoggedIn}
keyExtractor={this.listKeyExtractor} keyExtractor={this.listKeyExtractor}
renderItem={this.getRenderItem} renderItem={this.getRenderItem}
/> />

View file

@ -244,9 +244,7 @@ class AboutScreen extends React.Component<Props, State> {
<Card.Content> <Card.Content>
<FlatList <FlatList
data={this.appData} data={this.appData}
extraData={this.state}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
listKey={"app"}
renderItem={this.getCardItem} renderItem={this.getCardItem}
/> />
</Card.Content> </Card.Content>
@ -269,17 +267,15 @@ class AboutScreen extends React.Component<Props, State> {
<Title>{i18n.t('aboutScreen.author')}</Title> <Title>{i18n.t('aboutScreen.author')}</Title>
<FlatList <FlatList
data={this.authorData} data={this.authorData}
extraData={this.state}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
listKey={"team1"} listKey={"1"}
renderItem={this.getCardItem} renderItem={this.getCardItem}
/> />
<Title>{i18n.t('aboutScreen.additionalDev')}</Title> <Title>{i18n.t('aboutScreen.additionalDev')}</Title>
<FlatList <FlatList
data={this.additionalDevData} data={this.additionalDevData}
extraData={this.state}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
listKey={"team2"} listKey={"2"}
renderItem={this.getCardItem} renderItem={this.getCardItem}
/> />
</Card.Content> </Card.Content>
@ -299,9 +295,7 @@ class AboutScreen extends React.Component<Props, State> {
<Title>{i18n.t('aboutScreen.technologies')}</Title> <Title>{i18n.t('aboutScreen.technologies')}</Title>
<FlatList <FlatList
data={this.technoData} data={this.technoData}
extraData={this.state}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
listKey={"techno"}
renderItem={this.getCardItem} renderItem={this.getCardItem}
/> />
</Card.Content> </Card.Content>
@ -404,28 +398,24 @@ class AboutScreen extends React.Component<Props, State> {
<Button <Button
icon="email" icon="email"
mode="contained" mode="contained"
dark={true}
color={this.colors.primary}
style={{ style={{
marginTop: 20, marginTop: 20,
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
}} }}
onPress={this.onPressMail}> onPress={this.onPressMail}>
<Text>{i18n.t('aboutScreen.bugsMail')}</Text> {i18n.t('aboutScreen.bugsMail')}
</Button> </Button>
<Button <Button
icon="git" icon="git"
mode="contained" mode="contained"
dark={true}
color={this.colors.primary}
style={{ style={{
marginTop: 20, marginTop: 20,
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
}} }}
onPress={this.onPressGit}> onPress={this.onPressGit}>
<Text>{i18n.t('aboutScreen.bugsGit')}</Text> {i18n.t('aboutScreen.bugsGit')}
</Button> </Button>
</View> </View>
); );
@ -476,8 +466,6 @@ class AboutScreen extends React.Component<Props, State> {
<FlatList <FlatList
style={{padding: 5}} style={{padding: 5}}
data={this.dataOrder} data={this.dataOrder}
extraData={this.state}
keyExtractor={(item) => item.id}
renderItem={this.getMainCard} renderItem={this.getMainCard}
/> />
</View> </View>

View file

@ -117,16 +117,6 @@ class HomeScreen extends React.Component<Props> {
this.props.navigation.navigate('SelfMenuScreen'); this.props.navigation.navigate('SelfMenuScreen');
} }
/**
* Extract a key for the given item
*
* @param item The item to extract the key from
* @return {*} The extracted key
*/
getKeyExtractor(item: Object) {
return item !== undefined ? item.id : undefined;
}
/** /**
* Creates the dataset to be used in the FlatList * Creates the dataset to be used in the FlatList
* *
@ -145,15 +135,11 @@ class HomeScreen extends React.Component<Props> {
{ {
title: '', title: '',
data: dashboardData, data: dashboardData,
extraData: super.state,
keyExtractor: this.getKeyExtractor,
id: SECTIONS_ID[0] id: SECTIONS_ID[0]
}, },
{ {
title: i18n.t('homeScreen.newsFeed'), title: i18n.t('homeScreen.newsFeed'),
data: newsData, data: newsData,
extraData: super.state,
keyExtractor: this.getKeyExtractor,
id: SECTIONS_ID[1] id: SECTIONS_ID[1]
} }
]; ];

View file

@ -142,7 +142,6 @@ class ProximoMainScreen extends React.Component<Props, State> {
{ {
title: '', title: '',
data: this.generateData(fetchedData), data: this.generateData(fetchedData),
extraData: this.state,
keyExtractor: this.getKeyExtractor keyExtractor: this.getKeyExtractor
} }
]; ];

View file

@ -272,14 +272,12 @@ class ProxiwashScreen extends React.Component<Props, State> {
title: i18n.t('proxiwashScreen.dryers'), title: i18n.t('proxiwashScreen.dryers'),
icon: 'tumble-dryer', icon: 'tumble-dryer',
data: data.dryers === undefined ? [] : data.dryers, data: data.dryers === undefined ? [] : data.dryers,
extraData: this.state,
keyExtractor: this.getKeyExtractor keyExtractor: this.getKeyExtractor
}, },
{ {
title: i18n.t('proxiwashScreen.washers'), title: i18n.t('proxiwashScreen.washers'),
icon: 'washing-machine', icon: 'washing-machine',
data: data.washers === undefined ? [] : data.washers, data: data.washers === undefined ? [] : data.washers,
extraData: this.state,
keyExtractor: this.getKeyExtractor keyExtractor: this.getKeyExtractor
}, },
]; ];

View file

@ -56,7 +56,6 @@ class SelfMenuScreen extends React.Component<Props> {
{ {
title: '', title: '',
data: [], data: [],
extraData: super.state,
keyExtractor: this.getKeyExtractor keyExtractor: this.getKeyExtractor
} }
]; ];
@ -69,7 +68,6 @@ class SelfMenuScreen extends React.Component<Props> {
{ {
title: DateManager.getInstance().getTranslatedDate(fetchedData[i].date), title: DateManager.getInstance().getTranslatedDate(fetchedData[i].date),
data: fetchedData[i].meal[0].foodcategory, data: fetchedData[i].meal[0].foodcategory,
extraData: super.state,
keyExtractor: this.getKeyExtractor, keyExtractor: this.getKeyExtractor,
} }
); );

View file

@ -5,7 +5,7 @@ import ScoreManager from "./ScoreManager";
import type {coordinates} from './Shapes/BaseShape'; import type {coordinates} from './Shapes/BaseShape';
export type cell = {color: string, isEmpty: boolean}; export type cell = {color: string, isEmpty: boolean, key: string};
export type grid = Array<Array<cell>>; export type grid = Array<Array<cell>>;
/** /**
@ -50,6 +50,7 @@ export default class GridManager {
line.push({ line.push({
color: this.#colors.tetrisBackground, color: this.#colors.tetrisBackground,
isEmpty: true, isEmpty: true,
key: col.toString(),
}); });
} }
return line; return line;

View file

@ -57,6 +57,7 @@ export default class Piece {
grid[coord[i].y][coord[i].x] = { grid[coord[i].y][coord[i].x] = {
color: this.#colors.tetrisBackground, color: this.#colors.tetrisBackground,
isEmpty: true, isEmpty: true,
key: grid[coord[i].y][coord[i].x].key
}; };
} }
} }
@ -73,6 +74,7 @@ export default class Piece {
grid[coord[i].y][coord[i].x] = { grid[coord[i].y][coord[i].x] = {
color: this.#currentShape.getColor(), color: this.#currentShape.getColor(),
isEmpty: false, isEmpty: false,
key: grid[coord[i].y][coord[i].x].key
}; };
} }
} }

View file

@ -5,9 +5,7 @@ import {View} from 'react-native';
import {withTheme} from 'react-native-paper'; import {withTheme} from 'react-native-paper';
type Props = { type Props = {
color: string, item: Object
isEmpty: boolean,
id: string,
} }
class Cell extends React.PureComponent<Props> { class Cell extends React.PureComponent<Props> {
@ -20,17 +18,19 @@ class Cell extends React.PureComponent<Props> {
} }
render() { render() {
const item = this.props.item;
return ( return (
<View <View
style={{ style={{
flex: 1, flex: 1,
backgroundColor: this.props.isEmpty ? 'transparent' : this.props.color, backgroundColor: item.isEmpty ? 'transparent' : item.color,
borderColor: this.props.isEmpty ? 'transparent' : this.colors.tetrisBorder, borderColor: item.isEmpty ? 'transparent' : this.colors.tetrisBorder,
borderStyle: 'solid', borderStyle: 'solid',
borderRadius: 2, borderRadius: 2,
borderWidth: 1, borderWidth: 1,
aspectRatio: 1, aspectRatio: 1,
}} }}
key={item.key}
/> />
); );
} }

View file

@ -25,22 +25,24 @@ class Grid extends React.Component<Props>{
} }
getRow(rowNumber: number) { getRow(rowNumber: number) {
let cells = []; let cells = this.props.grid[rowNumber].map(this.getCellRender);
for (let i = 0; i < this.props.width; i++) {
let cell = this.props.grid[rowNumber][i];
let key = rowNumber + ':' + i;
cells.push(<Cell color={cell.color} isEmpty={cell.isEmpty} id={key}/>);
}
return ( return (
<View style={{ <View
style={{
flexDirection: 'row', flexDirection: 'row',
backgroundColor: this.props.backgroundColor, backgroundColor: this.props.backgroundColor,
}}> }}
key={rowNumber.toString()}
>
{cells} {cells}
</View> </View>
); );
} }
getCellRender = (item: Object) => {
return <Cell item={item} key={item.key}/>;
};
getGrid() { getGrid() {
let rows = []; let rows = [];
for (let i = 0; i < this.props.height; i++) { for (let i = 0; i < this.props.height; i++) {

View file

@ -22,19 +22,24 @@ class Preview extends React.PureComponent<Props> {
let grids = []; let grids = [];
for (let i = 0; i < this.props.next.length; i++) { for (let i = 0; i < this.props.next.length; i++) {
grids.push( grids.push(
<Grid this.getGridRender(this.props.next[i], i)
width={this.props.next[i][0].length}
height={this.props.next[i].length}
grid={this.props.next[i]}
containerMaxHeight={50}
containerMaxWidth={50}
backgroundColor={'transparent'}
/>
); );
} }
return grids; return grids;
} }
getGridRender(item: Object, index: number) {
return <Grid
width={item[0].length}
height={item.length}
grid={item}
containerMaxHeight={50}
containerMaxWidth={50}
backgroundColor={'transparent'}
key={index.toString()}
/>;
};
render() { render() {
if (this.props.next.length > 0) { if (this.props.next.length > 0) {
return ( return (