在 React 中将道具传递给组件的更好方法是什么？

Question

传递道具哪个更好？

将整个对象作为 props 传递？或
分开传递？例如 title="sample" description="sample desc"

我知道它的情况。但就动态、后端就绪（API 集成）和性能而言，您更喜欢哪一个？对不起，如果我描述得不好，但我相信你明白我的意思。

欢迎您提出所有正确的建议。谢谢！！

编辑：还有什么优缺点

Answer 1

在我看来，我更喜欢将整个对象作为道具传递。因为好用，想怎么变就怎么变。

Answer 2

我会说as objects会更好。如果你需要发送 API，我会是一种你可以轻松转换为 json 的包裹。传入一个对象也将其设置为标准命名约定。当作为单独的道具传递时，您可以灵活地重命名它们，但这可能会导致人为错误。如果您将其作为对象传递，则您从一开始就定义了命名并且您不会更改它。因此，当在多个组件中引用该对象时，您不必在您的 props

中传递它时引用您定义它的内容

Answer 3

让我们看看每个选项的 pros/cons，给定组件 User:

const User = ({name,lastName}) => <>...</>

破坏道具：

const props = {
  name: 'Jhon',
  lastName: 'Cena'
};

<User {...props}/>

优点

短

缺点

键必须匹配属性
容易出错，当存在组件不使用的键时可能会出现意外行为
没有自动完成和自动建议

const props = {
  name: 'Jhon',
  lastName: 'Cena',
  id: 325013213
};

// User component might be updated in future releases and might use id unexpectedly.
<User {...props}/>

传递命名道具

const props = {
  user: 'Jhon',
  lastName: 'Cena'
};

<User name={user} lastName={lastName}/>

优点

自动完成和自动建议
值不必与 prop 名称匹配（如 name={user}）
可维护

缺点

长语法
在许多道具上不可读
可重复（className={className}）

正在销毁命名道具

const props = {
  name: 'Jhon',
  lastName: 'Cena'
};

<User {...{ name,lastName }}/>

道具

自动完成和自动建议
可维护
可读

缺点

看起来和感觉都很老套

在我的代码库中，我正在尝试结合：

const props = {
  className: 'user',
  user: 'Jhon',
  lastName: 'Cena'
};

<User {...{className,lastName} name={user}/>

// Although you totally can write like this,
// I find it confusing
<User {...{className, name:user,lastName}/>

Answer 4

我想这取决于你的 React 组件需要什么。我通常更喜欢让我的组件尽可能干净（纯粹）并且只传递任何需要的东西作为道具。

我建议阅读 thinking in react and react components/props on the reacts.org website. Keeping in mind that in JS atomic values (strings, numbers, booleans, etc.) are passed by value and objects (arrays are objects too) are passed by reference (see here and here), passing an object means that you always run the risk of mutating the object in the child component, which directly contradicts the following strict rule: "All React components must act like pure functions with respect to their props." 上的操作指南。

编辑：也就是说，这仍然取决于您的要求。如果你坚持不改变传递的对象，应该没问题。

这应该为您提供了一个关于如何设计组件的相当好的指南。

在 React 中将道具传递给组件的更好方法是什么？

What is the better way for passing props to component in React?

javascript

reactjs

react-props

react-component

破坏道具：

优点

缺点

传递命名道具

优点

缺点

正在销毁命名道具

道具

缺点