Когда мне следует использовать фигурные скобки {} и круглые скобки () в React?

В начале своей карьеры при изучении синтаксиса React и ES6 JavaScript может возникнуть путаница, когда использовать фигурные скобки {}, а когда - круглые скобки ().

Как используются фигурные скобки {}

Фигурные скобки {} - это особый синтаксис JSX. Он используется для оценки выражения JavaScript во время компиляции. Выражение JavaScript может быть переменной, функцией, объектом или любым кодом, который преобразуется в значение.

Возьмем пример.

• Оценка переменной JavaScript

const yellowStyle={color: 'yellow'} 
<Star style={yellowStyle} />

что то же самое как

<Star style={{color: 'yellow'}} />

• Оценка функции или обработчика событий

class PopUp extends React.Component {
  // es7 way of setting default state
  state = {
    visible: true;
  }
  render() {
    return <Modal onClose={this._handleClose}/>;
  }
  _handleClose = () => {
    this.setState({ visible: false });
  }
}

Это не следует путать с методами класса в ES6, которые также используют фигурные скобки {}

class StarsComponent {
  constructor(size) {
    this.size = size;
  }
  // Curly braces are used to define a method body in a class
  get size() {
    return this.size;
  }
  
  // ReactJS library comes with a predefined render() method
  render() {
    return <div>*</div>;
  }
}

const stars = new StarsComponent(5);

console.log(stars.size); // 5

Как используются круглые скобки ()?

Круглые скобки используются в стрелочной функции для возврата объекта.

() => ({ name: 'Amanda' })  // Shorthand to return an object

Это эквивалентно:

() => {
   return { name : 'Amanda' }
}

Круглые скобки используются для группировки многострочных кодов в операторе JavaScript return, чтобы предотвратить автоматическую вставку точки с запятой в неправильное место.

Поговорим о некоторых основах.

В JavaScript нет необходимости добавлять точку с запятой. Механизм JavaScript автоматически вставляет точку с запятой при первой возможности в строке после оператора return. Если движок JavaScript помещает точку с запятой там, где ее не должно быть, ваш код не скомпилируется.

Давайте посмотрим на следующий код.

Нэй, это не компилируется.

class StarsComponent {
  constructor(size) {
    this.size = size;
  }
  
  render() {
    return <div>  // <--JavaScript engine inserts semicolon here
           *
           </div>
  }
}

Ура, это работает.

class StarsComponent {
  constructor(size) {
    this.size = size;
  }
  
  render() {
    return (<div> 
            *
            </div>) // <--JavaScript engine inserts semicolon here
  }
}

Почему? Когда вы помещаете открывающую скобку в одну строку с return:

return (

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

return (
    ... 
    ...
); <-- inserts semicolon at the end of parenthesis

Для однострочного оператора не нужно заключать его в квадратные скобки.

class StarsComponent {
  constructor(size) {
    this.size = size;
  }
  
  // Not required to wrap brackets around a single line of code
  render() {
    return <div>*</div>;
  }
}