antd-mobile ListView 긴 목록 의 데이터 업데이트

닥 친 문제
listView 이 구성 요 소 는 정말 문 서 를 보 느 라 머리 가 아프다.가까스로 문 서 를 보고 긴 목록 데 이 터 를 써 서 보 여 주 었 습 니 다.그 다음 에 사용자 가'좋아요'를 누 르 는 동작 이 있 는데 문제 가 생 겼 습 니 다.'좋아요'를 누 르 고 데이터 업 데 이 트 를 한 후에 listView 는 목록 을 새로 고치 지 않 습 니 다.
질문
공식 demo 에 이러한 함수 row HasChanged 가 있 습 니 다.이 함 수 는 true 나 false 로 되 돌아 갑 니 다.true 라면 이 줄 의 데이터 가 바 뀌 었 다 고 생각 하고 이 줄 의 데 이 터 를 새로 고치 면 목록 을 업데이트 합 니 다.

//   
 constructor(props) {
  super(props);
  ...
  const dataSource = new ListView.DataSource({
   ...
   rowHasChanged: (row1, row2) => row1 !== row2 //     
  });
 }

그리고 각종 바 이 두 에서 마지막 으로 github 에서 이 걸 봤 어 요issue.마지막 으로 여러분 이 얻 은 결론 은 이 구성 요 소 를 계속 사용 하고 목록 을 새로 고 치 려 면 아래 와 같이 쓸 수 밖 에 없다 는 것 입 니 다.
그러나 이렇게 쓰 면 모든 데 이 터 를 업데이트 시 켜 성능 에 대한 소모 가 매우 크다.

// !!!   
rowHasChanged: ( row1, row2) => true

emmm,하지만 나 는 다른 플러그 인 을 보 러 가 고 싶 지 않 아서 위의 문법 을 사용 했다.
다음은 제 가 이 listView 를 어떻게 설정 하 는 지 말씀 드 리 겠 습 니 다.왜냐하면 저 는 이 구성 요소 의 공식 demo 가 정말 이해 할 수 없 을 것 이 라 고 생각 하기 때 문 입 니 다.
ListView 실제 항목 에서 사용
아래 코드 는 주로 listview 를 설정 하 는 방법 을 보 여 줍 니 다.작은 곳 을 잠 그 지 마 세 요.제 가 많은 업무 코드 를 지 웠 기 때 문 입 니 다.

class Message extends React.Component {
 constructor(props) {
  super(props);
  const dataSource = new ListView.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;
  
  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 (
    <div className={styles.item} key={rowID}>
      <div onClick={toggleLike}>  </div>
      <div className={styles.content}>{item.content}</div>
      </div>
    </div>
   );
  };

  return (
   <Fragment>
     <ListView
     ref={el => this.lv = el}
     dataSource={this.state.dataSource}
     renderHeader={() => (
      <div className={styles.sub}>
       <span>   ，      </span>
      </div>
     )}
     renderFooter={() => (<div style={{ padding: 10, textAlign: 'center' }}>
      { isLoading ? '   ' : '    '}
     </div>)}
     renderRow={row}
     className="am-list"
     pageSize={pageSize}
     useBodyScroll
     scrollRenderAheadDistance={500}
     onEndReached={this.onEndReached}
     onEndReachedThreshold={10}
    />
   </Fragment>
  );
 }
}

model.js

*getCommentsByContentId({ payload }, { call, put, select }) {
   const { data } = yield call(getCommentsByContentId, payload);
   const { message } = yield select(state=>state);
   const { commentList } = message;
   if (data.code === 200) {
    //    ，       +     ，     commentList
    let list = [...commentList, ...data.data.list]
    yield put({
     type: 'updateStates',
     payload: {
      totalCount: data.data.totalCount,
      commentList: list
     }
    });
   } else {
    Toast.fail(data.msg, 1)
   }
  },

이상 은 antd-mobile ListView 긴 목록 의 데이터 업데이트 가 만 나 는 구덩이 의 상세 한 내용 입 니 다.antd-mobile ListView 긴 목록 에 관 한 자 료 는 다른 관련 글 을 주목 하 세 요!