antd-mobile ListView长列表的数据更新遇到的坑
遇到的问题
listView这个组件我真的是看文档看得脑壳疼。好不容易看文档写完长列表数据展示了。然后遇到一个需求,即用户有一个点赞操作,问题出现了,点赞完数据更新之后listView不刷新列表。
解决列表不刷新问题
官方的demo里有这么一个函数rowHasChanged,这个函数返回true或者false,如果是true,则认为这行数据改变了,然后刷新这行数据,也就更新了列表。
//官方 constructor(props){ super(props); ... constdataSource=newListView.DataSource({ ... rowHasChanged:(row1,row2)=>row1!==row2//这个方法 }); }
然后就各种百度,最后在github上看到这个issue。最后大家得出的结论就是如果要继续用这个组件,又想刷新列表的话就只能写成下面这样。
but,这样写会让所有的数据都更新,对性能的消耗挺大的。
//!!!这样写 rowHasChanged:(row1,row2)=>true
emmm,但是我不想去看其他的插件了,所以就采用了上面的写法。
下面就讲一下我怎么配置这个listView的,因为我觉得这个组件官方demo还真的写得蛮看不懂的。
ListView在实际项目中使用
下面的代码主要展示怎么配置listview,不要扣小地方,因为我把很多业务代码去掉了。
classMessageextendsReact.Component{ constructor(props){ super(props); constdataSource=newListView.DataSource({ //这样写,每次都执行rowHasChanged,每次都更新row rowHasChanged:(row1,row2)=>true }); this.state={ dataSource, }; } componentDidMount(){ //请求初始化数据 } //在这里维护长列表数据,把从接口获取来的数据赋值给state里的dataSource。 componentWillReceiveProps(nextProps){ if(nextProps.message.commentList!==this.props.message.commentList){ this.setState({ //注意!这里的cloneWithRows(),antd里规定用它来更新dataSource,这个不是拼接数据,用这个函数,dataSource会更新成nextProps.message.commentList。 //所以在接受后端分页数据时,就把拼接好的数据赋值给nextProps.message.commentList(这个在model.js里写了) dataSource:this.state.dataSource.cloneWithRows(nextProps.message.commentList), }); } } //onEndReached,列表被滚动到距离最底部不足`onEndReachedThreshold`个像素的距离时调用 //在这里写分页请求 onEndReached=(event)=>{ const{dispatch}=this.props; const{email}=this.props.user; const{pageNum,pageSize,contentId,totalCount,commentList}=this.props.message; lethasMore=totalCount>commentList.length?true:false; //loadnewdata //hasMore:frombackenddata,indicateswhetheritisthelastpage,hereisfalse if(!hasMore){ return; } dispatch({ type:"message/updateStates", payload:{ pageNum:pageNum+1, isLoading:true, isLongList:true } }) setTimeout(()=>{ dispatch({ type:"message/getCommentsByContentId", payload:{ contentId, identity:email, pageNum:pageNum+1, pageSize } }) },1000); } render(){ //列表的item constrow=(rowData,sectionID,rowID)=>{ constitem=rowData; return(点赞