O que esses três pontos no React fazem?

O que ...faz neste código React (usando JSX) e como é chamado?

<Modal {...this.props} title='Modal heading' animation={false}>

Isso é notação de propriedade espalhada . Ele foi adicionado no ES2018 (o spread para matrizes / iterables era anterior, ES2015), mas é suportado em projetos React por um longo tempo via transpilação (como " JSX spread attribute ", mesmo que você pudesse fazê-lo em outro lugar também, não apenas atributos )

{...this.props} espalha as propriedades enumeráveis ​​"próprias" propscomo propriedades discretas no Modalelemento que você está criando. Por exemplo, se this.propscontido a: 1e b: 2, então

<Modal {...this.props} title='Modal heading' animation={false}>

seria o mesmo que

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

Mas é dinâmico, portanto, quaisquer propriedades "próprias" propsestão incluídas.

Como childrené uma propriedade "própria" props, a propagação a incluirá. Portanto, se o componente em que isso aparece tiver elementos filhos, eles serão repassados Modal. Colocar elementos filho entre a marca de abertura e a marca de fechamento é apenas um açúcar sintático - o bom tipo - para colocar uma childrenpropriedade na marca de abertura. Exemplo:

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);

.first {
  color: green;
}
.second {
  color: blue;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

A notação de dispersão é útil não apenas para esse caso de uso, mas para criar um novo objeto com a maioria (ou todas) das propriedades de um objeto existente - o que ocorre muito quando você está atualizando o estado, já que não é possível modificar o estado diretamente:

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

Isso substitui this.state.foopor um novo objeto com todas as mesmas propriedades que fooexceto a apropriedade, que se torna "updated":

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);

.as-console-wrapper {
  max-height: 100% !important;
}

Como você sabe, ...são chamados de atributos de propagação, que o nome representa, permitem que uma expressão seja expandida.

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

E neste caso (vou simplificar).

//just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}

Este:

<Modal {...person} title='Modal heading' animation={false} />

é igual a

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

Então, em suma, é um atalho puro , podemos dizer .

Os três pontos representam o Operador de propagação no ES6. Ele nos permite fazer algumas coisas em Javascript:

1. Concatenar matrizes

   var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
   var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
   var games = [...shooterGames, ...racingGames];
   
   console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']
   

2. Destruindo uma matriz

     var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
     var [first, ...remaining] = shooterGames;
     console.log(first); //Call of Duty
     console.log(remaining); //['Far Cry', 'Resident Evil']
   

3. Combinando dois objetos

   var myCrush = {
     firstname: 'Selena',
     middlename: 'Marie'
   };
   
   var lastname = 'my last name';
   
   var myWife = {
     ...myCrush,
     lastname
   }
   
   console.log(myWife); // {firstname: 'Selena',
                        //   middlename: 'Marie',
                        //   lastname: 'my last name'}
   

Há outro uso para os três pontos, conhecido como Rest Parameters, e torna possível levar todos os argumentos para uma função em uma única matriz.

4. Argumentos de função como matriz

    function fun1(...params) { 
   
    }  
   

Os três pontos no JavaScript são o operador spread / rest .

Operador de propagação

A sintaxe de propagação permite que uma expressão seja expandida em locais onde vários argumentos são esperados.

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

Parâmetros de descanso

A sintaxe do parâmetro rest é usada para funções com número variável de argumentos.

function(a, b, ...theArgs) {
  // ...
}

O operador de spread / descanso para matrizes foi introduzido no ES6. Há uma proposta do Estado 2 para propriedades de propagação / descanso de objetos.

O TypeScript também suporta a sintaxe de propagação e pode transpilar isso para versões mais antigas do ECMAScript com problemas menores .

Esse é um recurso do ES6, que também é usado no React. Veja o exemplo abaixo:

function Sum(x,y,z) {
   return x + y + z;
}
console.log(Sum(1,2,3)); //6

Dessa forma, tudo bem se tivermos no máximo 3 parâmetros. Mas, e se precisarmos adicionar, por exemplo, 110 parâmetros. Devemos definir todos eles e adicioná-los um por um?

Claro que existe uma maneira mais fácil de fazer, chamada SPREAD . Em vez de passar todos esses parâmetros, você escreve:

function (...numbers){} 

Não temos idéia de quantos parâmetros temos, mas sabemos que existem muitos deles. Com base no ES6, podemos reescrever a função acima como abaixo e usar a propagação e o mapeamento entre eles para torná-lo tão fácil quanto um pedaço de bolo:

let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45

Está apenas definindo adereços de uma maneira diferente no JSX para você!

Ele está usando o ...operador de matriz e objeto no ES6 (objeto um ainda não totalmente suportado). Portanto, basicamente, se você já define seus objetos, pode transmiti-lo ao seu elemento dessa maneira.

Portanto, no seu caso, o código deve ser algo como isto:

function yourA() {
  const props = {name='Alireza', age='35'};
  <Modal {...props} title='Modal heading' animation={false} />
}

portanto, os objetos que você definiu agora estão separados e podem ser reutilizados, se necessário.

É igual a:

function yourA() {
  <Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}

Estas são as citações da equipe React sobre o operador de propagação em JSX:

Atributos de propagação JSX Se você souber todas as propriedades que deseja colocar em um componente com antecedência, é fácil usar o JSX:

var component = <Component foo={x} bar={y} />;

A alteração de adereços é ruim
Se você não souber quais propriedades deseja definir, poderá tentar adicioná-las posteriormente ao objeto:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad

Esse é um antipadrão, porque significa que não podemos ajudá-lo a verificar os propTypes certos até muito mais tarde. Isso significa que os erros do seu propTypes terminam com um rastreamento de pilha enigmática.

Os adereços devem ser considerados imutáveis. A mutação do objeto de adereços em outro lugar pode causar consequências inesperadas, de modo ideal seria um objeto congelado neste momento.

Atributos de propagação
Agora você pode usar um novo recurso do JSX chamado atributos de propagação:

var props = {};
    props.foo = x;
    props.bar = y;
    var component = <Component {...props} />;

As propriedades do objeto que você passa são copiadas para os objetos do componente.

Você pode usar isso várias vezes ou combiná-lo com outros atributos. A ordem das especificações é importante. Atributos posteriores substituem os anteriores.

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

O que há com a notação estranha?
O operador ... (ou operador de propagação) já é suportado para matrizes no ES6. Há também uma proposta ECMAScript para Propriedades de Descanso e Propagação de Objetos. Estamos aproveitando esses padrões suportados e em desenvolvimento para fornecer uma sintaxe mais limpa no JSX.

Para quem é originário do mundo Python, o JSX Spread Attributes é equivalente a Unpacking Argument Lists ( **operador do Python ).

Sei que esta é uma pergunta JSX, mas trabalhar com analogias às vezes ajuda a obtê-la mais rapidamente.

O ...(operador spread) é usado para reagir a:

forneça uma maneira elegante de transmitir adereços dos componentes pai para filho. por exemplo, considerando esses adereços em um componente pai,

this.props = {
  username: "danM",
  email: "[email protected]"
}

eles poderiam ser passados ​​da seguinte maneira para a criança,

<ChildComponent {...this.props} />

que é semelhante a isso

<ChildComponent username={this.props.username} email={this.props.email} />

mas muito mais limpo.

Três pontos ...representam operadores de dispersão ou parâmetros de repouso ,

Ele permite que uma expressão ou string de matriz ou qualquer coisa que possa ser iterativa seja expandida em locais onde são esperados zero ou mais argumentos para chamadas de função ou elementos para matriz.

• Mesclar duas matrizes

var arr1 = [1,2,3];
var arr2 = [4,5,6];

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

• Copiando matriz:

var arr = [1, 2, 3];
var arr2 = [...arr];

console.log(arr); //[1, 2, 3]

Nota: A sintaxe de expansão efetivamente atinge um nível de profundidade ao copiar uma matriz. Portanto, pode ser inadequado copiar cópias de matrizes multidimensionais, como mostra o exemplo a seguir (é o mesmo com Object.assign () e sintaxe de propagação).

• Adicione valores de uma matriz a outra no índice específico, por exemplo, 3:

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

• Ao chamar um construtor com new:

var dateFields = [1970, 0, 1];  // 1 Jan 1970
var d = new Date(...dateFields);

console.log(d);

• Espalhe em literais de objeto:

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
console.log(clonedObj);	//{foo: "bar", x: 42}

var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj);	//{foo: "baz", x: 42, y: 13}

Observe que a foopropriedade obj1 foi substituída pela foopropriedade obj2

• Como uma sintaxe de parâmetro rest, que nos permite representar um número indefinido de argumentos como uma matriz:

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));	//6
console.log(sum(1, 2, 3, 4));	//10

Nota: sintaxe Spread (excepto no caso das propriedades de propagação) pode ser aplicada apenas a iterable objetos: Então seguinte irá lançar erro

var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable

Referência1

Referência2

Muitos elogios a Brandon Morelli. Ele explicou perfeitamente aqui , mas os links podem morrer, então estou apenas colando o conteúdo abaixo:

A sintaxe de dispersão é simplesmente três pontos: ... permite que um iterável se expanda em locais onde são esperados 0 ou mais argumentos. As definições são difíceis sem contexto. Vamos explorar alguns casos de uso diferentes para ajudar a entender o que isso significa.

Exemplo # 1 - Inserindo matrizes Dê uma olhada no código abaixo. Nesse código, não usamos a sintaxe de propagação:

var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];

console.log(arr);

Acima, criamos uma matriz chamada mid. Em seguida, criamos uma segunda matriz que contém nossa midmatriz. Por fim, desconectamos o resultado. O que você espera arrimprimir? Clique em executar acima para ver o que acontece. Aqui está a saída:

[1, 2, [3, 4], 5, 6]

Esse é o resultado que você esperava? Ao inserir a midmatriz na arrmatriz, acabamos com uma matriz dentro de uma matriz. Tudo bem se esse era o objetivo. Mas e se você quiser apenas uma única matriz com os valores de 1 a 6? Para fazer isso, podemos usar a sintaxe de propagação! Lembre-se, a sintaxe de dispersão permite que os elementos de nossa matriz se expandam. Vamos olhar para o código abaixo. Tudo é o mesmo - exceto que agora estamos usando a sintaxe de propagação para inserir a midmatriz na arrmatriz:

var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];

console.log(arr);

E quando você aperta o botão de execução, eis o resultado:

[1, 2, 3, 4, 5, 6]

Impressionante! Lembre-se da definição de sintaxe espalhada que você acabou de ler acima? Aqui é onde entra em jogo. Como você pode ver, quando criamos a arrmatriz e usamos o operador spread na midmatriz, em vez de apenas ser inserido, a midmatriz se expande. Essa expansão significa que todos os elementos da midmatriz são inseridos na arrmatriz. Em vez de matrizes aninhadas, o resultado é uma única matriz de números que varia de 1 a 6.

Exemplo # 2 - Math JavaScript possui um objeto matemático integrado que nos permite fazer alguns cálculos matemáticos divertidos. Neste exemplo, veremos Math.max(). Se você não estiver familiarizado, Math.max()retorna o maior número zero ou mais. Aqui estão alguns exemplos:

Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

Como você pode ver, se você deseja encontrar o valor máximo de vários números, Math.max()requer vários parâmetros. Infelizmente você não pode simplesmente usar uma única matriz como entrada. Antes da sintaxe de propagação, a maneira mais fácil de usar Math.max()em uma matriz é usar.apply()

var arr = [2, 4, 8, 6, 0];

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max(arr));

Funciona, é realmente muito chato. Agora, veja como fazemos exatamente a mesma coisa com a sintaxe de propagação:

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);

console.log(max);

Em vez de ter que criar uma função e utilizar o método apply para retornar o resultado Math.max(), precisamos apenas de duas linhas de código! A sintaxe de expansão expande nossos elementos da matriz e insere cada elemento em nossa matriz individualmente no Math.max()método!

Exemplo # 3 - Copiar uma matriz No JavaScript, você não pode simplesmente copiar uma matriz configurando uma nova variável igual à matriz já existente. Considere o seguinte exemplo de código:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

console.log(arr2);

Quando você pressiona executar, você obtém a seguinte saída:

['a', 'b', 'c']

Agora, à primeira vista, parece que funcionou - parece que copiámos os valores de arr para arr2. Mas não foi isso que aconteceu. Veja, ao trabalhar com objetos em javascript (matrizes são um tipo de objeto) que atribuímos por referência, não por valor. Isso significa que arr2 foi atribuído à mesma referência que arr. Em outras palavras, tudo o que fizermos para arr2 também afetará a matriz arr original (e vice-versa). Dê uma olhada abaixo:

var arr = ['a', 'b', 'c'];
var arr2 = arr;

arr2.push('d');

console.log(arr);

Acima, colocamos um novo elemento d em arr2. No entanto, quando desconectamos o valor de arr, você verá que o valor d também foi adicionado a essa matriz:

['a', 'b', 'c', 'd']

Não precisa ter medo! Podemos usar o operador de propagação! Considere o código abaixo. É quase o mesmo que acima. Em vez disso, usamos o operador spread dentro de um par de colchetes:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

console.log(arr2);

Clique em Executar e você verá a saída esperada:

['a', 'b', 'c']

Acima, os valores da matriz em arr foram expandidos para se tornarem elementos individuais que foram então atribuídos a arr2. Agora podemos alterar a matriz arr2 da maneira que gostaríamos, sem consequências na matriz arr original:

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

arr2.push('d');

console.log(arr);

Novamente, a razão pela qual isso funciona é porque o valor de arr é expandido para preencher os colchetes de nossa definição de matriz arr2. Portanto, estamos configurando arr2 para igualar os valores individuais de arr em vez da referência para arr, como fizemos no primeiro exemplo.

Exemplo de bônus - string para array Como um exemplo final divertido, você pode usar a sintaxe de spread para converter um string em um array. Basta usar a sintaxe de propagação em um par de colchetes:

var str = "hello";
var chars = [...str];

console.log(chars);

Os três pontos (...)são chamados de operador de dispersão, e isso é conceitualmente semelhante ao operador de dispersão da matriz ES6, o JSX aproveitando esses padrões suportados e em desenvolvimento para fornecer uma sintaxe mais limpa no JSX

As propriedades de propagação nos inicializadores de objeto copiam próprias propriedades enumeráveis ​​de um objeto fornecido para o objeto recém-criado.

let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

Referência:

1) https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties

2) https://facebook.github.io/react/docs/jsx-spread.html

O significado de ... depende de onde você o usa no código,

1. Usado para espalhar / copiar a matriz / objeto - Ajuda a copiar a matriz / objeto e também adicionar novos valores de matriz / novas propriedades ao objeto, o que é opcional.

const numbers = [1,2,3];
const newNumbers = [...numbers, 4];
console.log(newNumbers) //prints [1,2,3,4] 

const person = {
 name: 'Max'
};

const newPerson = {...person, age:28};
console.log(newPerson); //prints {name:'Max', age:28}

2. Usado para mesclar os argumentos da função em uma única matriz - Você pode usar as funções da matriz nela.

const filter = (...args) => {
   return args.filter(el => el ===1);
}

console.log(filter(1,2,3)); //prints [1] 

Este operador de propagação ...

Por exemplo, se você tiver uma matriz first=[1,2,3,4,5]e outra second=[6,7,8].

[...first, ...second] //result is [1,2,3,4,5,6,7,8]

O mesmo também pode ser feito com objetos json.

Em resumo, os três pontos ...são um operador de spread no ES6 (ES2015). O operador de propagação buscará todos os dados.

let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];


console.log(b);

Dará o resultado [1,2,3,4,5,6]

console.log(c);

Dará o resultado [7,8,1,2,3,4]

É geralmente chamado de operador spread, é usado para expandir onde for necessário

exemplo

const SomeStyle = {
   margin:10,
   background:#somehexa
}

você pode usá-lo sempre que precisar sobre a sintaxe Spread do operador de propagação .

Atributos de propagação usados ​​para transmitir as várias propriedades de uma maneira simples

{... this.props} está segurando a propriedade this.props

Uso do {...} Operador de propagação com os adereços abaixo

this.props = 
 { 
    firstName: 'Dan', 
    lastName: 'Abramov', 
    city: 'New York',
    country: 'USA' 
}

Sem {...} propagação

<Child 
  firstName={this.props.firstName}
  lastName={this.props.lastName}
  city={this.props.city}
  country={this.props.country}

> 

Com {...} Spread

<Child { ...this.props } />

Tweet de Dan Abramov sobre o operador Spread (Criador de Redux)

... essa sintaxe faz parte do ES6 e não é algo que você pode usar apenas no React. Pode ser usada de duas maneiras diferentes; como um operador de spread OU como um parâmetro de descanso. Você pode encontrar mais informações neste artigo: https://www.techiediaries.com/react-spread-operator-props-setstate/

o que você mencionou na pergunta é algo assim, vamos assumir assim,

    function HelloUser() {
      return <Hello Name="ABC" City="XYZ" />;
    }

com o uso do operador spread, você pode passar adereços para o componente como este.

     function HelloUser() {
       const props = {Name: 'ABC', City: 'XYZ'};
       return <Hello {...props} />;
     }

É prática comum transmitir adereços em um aplicativo React. Ao fazer isso, podemos aplicar alterações de estado ao componente filho, independentemente de ele ser Puro ou Impuro (sem estado ou com estado). Há momentos em que a melhor abordagem, ao transmitir adereços, é passar em propriedades singulares ou em um objeto inteiro de propriedades. Com o suporte para matrizes no ES6, recebemos a notação "..." e agora conseguimos passar um objeto inteiro para uma criança.

O processo típico de passar adereços para uma criança é observado com esta sintaxe:

var component = <Component foo={x} bar={y} />;

Isso é bom para usar quando o número de adereços é mínimo, mas se torna incontrolável quando os números dos adereços ficam muito mais altos. Um problema com esse método ocorre quando você não conhece as propriedades necessárias em um componente filho e o método JavaScript típico é definir essas propriedades e vincular-se ao objeto posteriormente mais tarde. Isso causa problemas com a verificação propType e erros de rastreamento de pilha enigmática que não são úteis e causam atrasos na depuração. A seguir, é apresentado um exemplo dessa prática e o que não fazer:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;

Este mesmo resultado pode ser alcançado, mas com sucesso mais apropriado, fazendo o seguinte:

var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?

Mas não usa JSX spread ou JSX, portanto, para repetir isso na equação, agora podemos fazer algo assim:

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

As propriedades incluídas em "... adereços" são foo: x, bar: y. Isso pode ser combinado com outros atributos para substituir as propriedades de "... props" usando esta sintaxe:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

Além disso, podemos copiar outros objetos de propriedade um para o outro ou combiná-los da seguinte maneira:

var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';

Ou mescle dois objetos diferentes como este (isso ainda não está disponível em todas as versões de reação):

var ab = { ...a, ...b }; // merge(a, b)

Outra maneira de explicar isso, de acordo com o site react / docs do Facebook, é:

Se você já possui "props" como um objeto e deseja transmiti-lo no JSX, pode usar "..." como um operador SPREAD para passar todo o objeto de props. Os dois exemplos a seguir são equivalentes:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}



function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

Os atributos de propagação podem ser úteis ao criar contêineres genéricos. No entanto, eles também podem deixar seu código confuso, facilitando a transmissão de muitos adereços irrelevantes para componentes que não se importam com eles. Essa sintaxe deve ser usada com moderação.

É o chamado operador de propagação. Por exemplo, deixe hello = {name: '', msg: ''} deixe hello1 = {... hello} Agora, as propriedades do objeto hello são copiadas para hello1.

É chamado de sintaxe de spreads em javascript.

É usado para destruir uma matriz ou objeto em javascript.

exemplo:

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

Você pode fazer o mesmo resultado com a Object.assign()função em javascript.

Referência: sintaxe de propagação

Isso será compilado em:

React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)

onde ele fornece mais duas propriedades titlee animationalém do propselemento host.

...é o operador ES6 chamado Spread .

Consulte https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

operador spread (operador triplo) introduz no ecama script 6 (ES6) .Ecama script (ES6) é um invólucro de javascript.

espalhe propriedades enumeráveis ​​do operador em adereços. this.props = {firstName: 'Dan', lastName: 'Abramov', cidade: 'New York', país: 'USA'}

{... this.props} = {nome: 'Dan', sobrenome: 'Abramov', cidade: 'Nova York', país: 'EUA'}

Mas o operador de propagação do recurso principal é usado para um tipo de referência.

For example
let person= {
    name: 'Alex',
    age: 35 
}
person1= person;

person1.name = "Raheel";

console.log( person.name); // output: Raheel

Isso é chamado de tipo de referência, um objeto afeta outros objetos porque são compartilháveis ​​na memória. Se você obtém valor de forma independente, significa memória de expansão, ambos usam o operador de propagação.

 let person= {
        name: 'Alex',
        age: 35 
    }
person2 = {...person};

person2.name = "Shahzad";

console.log(person.name); // output: Alex

se você tem uma matriz de elementos e deseja exibir os elementos que você acabou de usar ... arraymaments e ele irá percorrer todos os elementos

...(três pontos em Javascript) é chamado de sintaxe de propagação ou operador de propagação. Isso permite que uma iterável, como uma expressão ou string de matriz, seja expandida ou uma expressão de objeto seja expandida onde quer que seja colocada. Isso não é específico para reagir. É um operador Javascript.

Todas essas respostas são úteis, mas quero listar os Casos de Uso práticos mais usados ​​da Sintaxe de Spread (Operador de Spread).

1. Combinar matrizes (concatenar matrizes)

Existem várias maneiras de combinar matrizes , mas o operador de dispersão permite que você coloque isso em qualquer lugar da matriz. Se você quiser combinar duas matrizes e colocar elementos em qualquer ponto da matriz, faça o seguinte:

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// arr2 = ["one", "two", "three", "four", "five"]

2. Copiando matrizes

Quando queríamos uma cópia de uma matriz, tínhamos o método Array.prototypr.slice () . Mas você pode fazer o mesmo com o operador spread.

var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]

3. Funções de chamada sem aplicar

No ES5, para passar uma matriz de dois números para a doStuff()função, você costuma usar o método Function.prototype.apply () da seguinte maneira:

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// Call the function, passing args
doStuff.apply(null, args);

No entanto, usando o operador spread, você pode passar uma matriz para a função.

doStuff(...args);

4. Reestruturando matrizes

Você pode usar a desestruturação e o operador restante juntos para extrair as informações em variáveis ​​como você deseja:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

5. Argumentos de função como parâmetros de descanso

O ES6 também possui os três pontos (...), que é um parâmetro de descanso que coleta todos os argumentos restantes de uma função em uma matriz.

function f(a, b, ...args) {
  console.log(args);
}

f(1,2,3,4,5);
// [ 3, 4, 5 ]

6. Usando funções matemáticas

Qualquer função em que a propagação é usada como argumento pode ser usada por funções que podem aceitar qualquer número de argumentos.

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

7. Combinando dois objetos

Você pode usar o operador de propagação para combinar dois objetos. Essa é uma maneira fácil e limpa de fazer isso.

var carType = {
  model: 'Toyota',
  yom: '1995'
};

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

console.log(carData); 
// {
//  model: 'Toyota',
//  yom: '1995',
//  carFuel = 'Petrol'
// }

8. Separe uma string em caracteres separados

Você pode usar o operador de propagação para espalhar uma sequência em caracteres separados.

let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]

Você pode pensar em mais maneiras de usar o Operador de propagação. O que listei aqui são os casos de uso populares dele.

Esse é um novo recurso do ES6 / Harmony. É chamado de operador de propagação. Permite separar as partes constituintes de uma matriz / objeto ou pegar vários itens / parâmetros e colá-los. Aqui está um exemplo:

let array = [1,2,3]
let array2 = [...array]
// array2 is now filled with the items from array

E com um objeto / chaves:

// lets pass an object as props to a react component
let myParameters = {myKey: 5, myOtherKey: 7}
let component = <MyComponent {...myParameters}/>
// this is equal to <MyComponent myKey=5 myOtherKey=7 />

O mais legal é que você pode usá-lo para significar "o restante dos valores".

const myFunc = (value1, value2, ...values) {
    // Some code
}

myFunc(1, 2, 3, 4, 5)
// when myFunc is called, the rest of the variables are placed into the "values" array

Esses são chamados de spreads. Assim como o nome indica. Isso significa que está colocando o valor disso nesses conjuntos ou objetos.

Tal como :

let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]