React Native FlatList

FlatList是我们项目中经常使用的一个组件，

下面简述下使用中要注意的问题

一、keyExtractor

keyExtractor的唯一性

/**
     * Used to extract a unique key for a given item at the specified index. Key is used for caching
     * and as the react key to track item re-ordering. The default extractor checks `item.key`, then
     * falls back to using the index, like React does.
     */
    keyExtractor?: (item: ItemT, index: number) => string;

/**
*用于在指定索引处提取给定项的唯一键。密钥用于缓存
*并作为跟踪项目重新订购的反应键。默认提取器检查'item.key'，然后
*退回到使用索引，就像React一样。
*/

keyExtractor决定了子组件是否需要新建。只要有新的keyExtractor，那么就会构造新的子组件。

所以我们需要确保keyExtractor的唯一性，如果keyExtractor不唯一，就会出现莫名其妙的错误

一般我们有以下两种方式设置keyExtractor

1、依赖当前数据模型的唯一标记userId（此方案需要后台返回的数据ID是唯一的）

keyExtractor={(item)=>item.userId}

2、前端自己生成

let extraUniqueKey = () => Math.random().toString();

二、renderItem、ListHeaderComponent

renderItem、ListHeaderComponent组件封装成函数时，注意this的绑定，

如果不想考虑this的问题，建议直接使用箭头函数

详情参考：React Native bind函数 bind(this)

先看效果：

代码如下：

1、使用箭头函数(推荐)

    private showFlatList() {
        let dataList = this.props.listData
        if (dataList && dataList.length) {
            let extraUniqueKey = () => Math.random().toString();
            return (

                <FlatList
                    style={{
                        backgroundColor: '#ffffff',
                        height: (44 * (dataList.length > 5 ? 4 : dataList.length) + 44),
                        marginHorizontal: 15,
                        marginTop: 20,
                    }}
                    data={dataList}
                    renderItem={this.renderUserItem}
                    // keyExtractor={(item)=>item.userId}
                    keyExtractor={extraUniqueKey}
                    ListHeaderComponent={this.listHeaderView}
                    showsVerticalScrollIndicator={false}
                />
            );
        }
    }

    // 表头（箭头函数）
    listHeaderView = () => {
        return (
            <View style={{
                backgroundColor: '#E7F1FF',
                height: 44,
                flexDirection: 'row',
                justifyContent: 'space-around',
                alignItems: 'center',
            }}>

                <Text style={style.itemText}>{this.showStr()}</Text>
                <Text style={style.itemText}>来来来 </Text>

            </View>)
    }

    // 表格 （箭头函数）
    renderUserItem = (renderItem: ListRenderItemInfo<NotEvaUserModel>) => {
        let item: NotEvaUserModel = renderItem.item
        return (
            <View style={style.itemBg}>
                <Text style={style.itemText}>{this.showStr()}</Text>
                <Text style={style.itemText}>{item.userName}</Text>
            </View>
        )
    }

    showStr() {
        return '我是showStr函数'
    }

2、使用普通函数，且renderItem、ListHeaderComponent中使用到this（建议直接bind(this)）

实际验证renderUserItem必须绑定this，listHeaderView不绑定this也可以（纯属走运，不推荐）

原因如下

这是因为都属于调用后执行且renderUserItem是有参函数，listHeaderView是无参函数且只会触发一次

详情参考：React Native 函数的调用

private showFlatList() {
        let dataList = this.props.listData
        if (dataList && dataList.length) {
            let extraUniqueKey = () => Math.random().toString();
            return (

                <FlatList
                    style={{
                        backgroundColor: '#ffffff',
                        height: (44 * (dataList.length > 5 ? 4 : dataList.length) + 44),
                        marginHorizontal: 15,
                        marginTop: 20,
                    }}
                    data={dataList}
                    renderItem={this.renderUserItem.bind(this)}
                    // keyExtractor={(item)=>item.userId}
                    keyExtractor={extraUniqueKey}
                    ListHeaderComponent={this.listHeaderView.bind(this)}
                    showsVerticalScrollIndicator={false}
                />
            );
        }
    }

    // 表头（普通函数）
    listHeaderView () {
        return (
            <View style={{
                backgroundColor: '#E7F1FF',
                height: 44,
                flexDirection: 'row',
                justifyContent: 'space-around',
                alignItems: 'center',
            }}>

                <Text style={style.itemText}>{this.showStr()}</Text>
                <Text style={style.itemText}>来来来 </Text>

            </View>)
    }

    // 表格 （普通函数）
    renderUserItem (renderItem: ListRenderItemInfo<NotEvaUserModel>) {
        let item: NotEvaUserModel = renderItem.item
        return (
            <View style={style.itemBg}>
                <Text style={style.itemText}>{this.showStr()}</Text>
                <Text style={style.itemText}>{item.userName}</Text>
            </View>
        )
    }

    showStr() {
        return '我是showStr函数'
    }

3、使用普通函数，且renderItem、ListHeaderComponent中未使用到this(不推荐）

不用考虑this绑定的情况

private showFlatList() {
        let dataList = this.props.listData
        if (dataList && dataList.length) {
            let extraUniqueKey = () => Math.random().toString();
            return (

                <FlatList
                    style={{
                        backgroundColor: '#ffffff',
                        height: (44 * (dataList.length > 5 ? 4 : dataList.length) + 44),
                        marginHorizontal: 15,
                        marginTop: 20,
                    }}
                    data={dataList}
                    renderItem={this.renderUserItem}
                    // keyExtractor={(item)=>item.userId}
                    keyExtractor={extraUniqueKey}
                    ListHeaderComponent={this.listHeaderView}
                    showsVerticalScrollIndicator={false}
                />
            );
        }
    }

    // 表头（普通函数）
    listHeaderView () {
        return (
            <View style={{
                backgroundColor: '#E7F1FF',
                height: 44,
                flexDirection: 'row',
                justifyContent: 'space-around',
                alignItems: 'center',
            }}>

                <Text style={style.itemText}>我是showStr函数</Text>
                <Text style={style.itemText}>来来来 </Text>

            </View>)
    }

    // 表格 （普通函数）
    renderUserItem (renderItem: ListRenderItemInfo<NotEvaUserModel>) {
        let item: NotEvaUserModel = renderItem.item
        return (
            <View style={style.itemBg}>
                <Text style={style.itemText}>我是showStr函数</Text>
                <Text style={style.itemText}>{item.userName}</Text>
            </View>
        )
    }

}

const style = StyleSheet.create({

    bg: {
        backgroundColor: '#FFFFFF',
        borderRadius: 10,
         DeviceHelp.screenW - 100,
    },

    toptext: {
        fontWeight: 'bold',
        color: '#333333',
        marginTop: 20,
        textAlign: 'center',
        fontSize: DeviceHelp.fontSize(17)
    },

    centerText: {
        color: '#505A82',
        paddingTop: 15,
        paddingLeft: 15,
        paddingRight: 15,
        fontSize: DeviceHelp.fontSize(15)
    },

    itemBg: {
        height: 44,
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        backgroundColor: "#EFEFEF",
    },

    itemText: {
        color: '#333333',
        fontSize: DeviceHelp.fontSize(15),
    },

    line: {
        marginTop: 20,
        backgroundColor: '#99999955',
        height: 1,
    },

    btnText: {
        marginTop: 15,
        marginBottom: 15,
        color: "#3498FE",
        fontWeight: "bold",
        textAlign: "center",
        fontSize: DeviceHelp.fontSize(18),
    },


})

 综上：

推荐方案1和2

即箭头函数直接使用，普通函数bind(this)