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

问题描述 投票:1回答:3

传递道具哪种方式更好?

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

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

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

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

javascript reactjs react-props react-component
3个回答
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}/>

1
投票

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


1
投票

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


1
投票

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

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.