如何解决使用Redux附加更多数据时,带有分页结果的Flatlist会导致重新呈现
我正在尝试使用平面列表显示来自本机的服务器上的信息列表(分页结果)
问题似乎是在加载第二批结果时总是重新呈现整个列表。
平面列表组件
<FlatList
data={_.size(this.props.search.getIn(['userInfoList','data'])) > 0 ? this.props.search.getIn(['userInfoList','data']).toJS() : []}
renderItem={({item,index}) => this._renderResult(item,index)}
keyExtractor={(item,index) => index.toString()}
ListFooterComponent={()=>this._flatlistLoader()}
ref={(ref) => { this.flatListRef = ref; }}
ListEmptyComponent={()=>this._emptyList()}
onEndReachedThreshold={0.5}
onEndReached={() => this.loadMore()}
onRefresh={() => this.refreshList()}
refreshing={this.props.search.userInfoList.isRefreshing}
initialNumToRender={8}
maxToRenderPerBatch={5}
/>
shouldComponentUpdate函数
shouldComponentUpdate(nextProps,nextState){
return !_.isEqual(nextProps,this.props)
}
_renderResult(item,index)函数返回InfoBox纯组件
_renderResult(item,index){
return(
<InfoBox key={index} item={item}/>
)
}
这是从服务器请求数据之后我的动作功能的一部分
if(res.status == 200){
let newArr = []
getState().search.getIn(['userInfoList','data']).map((val) => {
newArr.push(val)
})
res.json.data.data.map((val) => {
newArr.push(val)
})
dispatch(setInfoListResult(newArr))
}
然后减速器看起来像这样
case SET_INFO_LIST_RESULT:
return state.setIn(['userInfoList','data'],fromJS(action.newArr))
我的初始状态 从“不可变”导入{Record,List,Map}
var InitialState = Record({
...
userInfoList: new (Record({
userid:null,total: null,lastPage: null,data : [],perPage : null,currentPage : null,nextPageUrl: null,prevPageUrl:null,prevScene:null,isFetching:false,isRefreshing:false,hasError:false,hasMoreError:false,errorMsg:'',}))(),})
我将console.log(item.id)放在InfoBox(PureComponent)中,当平板列表开始加载第二页时,它将重新呈现整个列表2次并得到警告
VirtualizedList:您有一个很大的列表,更新很慢-make 确保您的renderItem函数呈现遵循React的组件 性能最佳做法,例如PureComponent,shouldComponentUpdate, 等,',{dt:4913,prevDt:2441,contentLength:11064}
我如何在reducer上更新导致重新渲染的列表,这有问题吗?知道如何解决这个问题吗?
解决方法
.toJS()
将不可变的集合转换为 new javascript对象。因此,只要您的组件运行render()
,它就会生成一个新对象并触发FlatList的呈现。
此外,toJS执行深转换。现在,您的记录再次成为普通的可变javascripts对象。如果您只需要将集合变成数组,请使用toArray。
通常应该避免在任何地方转换集合,这会使immutablejs变得无用,并且不利于大型数据集的性能。当然,某些组件要求您使用本机数组。对于这些情况,您可能需要使用某种类型的备注,例如React.memo,一个备忘录,reselect,re-reselect
减少拨打电话的次数
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。