Операторы spread и rest в React

31 марта 2023

Если вы работали с ванильным JavaScript или React, то могли видеть в коде три точки — .... Так обозначаются операторы spread и rest. Они используют одинаковый синтаксис, но решают разные задачи.

Что такое оператор spread

Оператор spread — это конструкция в JavaScript, которая позволяет передавать элементы массива или свойства объекта в виде отдельных аргументов.

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

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

С помощью оператора spread мы можем передать пропсы из объекта myProps в компонент MyComponent:

const myProps = { title: "Заголовок", description: "Описание" };

function App() {
  return <MyComponent {...myProps} />;
}

Что такое оператор rest

Оператор rest — это синтаксическая конструкция в JavaScript, которая позволяет собирать оставшиеся элементы массива в другой массив или собирать оставшиеся свойства объекта в другой объект. Он всегда идёт последним и может использоваться только раз при одной операции «распаковки» массива или объекта.

В React оператор rest используется для работы с пропсами в компонентах. Например, с его помощью можно извлекать только нужные свойства из объекта пропсов и сохранять оставшиеся свойства в отдельный объект. Затем с помощью оператора spread мы можем передать оставшиеся пропсы в дочерние компоненты.

function MyComponent({ title, description, ...childProps }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
      <ChildComponent {...childProps} />
    </div>
  );
}

На первой строке мы используем оператор rest — { title, description, ...childProps }. Он помогает сохранить все пропсы, кроме title и description, в отдельный объект. А на шестой строке мы передаём их в ChildComponent с помощью spread.

Как отличить spread от rest

Операторы легко отличить. Когда синтаксис ... используется для «распаковки» элементов массива или объекта в отдельные аргументы — это spread. А если три точки используются для сбора оставшихся аргументов в массив или объект — это оператор rest.

☝ Научитесь работать с React на нашем курсе «Вёрстка React-компонентов».