¿Qué hacen estos tres puntos (…) en React?

La notación de tres puntos (…) conocida como la sintaxis Spread ha sido parte de React durante mucho tiempo cuando podía usarse a través de la transpilación, aunque se ha convertido en parte de JavaScript como parte de la sintaxis ES2015.

La sintaxis de propagación se usa para deconstruir una array u objeto en variables separadas donde es posible que no se conozca el número exacto de elementos en la array o cuando deseamos mantener un atributo o un conjunto de atributos separados del objeto completo.

Se puede realizar lo siguiente usando la sintaxis extendida:

1. Pasar atributos: un objeto se puede pasar directamente a un componente en lugar de pasar cada valor de datos en el objeto por separado.

values:{
    height: 20,
    width: 10
}

<Image {...values} source="Image_Source">

// This same as the following:
<Image height={values.height} 
width={values.width} source="Image_Source">

2. Heredar un objeto: al crear un nuevo objeto que hereda otro objeto, podemos usar la sintaxis de propagación para heredar el objeto principal.

object1:{
    a: 10,
    b: 20
};

object2:{
    ...object1,
    c: 14
};

3. Concatenar arrays: también podemos concatenar arrays utilizando la sintaxis de propagación de la siguiente manera.

var first =[1, 2, 3];
var second = [2, 3, 4, 5];
var third = [...first, ...second];

4. Desestructuración de arrays: la desestructuración de una array en componentes separados también se puede realizar mediante la sintaxis extendida.

var original = [1,2,3,4,5,6,7];
var [first, ...remaining] = original;

// Therefore the following will be the values of first and remaining.
first = [1]  
remaining = [2,3,4,5,6,7]

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app spread-syntax-demo

• Paso 2: después de crear la carpeta de su proyecto , acceda a ella con el siguiente comando:

  cd spread-syntax-demo

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: aquí en el archivo App.js, vamos a crear un objeto, crear un objeto secundario a partir de él y luego pasarlo como un atributo a un componente.

import React from 'react';
import Image from './Image.jsx';
  
function App(props) {
  const originalImage = { src:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png",
    alt:"This is a random image"
  };
  
  const formattedImage = {
    ...originalImage,
    height:300,
    width: 300
  }
  return (
    <div>
      <Image {...formattedImage}/>
    </div>
  );
}
  
export default App;

En Image.jsx, pasamos accesorios a la etiqueta HTML img usando la sintaxis extendida.

import React from 'react';
  
function Image(props) {
    return (
        <div>
            <img {...props}/>
        </div>
    );
}
  
export default Image;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: