Синтаксис скобок в React (({ count }) => ({ count: count + 1 }))

Question

Не понимаю этот синтаксис, встречал в setState:

this.setState (({ count }) => ({ count: count + 1 }))

А так же в функциональном компоненте:

const Link = ({ count }) => ({
    render: () => (
        ...
    )
})

Т.е. тот же аргумент count я понимаю, почему в фигурных скобках, получаем this.state и делаем деструктуризацию, но почему тело стрелочной функции обёрнуто в обычных и фигурных скобках?

На первый взгляд она будто бы возвращает объект, но зачем метод этого объекта написан через стрелочную функцию?

Answer 1

Это деструктуризация:

// допустим у Вас есть стейт
const [state, setState] = useState({ count: 0 })

// в обычном варианте    
// что бы получить count 
// из актуального состояния стейта
// мы делаем так
setState(prevState => ({ count: prevState.count + 1 }))

// или же мы можем сразу взять count
// задействуя деструктуризацию
// вот так
setState(({ count }) => ({ count: count + 1 }))

// с props все тоже самое
// обычный вариант    
const Link = props => <div>{props.count}</div>

// через деструктуризацию 
const Link = ({ count }) => <div>{count}</div>

По поводу функции:

const Link = ({ count }) => ({
    render: () => (
        ...
    )
})
// она возвращает объект с ключом render,
// значением которого является стрелочная функция

Answer 2

Тело стрелочной функции дополнительно обернуто в круглые скобки потому, что в противном случае фигурные скобки считались бы не литералом объекта, который нужно вернуть, а просто ограничением тела функции.

Например:

var first = () => {
  counter: 10
};

function firstFun() { // эквивалент функции выше
  counter: 10
}

var second = () => ({
  counter: 10
});

function secondFun() { // эквивалент функции выше
  return {
    counter: 10
  };
}
console.log(first());
console.log(firstFun());
console.log(second());
console.log(secondFun());

БЛОГ НА HUSL

Синтаксис скобок в React (({ count }) => ({ count: count + 1 }))

Ответы (2 шт):