React中给组件传递道具的方法哪种比较好？

Question

传递道具哪种方式更好？

• 将整个对象作为道具传递，还是
• 例如 title="sample" description="sample desc"

我知道它的情况.但在动态，后端准备(API集成)和性能方面，你更喜欢哪一个呢?对不起，如果我描述得不好，但我相信你明白我的意思。

您的所有建议都是欢迎和正确的。谢谢！！。

编辑:另外有什么缺点和优点

Answer 1

让我们来看看每个选项的proscons，给定的组件。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}/>

优点

• 自动完成&自动建议。
• 值不必与道具名称相匹配（如 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 2

在我看来，我更喜欢把整个对象作为道具来传递。因为它很容易使用和转换任何你想要的东西。

Answer 3

我想说作为对象会更好。因为我会是一种包的东西，如果你需要发送过来的API，你可以很容易地转换为json。传递一个对象还可以把它设置成一个标准的命名惯例。当作为单独的道具传递时，你可以灵活地重命名它们，但这可能会导致人为错误。如果u以对象的形式传递，u从一开始就定义了命名，u不会改变它。因此，当在多个组件中引用该对象时，你不必参考你在道具中传递它时的定义。

Answer 4

我想这取决于你的React组件中需要什么。我一般喜欢让我的组件尽可能的干净（纯粹），只传递需要的东西作为道具。

我建议阅读 思考 和 反应元件道具 在reaks.org网站上。请记住，在JS中原子值（字符串、数字、booleans等）是通过value传递的，而对象（数组也是对象）是通过引用传递的(见此 和 此处)，传递一个对象意味着你总是有在子组件中突变对象的风险，这直接违背了下面的严格规则。"所有的React组件都必须像纯函数一样对待他们的道具。".

EDIT：说到这里，还是要看你的要求。如果你坚持不突变传递的对象，应该没问题。

这应该能给你一个相当好的指导，让你知道如何设计你的组件。