В чем разница между приведенными ниже кодами React? Какой из них наиболее эффективен или эффективен? Или они практически одинаковые?

Question

Я в настоящее время нахожусь в проекте и придумал два разных набора кодов, и мне было интересно, есть ли разница между ними.

ReactJS (последняя версия)

1.

columns.map(v => v.aggregate = (values) => values[0]);

2.

columns = columns.map( v => ({ 
            ...v,
            aggregate : (values) => values[0]
        }))

Ожидаемый результат:

const columns = [
    {
        Header: 'ID',
        accessor: 'empid',
        shown: true,
        width: 130
    }, {
        Header: 'Name',
        accessor: 'name',
        shown: true,
        aggregate: (values) => values[0],
        width: 130
    }, {
        Header: 'Age',
        accessor: 'age',
        shown: true,
        aggregate: (values) => values[0],
    }, {
        Header: 'Email',
        accessor: 'email',
        shown: true,
        aggregate: (values) => values[0],
        width: 150
    },  {
        Header: 'Birthday',
        accessor: 'birthday',
        shown: true,
        aggregate: (values) => values[0],
        width: 150
    }
];

Я добавлю это в компонент ReactTable со сводным агрегированием по id.

Answer 1

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