0

Есть React код:

import React, { Component } from 'react';


class App extends Component {
  state={
    counter: 0,
  }
  click = ()=>{
    this.setState((prevState)=>({
      counter: ++prevState.counter
    }))
  }
  render(){
    const {counter} = this.state;
    return (
      <div>{counter}
      <button onClick={this.click}> click</button>
      </div>
    );
  }
}

export default App;

Если в методе click убрать пару скобок, которая содержит({ counter: ++prevState.counter }) , то перестает работать. Почему это происходит, помню читал статью о роли скобок, но никак не могу найти...

2 ответа 2

4

В данном примере роль скобок - разделение многозначного синтаксиса.

Как вы знаете, фигурные скобки применяются в ES6 для описания двух сущностей: структур данных и блоков кода.

В предлагаемой нотации сокращенного описания функций предполагается по стандарту, что может быть два варианта сокращенного определения функций:

  1. (ПАРАМЕТЕР[,...]) => <БЛОК КОДА>
  2. (ПАРАМЕТЕР[,...]) => <ВЫРАЖЕНИЕ>

При этом, первый вариант считается приоритетным, а второй преобразуется из вида

(params[,...]) => <ВЫРАЖЕНИЕ>

в вид

function (params[,...]){
    return <ВЫРАЖЕНИЕ>;
}

Так как при разборе кода блок кода имеет приоритет, то конструкция

(a) => {counter: ++a.counter}

воспринимается как код:

function (a){
  counter: ++a.counter
}

Эта функция возвращает undefined так как не содержит оператор return.

В этом легко убедиться при помощи онлайнового транслятора ES6 в ES5, который доступен по ссылке

Если же мы в коде специально уже транслятору сообщаем, что это выражение, а не блок кода (то есть ставим скобки - как признак приоритета арифметико-логической операции) то транслятор обрабатывает этот запрос как выражение и обрамляет фигурными скобками и оператором return. То есть из

(a) => ({counter: ++a.counter})

делает:

function (a){
  return {counter: ++a.counter}
}

В чем не трудно убедиться, перейдя по ссылке

Более подробно можно почитать здесь

1

Лямбда функции имеют две формы:

  1. краткая: (args) => expression в данном случае принимаются параметры и возвращается результат вычисления expresison

  2. полная: (args) => {statements} в данном случае принимаются параметры и вычисляются statements внутри фигурных скобок.

краткую форму можно выразить через полную:

(args) => expression <=> (args) => {return expression}


В данном случае возвращается литерал объекта. И если опустить круглые скобки тело функции будет рассмотрено как блок кода, а не литерал объекта.

var t = 1;
var func = () => {
  counter: t++
};

console.log(func(),t);

var func2 = () => ({
  counter: t++
});

console.log(func2(), t);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.