React 中的数组与键值对（映射/对象）

Posted 2023-02-22

【中文标题】React 中的数组与键值对（映射/对象）

【英文标题】：arrays vs key value pairs (Map/Object) in React

【发布时间】：2017-08-25 02:34:49

【问题描述】：

当表示一组唯一可识别的对象时，我经常纠结于是否应该在 React 中使用键值对数据结构或数组。

例如，假设我们希望一个组件接收一组消息。像这样建模它们有什么问题吗，

 message1: from:"bill" , to:"frank", 
 message2: from:"Jill" , to:"sammy"

或者类似于 ES6 map，我们应该使用这样的对象数组

[
 name:"message1" , from:"bill" , to:"frank", 
 name:"message2" , from:"Jill" , to:"sammy"
]

我想知道关于在 React 中使用键值数据结构是否有某种最佳实践。

【问题讨论】：

这取决于您正在执行的操作。您是否通过 id 查找对象？使用地图。您是否经常迭代对象？使用列表。两者都做？两者都用！

你会怎么做？您需要同步它们的状态，并有重复的数据。

对象被表示为参考。所以这样的事情可以按预期工作：var map = foo: , bar: ; var list = [map.foo, map.bar]; map.foo.baz = 42; console.log(list[0].baz);。地图和列表都引用了相同的对象。

如果我们正在迭代，我们会不会只使用 Map，因为它是可迭代的？

如果您不必执行任何其他操作，例如过滤或排序，那么可以，只使用 Map 就可以了。

【参考方案1】：

在我看来，最好使用对象，即使在使用数组时更容易列出/映射数据，在大多数情况下，您会想要编辑特定元素，并且以标识符为键的对象将有助于很多。

这提供了一些有用的细节：https://www.youtube.com/watch?v=aJxcVidE0I0&t=415s