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(
点赞