Reactjs 将对象数组发送到React中的组件的最佳实践？

在React中，假设有一个组件将显示一个列表

将列表传递给组件时，哪种方法更符合React/Redux

传递一个对象数组

仅传递一个键数组，外加一个映射（字典）以查找对象

e、 g:

vs

请考虑性能、可重用性、可接受的约定和测试。

谢谢

编辑： 为了澄清，我指的是对象ID字段中的键（而不是在渲染中用于标识的键）

这个问题与[：

在更复杂的应用程序中，您需要不同的实体相互引用。我们建议您将您的状态保持为 尽可能规范化，无任何嵌套。将对象中的每个实体以ID作为键存储，并使用ID从中引用它 其他实体或列表…例如，保留 todosById:{id->todo}和todos:状态内的数组 在一个真正的应用程序中会是一个更好的主意

那么，将该字典传递给组件（例如todosById）加上第二个数组（仅显示键/id）与使用仅作为对象的子集数组相比，是否更好呢

---

请考虑这些对象可能正在被其他组件更新。

第一个是放置对象数组的正确方法。您只发送一个属性，而不是两个属性。

请参阅

简单地说就是：

function ListComponent(props) {
  const listItems = props.items.map((item) => // iterate over items array prop
    <ListItem key={item.key} value={item.value} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const itemsArray = [...];
<ListComponent items={itemsArray} /> // pass array as prop

函数列表组件（道具）{
const listItems=props.items.map（（item）=>//迭代items数组prop
);
返回(

{listItems}

);
}
const itemsArray=[…]；
//将阵列作为道具传递

如果

keyArray

不是

ListComponent

将要使用的道具，那么如果您遵循第二种方法，那么这只是一种过火的行为。如果您实现

ListComponent

来映射作为道具传递的数组，那么第一种方法将更适合。

---

Array.prototype.map

函数开箱即用支持一个键参数，因此你不需要为了显示目的而传递一个额外的键数组，除非它们是前端逻辑所依赖的东西。

我不太理解这个问题。如果你需要一个数组，就传递一个数组。我看不到传递对象的任何好处，而h已经有了密钥，还有一个额外的密钥数组。最终这将取决于您需要如何准确地使用数据。如果您指的是用于渲染的密钥中的“密钥”，那么我看不出有任何令人信服的理由来预生成它们——这并不意味着没有任何令人信服的理由（比如，它是否非常昂贵或什么的？）但我从未见过那个IRL。

<ListComponent keyArray={keyArray} dictionary={mapOfKeyToObject} />

function ListComponent(props) {
  const listItems = props.items.map((item) => // iterate over items array prop
    <ListItem key={item.key} value={item.value} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const itemsArray = [...];
<ListComponent items={itemsArray} /> // pass array as prop