Co jsou tři tečky (...) neboli operátor rozšíření v Reactu

Možná jste často viděli kód v Reactu, kde použili tři tečky ( ...) před proměnnou, jak je znázorněno níže:

<Component {...props} />

Tyto se v JavaScriptu nazývají operátory spreadů a v tomto článku uvidíme různé případy použití toho, jak lze operátory spreadů použít v React a JavaScript.

Předávání rekvizit pomocí operátoru šíření

Řekněme, že máte nazvanou komponentu Person a chcete předat tři různé vlastnosti, firstName, lastName a age. Tradičně bychom je předali, jak je uvedeno níže:

import React from "react"

export const Person = () => {
  const { firstName, lastName, age } = person
  return (
    <div>
      <p>
        Name :{firstName} {lastName}
      </p>
      <p>Age :{age}</p>
    </div>
  )
}

const App = () => {
  const person = { firstName: "John", lastName: "Doe", age: 32 }
  return (
    <Person
      firstName={person.firstName}
      lastName={person.lastName}
      age={person.age}
    />
  )
}

export default App

Všimněte si, že ke každé vlastnosti budeme přistupovat a zapisovat jednotlivě. S rostoucím počtem vlastností se kód stává objemným. Zde můžeme použít operátor spread k předání všech vlastností uvnitř objektu osoby, jak je znázorněno níže:

import React from "react"

export const Person = () => {
  const { firstName, lastName, age } = person
  return (
    <div>
      <p>
        Name :{firstName} {lastName}
      </p>
      <p>Age :{age}</p>
    </div>
  )
}

const App = () => {
  const person = { firstName: "John", lastName: "Doe", age: 32 }
  return <Person {...person} />
}

export default App

Pole a operátor rozšíření

Operátor rozprostření lze také použít k provádění různých operací pole

Vytvoření kopie pole

Položky pro pole můžeme zkopírovat do jiného pole pomocí operátoru spread, jak je znázorněno níže:

const arr1 = [1, 2, 3]
const arr2 = [...arr1]
arr2[2] = 4
console.log(arr1) // [1, 2, 3]
console.log(arr2) // [1, 2, 4]

Všimněte si, že původní pole nebude ovlivněno, když upravíme kopii pole. Všimněte si také, že provádí mělkou kopii, to znamená, že kopíruje pouze položky na nejvyšší úrovni podle hodnoty a všechny vnořené vlastnosti budou zkopírovány odkazem.

Kombinace 2 polí

Můžeme zkombinovat 2 pole a vytvořit nové pole, jak je uvedeno níže, pomocí operátorů spread:

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2]
console.log(arr3) // [1, 2, 3, 4, 5, 6]

Přidávání položek do pole

Při kopírování pole můžeme přidat prvek na začátek nebo na konec:

const arr1 = [1, 2, 3]
const arr2 = [0, ...arr1]
const arr3 = [...arr1, 4]
console.log(arr2) // [0, 1, 2, 3]
console.log(arr3) // [1, 2, 3, 4]

Předávání polí funkci

K předání pole funkci jako samostatných argumentů můžeme použít operátor spread:

const sum = (a, b, c) => {
  return a + b + c
}

const arr1 = [1, 2, 3]

sum(...arr1)

Operátor spread pro operace s objektem

Nyní se podívejme na různé operace s objekty, které lze provádět pomocí operátoru spread.

Kopírování položek objektu

Podobně jako u polí můžeme vytvořit mělkou kopii objektu:

const obj1 = { firstName: "John", lastName: "Doe", age: 32 }
const person = { ...obj1 }
console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32}

Spojení 2 objektů

Podobně jako u polí můžeme kombinovat 2 objekty, jak je uvedeno níže:

const obj1 = { firstName: "John" }
const obj2 = { lastName: "Doe", age: 32 }
const person = { ...obj1, ...obj2 }
console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32}

Pokud je stejná vlastnost přítomna v obou objektech, pak vlastnost levého objektu bude ve vytvořené kopii nahrazena vlastností pravého objektu.

Přidání rekvizity při kopírování objektu

Při kopírování objektu můžeme přidat další vlastnosti:

const obj1 = { firstName: "John", lastName: "Doe" }
const person = { ...obj1, age: 32, profession: "Full Stack Developer" }
console.log(person) // {firstName: 'John', lastName: 'Doe', age: 32, profession: 'Full Stack Developer'}

Aktualizace stávajících vlastností objektu

Podobně jako u přidávání rekvizit můžeme také aktualizovat stávající vlastnosti:

const obj1 = {
  firstName: "John",
  lastName: "Doe",
  age: 32,
  profession: "Full Stack Developer",
}
const person = { ...obj1, age: 33 }
console.log(person) //{firstName: 'John', lastName: 'Doe', age: 33, profession: 'Full Stack Developer'}