传递 props 时，我应该将整个对象传递给子组件，还是应该首先在父组件中单独创建 props，然后将这些 props 传递给子组件？
传递整个对象：
<InnerComponent object={object} />
单独创建首先需要的props：
<InnerComponent name={object.name} image={object.image} />
哪个是首选，如果取决于，我应该使用什么作为衡量标准？
React props：我应该传递对象还是它的属性？它有很大的不同吗？
IT技术
javascript
reactjs
react-props
2021-04-21 13:46:17
6个回答
根据最小权限原则，这是一个正确的方法：
<InnerComponent name={object.name} image={object.image} />
这限制InnerComponent了意外修改原始对象或访问不适合它的属性。
或者，可以从原始对象中选取属性并作为props传递：
<InnerComponent {...pick(object, 'name', 'image')} />
如果有许多难以列出的属性，那么可能只有一个 prop 接受一个对象：
<InnerComponent object={pick(object, 'name', 'image')} />
你应该更喜欢你的第二个例子，单独传递props。在那里，您可以明确地看到传递了哪些参数，并可以快速与预期的参数进行比较。这使得人们之间的协作更加容易，并使应用程序的状态更加清晰。
如果不需要，我个人会尽量避免传递整个对象。这就像扩展运算符，其中可以有任何属性，并且在更大的范围内调试要困难得多。
对纯 react 的一些添加，例如prop-types或typescript可能有助于在大型应用程序中定义清晰和预期的属性
由于 JavaScript 没有类型注释，因此第二个选择会更可取，正如@mstruebing 所述，代码将更易于维护。但是，如果您使用的是 TypeScript React（支持类型注释），那么两种选择都将同样清晰。但请记住，第一个选择促进了视图和模型之间的紧密耦合，这允许快速开发，因为您不必输入太多；虽然第二个选择可能会减慢开发速度，但您对未来的变化有更高的灵活性和容忍度。
所以，衡量标准是：如果你更喜欢开发速度而不是灵活性，那么选择 1；如果您更喜欢灵活性而不是开发速度，请选择选项 2。
附加说明
好的，我们什么时候应该优先考虑开发速度而不是灵活性？这是我的 2 美分。
如果您的项目是为了短期使用（例如开发一个仅用于在选举期间收集选票的应用程序），那么请选择第一选择。
如果您的项目旨在长期使用（例如在线银行交易门户），您应该选择第二个。
将多个 props 传递给子组件是将 props 传递给子组件的首选方式。这将帮助您跟踪子组件中应用程序的状态。此外，请随意使用该prop-typesmodule。它的作用类似于 Java 中的泛型，并为传入的 props 提供类型安全性。
如果您没有使用对象中的所有属性，最好单独传递所需的属性，因为当Child组件PureComponent处于使用状态时它可以帮助性能优化shouldComponentUpdate。在这种情况下，只有当Child组件使用的 props发生变化时，它才会重新渲染，而不会在对象中未使用的属性发生变化时重新渲染。
但是，如果您正在使用对象中的所有属性，那么如果您将对象作为props传递，只要您正确处理了对象的突变，就不会产生太大的不同事件。