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

【问题标题】：Best practice to send object array to component in React?将对象数组发送到 React 中的组件的最佳实践？
【发布时间】：2020-01-17 09:38:46
【问题描述】：

在 React 中，假设您有一个要显示列表的组件。

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

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

例如：

<ListComponent data={objectArray} />

对比

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

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

谢谢

编辑：澄清一下，我的意思是对象的 ID 字段中的键（不是说 React 用于在渲染中识别的键）。

问题与[https://redux.js.org/basics/reducers#note-on-relationships]:

有关

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

那么，将字典传递给组件（例如 todosById）加上第二个数组（仅包含要显示的键/ID）与仅包含对象的子集数组相比，是否更好？

考虑到这些对象可能会被其他组件更新。

【问题讨论】：

我不太明白这个问题。如果您需要一个数组，请传递一个数组。我没有看到传递一个已经有键的对象有任何好处，和这些键的附加数组。最终，这将取决于您需要如何准确地使用这些数据。如果你的意思是 React 想要渲染的键中的“键”，我看不出有任何令人信服的理由来预生成它们——这并不意味着没有任何令人信服的理由（就像它是否非常昂贵或其他什么？）但我从未见过那个 IRL。

标签： reactjs redux react-redux

【解决方案1】：

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

【讨论】：

【解决方案2】：

请参阅List and Keys。

只是：

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

【讨论】：

【解决方案3】：

如果keyArray 不是ListComponent 将使用的道具，那么如果您采用第二种方法，那就有点过头了。如果您实现ListComponent 以映射作为道具传递的数组，则第一种方法将更适合。 Array.prototype.map 开箱即用的函数支持键参数，因此您不需要传递额外的键数组来仅用于显示目的，除非它们是前端逻辑所依赖的。

【讨论】：