共计 5051 个字符，预计需要花费 13 分钟才能阅读完成。
引言
最近在做社交网站开发，过程中须要用到三种组件：告诉列表组件、聊天列表组件和虚构列表组件。这三种组件都是社交网站必备的，当初把我在开发中遇到的问题以及代码全副分享给大家，心愿对大家有所帮忙。
告诉列表
咱们在应用社交网站的过程中会发现他们通常会应用下拉告诉展示告诉列表数据，这种就是当初要介绍的告诉列表，如图所示：
首先咱们先来介绍下告诉下拉列表的工作原理：
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 在一起的。
私信列表
私信列表就比拟非凡了，大家都用过微信，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 | |
| ] | |
| } |
这样就能解决分页数据反复问题以及合并问题了。
虚构列表
总结
援用
