本篇內(nèi)容主要講解“antd-mobile ListView長(zhǎng)列表的數(shù)據(jù)更新時(shí)常見(jiàn)問(wèn)題”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“antd-mobile ListView長(zhǎng)列表的數(shù)據(jù)更新時(shí)常見(jiàn)問(wèn)題”吧!

創(chuàng)新互聯(lián)主營(yíng)達(dá)茂旗網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App制作,達(dá)茂旗h5小程序設(shè)計(jì)搭建,達(dá)茂旗網(wǎng)站營(yíng)銷(xiāo)推廣歡迎達(dá)茂旗等地區(qū)企業(yè)咨詢(xún)

遇到的問(wèn)題

listView這個(gè)組件我真的是看文檔看得腦殼疼。好不容易看文檔寫(xiě)完長(zhǎng)列表數(shù)據(jù)展示了。然后遇到一個(gè)需求，即用戶(hù)有一個(gè)點(diǎn)贊操作，問(wèn)題出現(xiàn)了，點(diǎn)贊完數(shù)據(jù)更新之后listView不刷新列表。

解決列表不刷新問(wèn)題

官方的demo里有這么一個(gè)函數(shù) rowHasChanged ,這個(gè)函數(shù)返回true或者false，如果是true，則認(rèn)為這行數(shù)據(jù)改變了，然后刷新這行數(shù)據(jù)，也就更新了列表。

// 官方
 constructor(props) {
  super(props);
  ...
  const dataSource = new ListView.DataSource({
   ...
   rowHasChanged: (row1, row2) => row1 !== row2 // 這個(gè)方法
  });
 }

然后就各種百度，最后在github上看到這個(gè) issue。最后大家得出的結(jié)論就是如果要繼續(xù)用這個(gè)組件，又想刷新列表的話就只能寫(xiě)成下面這樣。

but,這樣寫(xiě)會(huì)讓所有的數(shù)據(jù)都更新，對(duì)性能的消耗挺大的。

// !!!這樣寫(xiě)
rowHasChanged: ( row1, row2) => true

emmm,但是我不想去看其他的插件了，所以就采用了上面的寫(xiě)法。

下面就講一下我怎么配置這個(gè)listView的，因?yàn)槲矣X(jué)得這個(gè)組件官方demo還真的寫(xiě)得蠻看不懂的。

ListView在實(shí)際項(xiàng)目中使用

下面的代碼主要展示怎么配置listview，不要扣小地方，因?yàn)槲野押芏鄻I(yè)務(wù)代碼去掉了。

class Message extends React.Component {
 constructor(props) {
  super(props);
  const dataSource = new ListView.DataSource({
  // 這樣寫(xiě)，每次都執(zhí)行rowHasChanged,每次都更新row
   rowHasChanged: ( row1, row2) => true
  });

  this.state = {
   dataSource,
  };
 }

 componentDidMount() {
  // 請(qǐng)求初始化數(shù)據(jù)
 }

 // 在這里維護(hù)長(zhǎng)列表數(shù)據(jù)，把從接口獲取來(lái)的數(shù)據(jù)賦值給state里的dataSource。
 componentWillReceiveProps(nextProps) {
  if(nextProps.message.commentList !== this.props.message.commentList){
   this.setState({
   // 注意！這里的cloneWithRows()，antd里規(guī)定用它來(lái)更新dataSource，這個(gè)不是拼接數(shù)據(jù)，用這個(gè)函數(shù)，dataSource會(huì)更新成nextProps.message.commentList。
   //所以在接受后端分頁(yè)數(shù)據(jù)時(shí)，就把拼接好的數(shù)據(jù)賦值給nextProps.message.commentList（這個(gè)在model.js里寫(xiě)了）
    dataSource: this.state.dataSource.cloneWithRows(nextProps.message.commentList),
   });
  }
 }

// onEndReached,列表被滾動(dòng)到距離最底部不足`onEndReachedThreshold`個(gè)像素的距離時(shí)調(diào)用
// 在這里寫(xiě)分頁(yè)請(qǐng)求
 onEndReached = (event) => {
  const { dispatch } = this.props;
  const { email } = this.props.user;
  const { pageNum, pageSize, contentId, totalCount, commentList } = this.props.message;
  
  let hasMore = totalCount > commentList.length ? true : false;
  // load new data
  // hasMore: from backend data, indicates whether it is the last page, here is false
  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
  const row = (rowData, sectionID, rowID) => {
   const item = rowData;
   return (
    
      點(diǎn)贊