React props：我应该传递对象或其属性吗？有什么区别吗？

Question

传递道具时，应该将整个对象传递到子组件中，还是应该先在父组件中单独创建道具，然后再将这些道具传递给子组件？

传递整个对象：

<InnerComponent object={object} />

单独创建首先需要的道具：

<InnerComponent name={object.name} image={object.image} />

哪一个是首选，并且取决于它，我应该使用哪个作为量规？

Answer 1

根据最小特权原则，这是一个正确的方法：

<InnerComponent name={object.name} image={object.image} />

这限制InnerComponent了意外修改原始对象或访问不适合它的属性。

或者，可以从原始对象中选取属性并作为道具传递：

<InnerComponent {...pick(object, 'name', 'image')} />

如果有许多难以列出的属性，那么可能只有一个 prop 接受一个对象：

<InnerComponent object={pick(object, 'name', 'image')} />

Answer 2

由于 JavaScript 没有类型注释，因此第二个选择会更可取，正如@mstruebing 所述，代码将更易于维护。但是，如果您使用的是 TypeScript React（支持类型注释），那么两种选择都将同样清晰。但请记住，第一个选择促进了视图和模型之间的紧密耦合，这允许快速开发，因为您不必输入太多；虽然第二个选择可能会减慢开发速度，但您对未来的变化有更高的灵活性和容忍度。

所以，衡量标准是：如果你更喜欢开发速度而不是灵活性，那么选择 1；如果您更喜欢灵活性而不是开发速度，请选择选项 2。

附加说明

好的，我们什么时候应该优先考虑开发速度而不是灵活性？这是我的 2 美分。

如果您的项目是为了短期使用（例如开发一个仅用于在选举期间收集选票的应用程序），那么请选择第一选择。

如果您的项目旨在长期使用（例如在线银行交易门户），您应该选择第二个。

Answer 3

您应该更喜欢第二个示例，以单独传递道具。在这里，您可以清楚地看到传递了哪些参数，并可以与期望的参数快速比较。这使人们之间的协作更加容易，并使应用程序的状态更加清晰。

我个人试图避免传递不需要的整个对象。就像散布运算符一样，里面可以有任何属性，在更大的范围内调试起来要困难得多。

一些纯反应的添加，例如prop-types或typescript可能有助于在大型应用程序中定义清晰和预期的属性