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列表的靈異問題，目前的解決方案，只是暫時性，數據量大了，問題會很明顯，但願遇到過一樣問題的同窗，可以一塊兒討論解決，共同成長，或者有解決方案，麻煩告知一聲，謝謝了。