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。与之前一样，但从对象中查找

我将 Array 转换为一个对象，其中字符串化键与要查找的 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() 快速查找索引在 indexArray 上并使用该索引从 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 store 来管理你的状态数据，这将使它持久化。