React-列表组件(通知列表、私信列表、虚拟列表)

引言

最近在做社交网站开发，过程中需要用到三种组件：通知列表组件、聊天列表组件和虚拟列表组件。这三种组件都是社交网站必备的，现在把我在开发中遇到的问题以及代码全部分享给大家，希望对大家有所帮助。

通知列表

我们在使用社交网站的过程中会发现他们通常会使用下拉通知展现通知列表数据，这种就是现在要介绍的通知列表，如图所示：
React-列表组件(通知列表、私信列表、虚拟列表)

首先我们先来介绍下通知下拉列表的工作原理：
1、点击通知按钮
2、查询列表数据并展现
3、向下拉滚动条过程中分页加载数据，并把数据合并到列表中，直到数据全部加载完

现在看看我们如何制作吧。首先，我们需要使用一个React插件：InfiniteScroll，废话不多说直接上代码：

<div id="scrollableDiv" className={styles.noticeBody}>
              {
                loading&&page.pageNum === 1? <Loading />:<InfiniteScroll
                  //注意：dataLength={remindList.length}要写remindList.length不能写成remindListTotal,切记！
                    dataLength={remindList.length}
                    next={loadMoreData}
                    height={413}
                    hasMore={remindList.length < remindListTotal}
                    loader={<Loading/>}
                    scrollableTarget="scrollableDiv">
                  <List
                      split={false}
                      itemLayout="horizontal"
                      dataSource={remindList}
                      renderItem={item => (your list item in here)}
                  />
                </InfiniteScroll>
              }
            </div>

我们看一下上面的代码，首先我们要定义一个id=scrollableDiv的div，接着判断如果当前页码是1的话，则显示loading加载组件。

注意：因为InfiniteScroll组件，默认如果没有数据是不主动触发next对应的loadMoreData获取下一页数据的方法，所以最好我们打开下拉框的时候就主动去获取列表第一页的数据，在获取过程中我们可以先用loading效果展示给用户，目的是为了提升更好的体验，当然你也可以不用加！

loading&&page.pageNum === 1? <Loading />

现在，来看看这段代码：

<InfiniteScroll
                  //注意：dataLength={remindList.length}要写remindList.length不能写成remindListTotal,切记！
                    dataLength={remindList.length}
                    next={loadMoreData}
                    height={413}
                    hasMore={remindList.length < remindListTotal}
                    loader={<Loading/>}
                    scrollableTarget="scrollableDiv">
                  <List
                      split={false}
                      itemLayout="horizontal"
                      dataSource={remindList}
                      renderItem={item => (your list item in here)}
                  />
                </InfiniteScroll>

不知道大家有没有看InfiniteScroll文档上面的代码，如果没有的话，我这里就简单介绍一下，并且把开发过程中遇到的问题给大家点明一下防止入坑。
dataLength={remindList.length}表示当前数据长度
next={loadMoreData}表示获取下一页数据的方法，它会随着滚动条的滚动自动触发的
hasMore={remindList.length < remindListTotal}表示什么时候显示loading效果
loader={<Loading/>}表示loading效果组件
scrollableTarget表示它是依赖于id=scrollableTarget的div的

注意：1、这里需要注意的是dataLength应该是当前列表的长度，否则滚动条滚动到列表底部的时候不会触发获取下一页数据的方法loadMoreData
2、因为下拉列表滚动加载过程中，列表数据源remindList是一直增加的，它是把每页的数据源merge在一起的。

私信列表

React-列表组件(通知列表、私信列表、虚拟列表)
私信列表就比较特殊了，大家都用过微信，QQ的，它的聊天记录是向上滚动加载，跟我们的通知下拉列表刚好相反，庆幸的是InfiniteScroll组件也提供该功能，直接上代码：

<div className={styles.chatList} id="scrollableDiv" ref={dom}>
            <InfiniteScroll
              //注意：dataLength={remindList.length}要写remindList.length不能写成remindListTotal,切记！
              dataLength={chatList.length}
              next={getCurrentData}
              hasMore={showChatListLoading}
              loader={<Loading/>}
              style={{
                display: "flex",
                flexDirection: "column-reverse"
              }}
              scrollableTarget="scrollableDiv"
              inverse={true}>
                your list item in here
            </InfiniteScroll>
          </div>

跟之前一样，我们来分析下这段代码，因为是滚动条向上滚动加载，所以我们要把loading放置在顶部，所以要加上inverse={true}，同时还要设置两个样式：
样式一、

style={{
    display: "flex",
    flexDirection: "column-reverse"
  }}

样式二、

.chatList{
  height: calc(100vh - 186px);
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  overflow-anchor: none;
}

这样就完成了反向上拉加载分页数据了，其它属性跟上面大同小异这里就不过多描述了，不过要注意几个问题：

注意：1、我在向上滚动的时候分页也成功了，也合并到列表中，可是滚动条一直在顶部，看过qq和微信的同学应该都知道，向上滚动加载的时候，滚动条应该在当前聊天记录上，而不是在最顶部，然后在网上搜索才知道，只要在父节点上加上这个代码就可以了：overflow-anchor: none;
2、聊天记录的列表跟下拉通知列表数据也是相似的，每次向上滚动的时候我们都会合并到chatList(暂定为聊天记录列表名)中，但是有一点不一样，我可以通过输入聊天内容并展现到列表中，通知下拉可是没有输入展现功能，这点非常重要，因为我们会遇到一个非常棘手的问题：如何正确合并数据？以及合并数据之后分页查询重复问题？
正确合并数据：估计好多小伙伴已经想到了，后台把数据推送给前端之后，直接concat到chatList中(注意不是分页查询，因为那样页面会有闪动的不好体验)，这也没问题
分页查询重复问题：我们来看看什么是分页查询重复问题，这里有篇文章大家可以看看，于是我们使用了上面第2种解决方案。

解决分页查询重复问题

解决思路2
请求第1页时记录第1条数据(即最新的那条)的写入时间, 然后后面查询第2,3,4...页数据, 把记录的写入时间作为参数, 然后在sql语句中做限制
例如查询第2页, 设置写入时间小于等于2019-05-15 19:31:59, 这样即使有新数据插入, 也不在我们本次分页查询的范围内.
select * from table1 where write_time <=1557919919000 order by write_time desc limit 5,5

既然我们已经知道了如何解决，下面给出具体步骤以及代码：

1、当后台推送数据给前端的时候，我们先把数据合并到chatList中，并给个标识type=websocket
2、当用户向上滚动的时候，我们可以通过findIndex拿到这个type=websocket的数据的创建时间，通过分页接口传递给后台
3、后台返回数据之后我们再合并到chatList中

分页代码：

export const getMessages = createAsyncThunk('notify/getMessages', async (params, thunkAPI) => {
  try {
    const notify = thunkAPI.getState().notify
    if (notify.chatListPage.pageNum > 1) {
      // 找到第1个type=websocket的数据，然后赋值给flagCreatedTime即可
      // 为什么找到第1个？因为list中新加的websocket数据是从尾部开始加的，所以只要从索引0找到到最近一个type=websocket就是从这个时间开始算的，而不是最后一个
      const i = notify.chatList.findIndex(item => item.type === 'websocket')
      if (i > -1) {
        params.flagCreatedTime = notify.chatList[i].createdDt
      }
    }


    const res = await axios.post(`/notify/crud/messages/getMessages`, {
      dialogId: params.dialogId,
      pageNum: params.pageNum,
      pageSize: params.pageSize,
      flagCreatedTime: params.flagCreatedTime
    });
    return res.data
  } catch (error) {
    return thunkAPI.rejectWithValue({errorMsg: error.message});
  }
});

分页方法的回调：

[getMessages.fulfilled]:(state, action) => {
    if (action.payload.data) {
      // 获取总数
      const total = action.payload.data.total
      state.chatListPage = {
        pageSize: action.payload.data.pageSize,
        pageNum: action.payload.data.pageNum,
        total: action.payload.data.total
      }

      const rows = action.payload.data.rows.reverse()

      // 这里做这个判断是因为react18 useeffect会执行两次，所以我根据Pagenum判断是否要合并以避免重复合并问题
      if (action.payload.data.pageNum > 2) {
        state.chatList = [
          ...rows,
          ...state.chatList
        ]
      } else {
        state.chatList = rows
      }
      // 设置是否要分页加载，InfiniteScroll组件的hasMore属性会用到

      state.showChatListLoading = state.chatList.length < total
        // 当pageNum是第1页并且总数据还不到pageSize，说明根本没分页的必要
        && !(total<state.chatListPage.pageSize && state.chatListPage.pageNum === 1)
      // state.loadingMsg = false;
    }
  },

合并的代码：

// 接收消息并合并到chatList消息列表中
concatMessageInChatList: (state, action) => {
  if (action.payload.length > 0) {
    action.payload.forEach(item => {
      item.type = 'websocket';
    })
  }
  state.chatList = [
    ...state.chatList,
    ...action.payload
  ]
}

这样就能解决分页数据重复问题以及合并问题了。

虚拟列表

什么是虚拟列表？

我们上面谈到了通知下拉列表，聊天向上拉列表，他们都有一个共同点，就是随着滚动加载我们往列表中合并的数据越来越多，html中的dom元素也是断累加的，如下所示：
React-列表组件(通知列表、私信列表、虚拟列表)

而虚拟列表的意思是不管你有多少条数据，每次html中的列表元素只展示固定的条数，虽然数据源仍然是合并的，但是html的dom元素只显示固定的几条，如下所示：
React-列表组件(通知列表、私信列表、虚拟列表)

比如上面的列表，不管你是向上滚动还是向下滚动都只显示这6条，这就是虚拟列表，目的也是为了减少dom元素的渲染尤其是大量数据的场景下尤其有效，比如：微博、facebook、twitter等等。
React-列表组件(通知列表、私信列表、虚拟列表)

如何使用虚拟列表？

首先，我们来认识一个插件：react-virtuoso,这个插件非常厉害，提供的功能也非常全面，感兴趣的小伙伴可以看看，废话不多说，直接上代码：

<Virtuoso
  useWindowScroll
  ref={virtuosoRef}
  data={latestNews}
  context={{ abc: loadingData }}
  components={{Footer: ({ height, index, context: { abc }}) => {
      return <>
        {
          !abc&&latestNews.length===0?<div className={styles.empty}>
            <span className={styles.tip}>暂无数据</span>
            <p className={styles.desc}>快去添加好友吧</p>
          </div>:null
        }
        <div style={{
          height: '400px',
          display: 'flex',
          alignItems: 'flex-start',
          justifyContent: 'center',
          paddingTop: '100px'
        }}>
          {abc ? <Spin indicator={<LoadingOutlined
            style={{
              fontSize: 36,
            }}
            spin
          />}/> : null}
        </div>
      </>
    }}}
  overscan={20}
  endReached={loadMore}
  itemContent={(index, item) => (
    your item in here 
  )}
/>

还是先带大家看看这个组件的相关属性吧。

useWindowScroll表示使用window级别滚动条，而不是某个dom里面的滚动条
ref={virtuosoRef}这个不用多说了吧，react自带的功能
data={latestNews}表示列表数据源，注意虽然是虚拟列表，但是数据源仍然是合并的
context={{ abc: loadingData }}表示定义全局变量，如果你需要把useState或者useRef值传递到Virtuoso组件中需要定义变量值，否则你在组件中是不能使用的，这个要注意一下
components={{Footer: ({ height, index, context: { abc }}) =>表示自定义底部组件ReactNode，里面的context: { abc }就是我们上面定义的在这里就用到了
overscan={20}表示设置该属性以使组件“chunk”在滚动上呈现新项目。该属性会导致组件渲染的项目多于所需的项目，但会减少滚动时的重新渲染
endReached={loadMore}表示滚动到页面底部的时候触发获取下一页数据的方法
itemContent={(index, item) =>表示列表项渲染的ReactNode

注意：1、使用Virtuoso组件，并且设置useWindowScroll，目的是为了在整个页面上面滚动
2、使用context，传递数据，否则不能直接获取到context数据
3、使用virtuosoRef可以控制滚动条位置

这样就完成了虚拟列表的功能了，这里再次提醒一下react-virtuoso组件提供了好多丰富的功能，像上面的通知列表、聊天列表其实都可以使用react-virtuoso组件，只不过感觉数据量不大的场景下使用react-infinite-scroll-component组件还是满方便的，主要还是看大家使用场景和需求了。

总结

1、要理解向上滚动和向下滚动加载的原理
2、其实还有一种移动端解决方案：当滚动条在顶部的时候向下拉之后也会重新加载数据，跟滚动条滚动到顶部重新加载数据的区别在于有个向下拉的动作，同样的使用react-infinite-scroll-component组件可以完成这个功能。
3、虚拟列表的使用场景是在大批数量级的情况下使用，极大减少了dom的渲染减轻浏览器压力。