Javascript 道具的传递

下面是我在React组件中的JSX代码，该组件运行良好，目前正在使用中，但在大多数React博客文章中，它们也在对对象进行结构化。我的问题是-我们是否有任何额外的好处将代码修改为版本2，或者这是很好的

第一版（目前正在使用）-

const cartimes=（{items}）=>items.length？items.map（（x，i）=>(
{x.title}
{x.shortDesc}
+
-
X
)) : []

第二版-

const CartItems = ({ items }) => items.length ? items.map((x, i) => {
    const {
        id,
        url,
        altText,
        title,
        shortDesc
    } = x;
    return (
    <div key={id} className={`cart-item-${i}`}>
      <div className="card ">
        <div className="cart-item-img">
            <img src={url} alt={altText} className="img" />
        </div>
        <div className="cart-item-desc">
            <h3 className="title">{title}</h3>
            <p className="text">{shortDesc}</p>
        </div>
        <div className="cart-item-action">
            <button className="add">+</button>
            <button className="subtract">-</button>
            <button className="remove">X</button>
        </div>
      </div>
    </div>)
    }) : []

const cartimes=（{items}）=>items.length？items.map（（x，i）=>{
常数{
身份证件
网址，
altText，
标题
shortDesc
}=x；
返回(
{title}
{shortDesc}
+
-
X
)
}) : []

好处主要是美观和主观的，因此如果你更喜欢第一个，你会有更大的力量，没有任何东西表明你需要改变它

---

我个人对您发布的两个代码段的看法是：我倾向于避免从箭头函数直接返回，因为我经常需要添加日志或其他内容，并且必须来回转换最终会影响您。但这和解构关系不大，除了解构强制您拥有函数体和显式返回。

我认为对象的解构是为了在不访问该对象的情况下使用该对象的每个属性。你不必每次都写user.id、user.name，你可以只使用id和name，因此我个人发现，分解有助于准确地了解组件需要什么道具以及它们的形状，而不是查找每个用法。这是100%的偏好，或者是你的团队决定的。试着坚持一种模式。就我个人而言，我更喜欢能够快速看到值来自何处，所以我不会破坏道具或状态。这样，我可以看到正在使用的值，并立即知道它是一个属性、状态或局部变量。但我知道有很多开发者喜欢完全相反的方式。他们更喜欢使用分解结构作为组件的一种文档。您可以立即看到组件工作所需的内容。只需选择一个并坚持使用它。我宁愿使用

prop-types

，而不是将其分解为组件规范，因为它更进一步，还通知开发人员所需的道具类型。

const CartItems = ({ items }) => items.length ? items.map((x, i) => {
    const {
        id,
        url,
        altText,
        title,
        shortDesc
    } = x;
    return (
    <div key={id} className={`cart-item-${i}`}>
      <div className="card ">
        <div className="cart-item-img">
            <img src={url} alt={altText} className="img" />
        </div>
        <div className="cart-item-desc">
            <h3 className="title">{title}</h3>
            <p className="text">{shortDesc}</p>
        </div>
        <div className="cart-item-action">
            <button className="add">+</button>
            <button className="subtract">-</button>
            <button className="remove">X</button>
        </div>
      </div>
    </div>)
    }) : []