React-Native开发中的灵异组件-列表

灵异组件

众所周知，列表是移动开发中非常常用的组件（控件）。原生的列表，拿iOS来来说，有UITableView & UICollectionview,就算是长列表的情况也只是加载速度慢，不会出现突然不再加载的情况，Android的应该也是这种情况。但是React-Native中提供的列表就会出现突然不再加载的情况，严格来说是列表的item不再渲染了，因为查看数据，发现列表的数据的数据是正确的。React-Native提供给开发者的列表组件有三种， FlatList, SectionList,ListView,目前的使用情况来看，FlatList& SectionList都会出现这种灵异事件。

使用场景

国家手机号代码列表

由于项目的需要，目前的App需要提供一个全球的手机号代码列表，供用户注册的时候，选择自己国家的手机号代码。列表见下图：

这个列表的数据一共是242条，由于需要排序分组并且给用户提供索引，所以采用sectionList来实现该页面。页面刚完成的时候，效果还算可以，除了快速滑动的时候会出现白屏，索引的跳转不是很准确（我从网上查了一下，那两个是React-native本省的问题），算是完成任务，就提交给策划，然后进行新功能的开发。

实现代码如下：

render(){

        return (<View style={styles.containStyle}>
                    <CustomNavBar title="Country" navigator={this.props.navigator}></CustomNavBar>
                    <SectionList ref={el=> this.sectionList=el}
                                 initialNumToRender={20}
                                 showsVerticalScrollIndicator={true}
                                //  onEndReachedThreshold={0.1}
                                //  onEndReached={()=> this.loadMoreData(false)}
                                 sections={this.state.totalSections}
                                 renderItem={this._renderItem}
                                 getItemLayout={this._getItemLayout}
                                 keyExtractor={(item: Item, index: number)=> index.toString()}
                                 extraData={this.state}
                                 renderSectionHeader={this._renderSectionHeader}
                                 ItemSeparatorComponent={()=><View style={{width: '100%', height: 1/PixelRatio.get(), backgroundColor: THEME_COLOR.SEPATOR_COLOR, marginLeft: 12, marginRight: 24}}></View>}>
                    </SectionList>
                    <SideBar indexs={this.state.indexs} onLetterSelectedListener={this.onSideBarSelected.bind(this)}></SideBar>
                </View>);
    }

    _renderItem = (info: any) => {

        return (<CountryCodeItem item={info.item} itemSelected={this.itemSelected.bind(this, info.item)}></CountryCodeItem>);
    }

    _getItemLayout = (data:any, index:number) => {

        const itemHeight = 40;
        return {
            length: itemHeight,
            offset: (itemHeight + 0) * index,
            index,
        };
    }

    _renderSectionHeader = (info: any) => {

        let txt = info.section.key;
        return <Text key={txt} style={{ height:20, textAlignVertical: 'center', backgroundColor: THEME_COLOR.BOX_BOTTOM_COLOR, color: '#666666', fontSize: 12, paddingLeft: 16, paddingTop: 4}}>{txt}</Text>
    }

    itemSelected(item: Item){

        console.log('the current item is===='+JSON.stringify(item));
        const result = item.countryCode + ' ' + item.phoneCode;
        if(this.props.updatePhoneCode){

            this.props.updatePhoneCode(result, item.phoneCode);
            this.props.navigator.pop();
        }
    }

    onSideBarSelected(letter:string){

        let sections: sectionData[] = this.state.totalSections;
        if (sections) {
            for (let index = 0; index < sections.length; index++) {
              let item = sections[index];
              if (item.key === letter) {

                console.log('the current index i ==' + index);
                this.sectionList.scrollToLocation({animated: true, itemIndex: 0, sectionIndex: index, viewPosition: 0.0});
                break;
              }
            }
        }
    }

好友列表

好友列表，好友列表的效果和上面一样，也是需要分组和索引，由于好友列表开发的比较早，我是采用的FlatList实现的功能。

代码如下：

renderSuccessView(){
        return (
            <View style={styles.container}>
                <View style={styles.content}>
                <FlatList
                    ref={el=> this.list = el}
                    data={this.state.listData}
                    extraData={this.state}
                    keyExtractor={(item: any, index: number)=> index.toString()}
                    renderItem={this._renderItem}
                    getItemLayout={this._getItemLayout}
                    ListEmptyComponent={this.renderEmptyView}
                    ItemSeparatorComponent={this.itemSeparator}
                    initialNumToRender={20}
                    //onEndReachedThreshold={0.8}
                    //legacyImplementation={this.state.listData.length > 0}
                    showsVerticalScrollIndicator={true}
                />
                <View style={{position: 'absolute', height: '100%', width: 15, right: 0, backgroundColor: 'transparent', justifyContent: 'center', alignItems: 'center'}}><SideBar indexs={this.indexs} onLetterSelectedListener={this.onSideBarSelected.bind(this)}/></View>
                </View>
                <View style={styles.divider}></View>
            </View>
        );
    }
    
    
    _renderItem = (item:any) => {
        console.log('the current item-->' + JSON.stringify(item)+" key: "+ item.item.key);
        return (<FriendListItem item={item.item} spreadValue={this.state.scaleValue} onListItemClick={this.onListItemClick.bind(this)} 
                    acceptNewFriend={this.acceptNewFriend.bind(this)}
                    newFriendsSectionUnfold={this.newFriendsSectionUnfold.bind(this)}>
                </FriendListItem>);
    }

好友列表刚开始做的时候bug比较多，经过几次修改，修复了出现的那些bug，效果也打到达了策划的要求。本以为任务完成了，还算完美。但是在接下来的反复测试中，灵异事件出现了。

灵异事件

在测试的过程中，出现了好友列表只加载10条的情况，10是initialNumToRender设置第一屏渲染的数据条数。而且很奇怪，好友列表第一个固定的分组是好友的申请记录，其余的显示已经是好友的数据，按拼音的首字母进行分组排序。好友申请记录的显示逻辑是一开始最多显示5条，点击展开按钮，在全部显示出来。

好友列表的灵异事件刚开始发现的时候，好友申请记录显示了5条，已经是好友的数据显示了5条，当点击了申请记录的展开按钮，申请记录是6条，已经是好友的数据就少了最后一条，变成了4条，但是把申请收齐，好友数据又成了5条了。

刚开始以为是之前的bug没有改彻底，之前因为因为有key重复的情况，出现了数据缺少的情况，经过反复review代码，发现不是那个bug。反复进入好友列表，发现只渲染10条的灵异事件，低端机上比较容易出现，比如iphone5S，Android的低端机上也比较容易出现，高端机上出现的频率很低。

于是去测试国家编码列表，那个列表一共是242条数据，也是右边有分组索引，也出现了同样的问题。

而且出现的时候列表的可滑动区域变得很大，打印数据源，发现数据源是正常的，只是屏幕上只渲染了initialNumToRender设置的条数，就算你设置了2，也只显示2条，设置一个很大的值，也能渲染，就是渲染慢，要等待，数据条数越多，时间越长。

网上查了很多资料，尝试了很多解决办法。

• 1.分页加载数据。
• 2.列表的Item继承PureComponent。
• 3.使用ListView替代。

分页加载

分页加载是网上查找到的，说是FlatList& SectionList提供了分页加载的触发方法，当一屏数据快要滑动到底部的时候，触发一个方法，可以再去加载另外一部分数据。于是乎赶紧实现了一把，数据也是分页加载的，经过反复测试，发现分页加载的情况下，也会出现不再渲染的情况。而且因为列表右边有索引，分页加载其实也不能满足需求，本想着分页加载能够解决灵异事件，去和策划沟通一下，索引的功能稍微改一改，结果发现分页加载的思路也行不通。

item继承PureComponent

网上查到一份资料，有人说是把列表的item的直接继承PureComponent（之前继承的是React.Component），于是满怀希望赶紧把item重新改写了一下，最后发现然并卵，那个灵异效果依旧会出现。

使用ListView替代

使用ListView替代，查了一下关芳芳文档，说是ListView本身的性能不好，才重新封装了
FlatList& SectionList来替代它。用ListView替代以后，列表能够完全渲染了，就是有点慢，而且官方文档说ListView在超出屏幕之外，并没有做回收，数据量打了，终究是个隐患。内存暴涨，滑动卡顿。

其实在测试的过程中，发现如果直接把 列表的initialNumToRender设置成列表数据的长度，也能暂时解决问题，但是数据量大了，加载会很慢。拿国家编码列表来举例，242条数据，大概需要卡住5s左右，随着数据量的增大，效果可想而知，好友列表的数据容纳量目标是1500条，瞬间就泪崩了。

总结

目前来说，经过网上查询资料，自己尝试，都木有彻底解决React-Native列表的灵异问题，目前的解决方案，只是暂时性，数据量大了，问题会很明显，希望遇到过同样问题的同学，能够一起讨论解决，共同成长，或者有解决方案，麻烦告知一声，谢谢了。