引言
最近在做社交網站開發，過程中需要用到三種元件：通知列表元件、聊天列表元件和虛擬列表元件。這三種元件都是社交網站必備的，現在把我在開發中遇到的問題以及程式碼全部分享給大家，希望對大家有所幫助。
通知列表
我們在使用社交網站的過程中會發現他們通常會使用下拉通知展現通知列表資料，這種就是現在要介紹的通知列表，如圖所示：
首先我們先來介紹下通知下拉選單的工作原理：
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
]
}這樣就能解決分頁資料重複問題以及合併問題了。