重新渲染平面清单的过程已经进行了数千次

Question

我正在将flatlist用于Firebase消息传递。但是renderItem方法是在诸如打开键盘或在输入字段中键入之类的事件上调用的，这会使屏幕变得过于缓慢。如果我从屏幕上移除了flatlist，则屏幕工作正常。

renderItem方法被调用了上千次，通常进行大约7000次调用。我通过记录检查了这一点。

<FlatList
                        ref={ref => (this.flatList = ref)}
                        onContentSizeChange={() => this.flatList.scrollToEnd({ animated: true })}
                        onLayout={() => this.flatList.scrollToEnd({ animated: true })}
                        data={messages}
                        shouldComponentUpdate={this.shouldComponentUpdate}
                        keyExtractor={messages => messages.id}
                        renderItem={this._renderChat}
                        ListEmptyComponent={
                            <View style={styles.noDataContainer}>
                                <Text style={styles.watermark}>
                                    You dont have any message yet!
                                </Text>
                            </View>
                        }
                    />

<Touchable onPress={() => this._handleBack()} style={styles.backArrow}>
                    <EvilIcons name="chevron-left" size={moderateScale(40)} color="#fff" style={{ marginLeft: -(theme.WIDTH * 0.03) }}/>
                </Touchable>

            {/*Second Section START*/}
                <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : null}>
                    <View style={styles.footerStyle}>
                        <View>
                            {avatarSource === null ? null : <Image source={avatarSource} style={styles.postImageStyle}/>}
                        </View>
                        <View style={styles.postBoxStyle}>
                            <Touchable onPress={this.selectPhotoTapped.bind(this)}>
                                <DrinkzIcon name="camera-SVG" size={moderateScale(24)} color={"rgba(255,255,255,0.5)"}/>
                            </Touchable>

                            <Input
                                value={this.state.newPosting}
                                style={styles.newPostStyle}
                                editable={true}
                                keyboardType="default"
                                returnKeyType="send"
                                autoCapitalize="none"
                                autoCorrect={false}
                                onChangeText={newPosting => this.setState({ newPosting })}
                                underlineColorAndroid="transparent"
                                placeholder="Write something..."
                                placeholderTextColor="rgba(255,255,255,0.5)"
                                onSubmitEditing={() => this.onSend(this.state.newPosting)}
                            />

                            <Touchable onPress={() => this.onSend(this.state.newPosting)} style={styles.postBtn}>
                                <Text style={styles.postBtnTxt}>POST</Text>
                            </Touchable>
                        </View>
                    </View>
                </KeyboardAvoidingView>




_renderChat = ({ item }) => (
    <View>
        {
            !this.chatDeleteddd(item.createdAt)
            ?
            <View>
                {
                    item.userId == this.props.user.id
                    ?
                    <View style={[styles.listItem, { justifyContent: "flex-end" }]}>
                        <View style={[styles.chatBoxStyle, { backgroundColor: "rgb(216,216,216)", marginLeft: theme.WIDTH * 0.2 }]}>
                            <View>
                                {item.post_image ? <Image source={{ uri: item.post_image }} style={styles.postImageStyle}/> : null}
                            </View>
                            <Hyperlink linkStyle={styles.linkText} onPress={(url, text) => this._openURL(url)} linkText={url => this._displyURL(url)}>
                                <Text style={styles.messageText}>{item.message}</Text>
                            </Hyperlink>
                            <Text style={styles.timeText}>{this.getTime(item.createdAt)}</Text>
                        </View>
                        <Image source={this.props.user.profile_pic ? { uri: this.props.user.profile_pic } : images.noImage} style={[styles.postUser, { marginLeft: theme.WIDTH * 0.02 }]}/>
                    </View>
                    :
                    <View style={[styles.listItem, { justifyContent: "flex-start" }]}>
                        <Image source={this.getiamge(item.userId) ? { uri: this.getiamge(item.userId) } : images.noImage } style={[styles.postUser, { marginRight: theme.WIDTH * 0.02 }]}/>
                        <View style={[styles.chatBoxStyle, {backgroundColor: "white", marginRight: theme.WIDTH * 0.2}]}>
                            <View>
                                {item.post_image ? <Image source={{ uri: item.post_image }} style={styles.postImageStyle} /> : null}
                            </View>
                            <Hyperlink linkStyle={styles.linkText} onPress={(url, text) => this._openURL(url)} linkText={url => this._displyURL(url)}>
                                <Text style={styles.messageText}>{item.message}</Text>
                            </Hyperlink>
                            <Text style={styles.timeText}>{this.getTime(item.createdAt)}</Text>
                        </View>
                    </View>
                }
            </View>
            :
            null
        }
    </View>
);



chatDeleteddd(createdTime) {
    console.log("chatDeleteddd");
    var ischat = false;
    if (this.state.deleteTime >= createdTime) {
        ischat = true;
    }
    return ischat;
}