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

Question

我正在开发一个 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的列表最终数量可能在 10,000 到 100,000 之间，我永远不会显示完整列表，而是通过 id 标识一些子列表和单个实例。 .

我的问题不是显示或查询大型连续数据集，因此分页可能无关紧要。以我需要显示的一些数据为例:

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

/* Should come out like:

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

这篇文章已被编辑，以更好地反射(reflect)可用选项和作者的推理

我看到四种五种可能的方法来解决这个问题:

<强>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 相匹配

当我控制数据库时，我永远不会删除记录并维护 ids作为从 0 开始的顺序列表。查找可以很简单:

peopleList[id]

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

<强>5。创建一个额外的indexArray来快速查找索引

创建 peopleList 后，创建一个包含 ids 的附加数组:[0, 1, 4, ...] 。使用 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 ，并对查找进行基准比较。

Answer 1

每次都进行一次完整的 AJAX 调用并迭代数组这是正确的选择，如果我是你，我会将我的数据存储在 redux 状态树中。

但是，这取决于您存储状态数据的位置。每次在安装使用该 Ajax 调用结果的组件时进行 Ajax 调用时，您都必须将该数据存储在某处的状态中。所以你有两种选择，a)你可以将该数据存储在本地组件状态中，该状态将持续到该组件卸载，并且当组件重新安装时你必须再次加载它，或者b)你可以使用 Redux 存储来管理你的状态数据，这将使其持久化。