Передача реквизита ReactJS

Question

Ниже приведен мой JSX-код в компоненте React, который работает нормально и в настоящее время используется, но в большинстве сообщений блога React они также деструктурируют объект. Мой вопрос - есть ли у нас какие-либо дополнительные преимущества от модификации кода до версии 2 или это нормально.

Первая версия (в настоящее время используется) -

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

2-я версия -

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>)
    }) : []

Answer 1

Преимущества в основном эстетичны c и субъективны, поэтому, если вы предпочитаете первое, вам больше возможностей и ничего, что говорит о том, что вам нужно его менять.

Мое личное мнение о двух фрагментах, которые вы размещено: я стараюсь избегать прямых возвратов от стрелочных функций, потому что мне часто нужно добавить журнал или что-то еще, и необходимость конвертировать туда и обратно в конечном итоге утомляет вас. Это не имеет ничего общего с деструктуризацией, кроме того, что деструктуризация заставляет вас иметь тело функции и явный возврат.