antd-mobile的listView踩坑笔记

笔者上个礼拜开发公司移动端，由于数据过多所以要进行懒加载。于是就用到了antd的antd-mobile的listView组件。但是遇到了很多坑，今天总结出来分享给大家。

一：数据已经全部展示了却还是重复渲染。

原因：
自己太二，在componentWillReceiveProps 里面做了俩个判断执行了俩次下面的这个代码。所以导致数据很少可是一直向下滚会一直重新clone数据。

this.setState({
  dataSource: this.state.dataSource.cloneWithRows(nextProps.nky.waitCheckData),
  isLoading: false,
});

解决办法：
删掉一个就好了。

---

二：不触发onScroll事件

原因：
我这边的原因是因为使用了listView组件的useBodyScroll属性，但是在listView组件的外层我又放了一个其他的元素，所以导致onScroll事件失效。

解决办法：
把外层元素去掉

如果你想要外层的元素，那就不要加useBodyScroll。但是效果就是listView只会在你的外层元素上有scroll事件了。

小总结：如果使用useBodyScroll属性在listView组件的外面就不要在放其他的元素。否则onScroll事件会失效。

---

三：我给每一个row加了一个复选框，复选框的选择状态是根据state去判断的，我的row = (rowData, sectionID, rowID) => { // my code }是写在了render里面的。每次更改state都会触发render，可是row = (rowData, sectionID, rowID) => { // my code }这个代码并没有执行。

原因:
antd-mobile对此做了性能优化，并不是每次render都会触发此方法。

解决方法：
在你每次更改state的时候把dataSource也重新赋值，如下代码：

this.setState({
  selectedIds: newSelectedIds,
  dataSource: this.state.dataSource.cloneWithRows(JSON.parse(JSON.stringify(newDataSource))),
});

注意：一定要将你的newDataSource进行JSON.parse(JSON.stringify(newDataSource))处理。

如果朋友们遇到更多的坑了请在下方评论，笔者如果也遇到过会告诉你解决方案，如果没遇到过会陪你一起踩坑~