使用Ajax數據的設計模式。什麼是正確的方式？

我正在開發一個反應應用程序，我在這裏大量使用從AJAX請求獲得的數據。比方說，我可以在myserver.com/people.json檢索數據，該數據將如下所示：使用Ajax數據的設計模式。什麼是正確的方式？

var peopleList = [ 
    {id:0, name: "John Smith", age: 30}, 
    {id:1, name: "Jane Green", age: 19}, 
    {id:2, name: "Bob Dylan", age: 69}, 
    ... 
]

的people名單可能最終數量10000萬至10萬，我將永遠不會顯示完整的列表，而是一些子表和個別實例通過id進行標識。

我的問題不是顯示或查詢大的順序數據集，所以分頁可能是不相關的。就拿一些數據，我需要顯示：

var group = { name: "Woodworking", people_set: [12, 4, 678, 90] } 

/* Should come out like: 

WOODWORKING 
- Peter Johnson 
- Anna Holland 
- David Green 
- Erica Davis 
*/

該帖子已被刪節，以更好地反映可用的選項和作者的推理

我看到五個可能的方式來處理這個：

1.製作和個人AJAX調用每一個實例需要顯示的時間

因此撥打myserver.com/people/<id>.json只需檢索所需的數據。我擔心這可能會導致服務器出現很多小的請求，並且需要很多異步代碼才能混入我的代碼中。

2.製作一個完整的AJAX調用和迭代陣列每次

呼叫是由在初始化和數據被保存在存儲器中作爲一個陣列（見上文）。每次需要一個實例時，迭代該數組，直到找到一個匹配值爲.id的對象。

3.如前面的，但查找從物體

我變換陣列爲對象，其中該字符串化鍵的ID來查找匹配。這可能會更快？

{ "0": { name: "John Smith", age: 30}, 
    "1": { name: "Jane Green", age: 19}, 
    "2": { name: "Bob Dylan", age: 69}, 
    ... 
}

4.我信任列表索引相匹配的ID

當我控制數據庫，我永遠不會從0查找可以刪除記錄，並保持ids的順序列表然後是簡單的：

peopleList[id]

這仍然似乎是一個高風險的做法作爲意外刪除主鍵將導致應用程序無法正常工作。

5.創建一個額外的indexArray快速查找索引

在創建peopleList，塑造其持有的ID的附加陣列：[0, 1, 4, ...]。通過在indexArray上使用indexOf()快速找到索引，並使用該索引從peopleList中檢索記錄。

// This would be the way to lookup a name 
peopleList[indexArray.indexOf(<id>)].name

討論和選擇

它看起來像方法1和4只是糟糕的設計。對於查找，方法2比3和5慢兩個數量級（！），因此如果大量使用查找應該避免。雖然3仍然稍快，但我決定去5，因爲保持陣列看起來更優雅。

This post地址選項2,3和4，並進行查找的基準比較。

來源

2017-02-27 Roy Prins

可能最好分頁/抵消這一點。如果需要，只請求一大羣50-100人並加載更多塊。 –

我更新了這個問題，以說明爲什麼分頁不是答案恕我直言。 –

能夠找到一個令人滿意的方法與一些進一步的研究，並更新了問題以反映這一點。

來源

2017-02-27 12:41:28

進行一次完整的AJAX調用並每次迭代該數組這裏是正確的選擇，如果我是你，我會將數據存儲在redux狀態樹中。

但是，這取決於你在哪裏存儲你的狀態數據。每次在組件裝入時使用Ajax調用的結果進行Ajax調用時，都必須將該數據存儲在某個狀態。因此，您有兩種選擇：a）可以將數據存儲在本地組件狀態中，該狀態將持續到該組件卸載爲止，並且在組件重新裝入時必須再次加載它，或者b）可以使用Redux存儲管理您的狀態數據，這將保持它的持久性。

來源

2017-02-27 11:39:16 eersteam

現在還沒有真正準備好進入Redux，因爲React是我現在可以咀嚼的所有東西。有沒有更快的迭代數組的方法，因爲你可以期待它的順序和密集的'ID'？如果你知道id非常接近結尾，那麼簡單地從0進行迭代似乎是天真的... –

我會將響應保留爲一個數組，因爲這有一些有用的方法，如地圖，過濾器和減少，你可以用來渲染你的jsx。

如果你可以從你的服務器做一個jsonp響應，它只發送一個值的選擇，這可能是最好的。它避免了可能下載10000行到只渲染100個，但一次獲得100個（或多個）不應該導致服務器過載。它可以是前端的fetch('/someApi?take=100&from=0')。

或者，如果你一次性得到整個列表，你可以使用array.slice(beginning, end)來取得你想要的部分並進行渲染。

render() { 
    const shownUsers = this.state.users.slice(this.state.from, this.state.from + 100); 
    return (<ul> 
     {shownUsers.map(user => { 
     const username = user && user.name 
     return <li>{username}</li> 
     } 
    </ul> 
    }

如果將數據保存爲數組和當前ID系統，則ID「應該」與數組索引相同。這可能會幫助您在/從數據庫中刪除某行時克服錯誤。數組方法可以優雅地處理一個空索引，只需記住以防禦方式查找數據。 const name = user && user.name將會避免cannot find 'name' of undefined錯誤。

來源

2017-02-27 11:46:28 spirift

使用Ajax數據的設計模式。什麼是正確的方式？

回答

相關問題