Javascript 用于处理Ajax数据的设计模式。正确的方法是什么？

我正在开发一个react应用程序，在这个应用程序中，我大量使用从AJAX请求中获得的数据。假设我可以在

myserver.com/people.json

检索数据，其中的数据如下所示：

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到100000之间，我永远不会显示完整的列表，而是通过

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/.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匹配

当我控制数据库时，我将永远不会删除记录并将

ids

作为0中的顺序列表进行维护。然后可以简单地进行查找：

peopleList[id]

这似乎仍然是一种高风险的方法，因为无意中删除主键将导致应用程序无法正常运行

5。创建额外的索引数组以快速查找索引

在创建

人物列表时，创建一个包含ID的附加数组：
[0，1，4，…]
。使用indexArray上的
indexOf（）
快速查找索引，并使用该索引从peopleList中检索记录

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

//这是查找名称的方法
peopleList[indexArray.indexOf（）]名称

讨论和选择

看起来方法
1
和
4
都是糟糕的设计。对于查找，方法
2
比
3
和
5
慢两个数量级（！），因此如果您大量使用查找，应避免使用。虽然
3
仍然稍微快一点，但我决定选择
5
，因为保留数组似乎更优雅

处理选项
2
、
3
和
4
，并对查找进行基准比较。
每次选择正确时，进行一次完整的AJAX调用并迭代数组，如果我是您，我会将数据存储在redux状态树中

但是，这取决于存储状态数据的位置。每当您在使用Ajax调用结果的组件装载时进行Ajax调用时，您必须将该数据存储在某个状态中。因此，您有两种选择，a）您可以在本地组件状态中存储该数据，该状态将持续到该组件卸载，并且您必须在组件重新装载时再次加载该数据，或者b）您可以使用Redux store来管理状态数据，这将使其保持持久性
 我将把响应保留为一个数组，因为它有一些有用的方法，如map、filter和reduce，您可以使用这些方法来渲染jsx

如果您可以在服务器上执行jsonp响应，在服务器上只发送选择的值，那么这可能是最好的。它避免了潜在的下载10000行来只渲染100行，但一次获得100行（或多行）不会导致服务器过载。它可能类似于前端的
fetch（'/someApi？take=100&from=0'）

或者，如果您一次性获得整个列表，您可以使用
array.slice（开始，结束）
获取所需的部分并进行渲染

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>
   }

render（）{
const shownUsers=this.state.users.slice（this.state.from，this.state.from+100）；
返回（

{shownUsers.map（用户=>{
const username=user&&user.name
返回
{username}
}

}

如果将数据保留为数组和当前id系统，则id“应”与数组索引相同。这可能有助于克服从数据库中删除行时/如果从数据库中删除行时出现的错误。数组方法可以优雅地处理空索引，只需记住防御性地查找数据。
const name=user&&user.name
将避免
找不到未定义的
错误的“name”。
能够找到满意的结果通过一些进一步的研究和更新问题来反映这一点。
可能最好是分页/抵消这一点。只要求50-100人的一块，如果需要，加载更多的块。我更新了问题，以说明为什么分页不是问题的答案。我现在还没有真正准备好进入Redux，因为React是我现在能咀嚼的全部。我有没有一种更快的方法来迭代数组，因为您可以预期它对于
id
是有序且密集的？如果您知道id非常接近末尾，那么简单地从0开始迭代似乎很幼稚。。。