O que esses três pontos no React fazem?

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

  

Resposta atualizada (agosto de 2018)

Isso é notação de propagação de propriedade . Ele foi adicionado no ES2018, mas há muito tempo suportado em projetos do React via transpilação (como “atributos de propagação de JSX”, embora você possa fazê-lo em outro lugar, não apenas atributos).

{...this.props} espalha as propriedades em props como propriedades discretas (atributos) no elemento Modal que você está criando. Por exemplo, se this.props contivesse a: 1 e b: 2 , então

  

seria o mesmo que

  

Mas é dynamic, então quaisquer propriedades em props estão incluídas.

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

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

Isso substitui this.state.foo por um novo object com todas as mesmas propriedades de foo exceto a propriedade, 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 atributos de propagação que o nome representa permite 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 simplificá-lo).

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

Este:

  

é igual a

  

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

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

Operador de spread

A syntax 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)] 

parameters de descanso

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

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

O operador de espalhamento / descanso para matrizes foi introduzido no ES6. Há uma proposta State 2 para propriedades de propagação / descanso de objects.

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

Esta é uma característica do es6 que é usado no React também. 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 defini-los todos e adicioná-los um por um? Claro que há uma maneira mais fácil de fazer o que é chamado SPREAD. Em vez de passar todos os parâmetros que você escreve:

 function (...numbers){} 

Não temos ideia de quantos parâmetros temos, mas sabemos que existem muitos desses. Com base no es6, podemos rewrite a function acima como abaixo e usar o spread e 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 

Para aqueles que vêm do mundo Python, os Atributos de propagação JSX são equivalentes a Descompactar listas de argumentos (o operador Python ** ).

Estou ciente de que esta é uma questão de JSX, mas trabalhar com analogias às vezes ajuda a obtê-la mais rapidamente.

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

Ele está usando ... operador array e object no ES6 (o object um ainda não é totalmente suportado), então, basicamente, se você já definir seus props, você pode passá-lo para o seu elemento dessa maneira.

Então, no seu caso, o código deve ser algo assim:

 function yourA() { const props = {name='Alireza', age='35'};  } 

então os adereços que você definiu, agora separados e podem ser reutilizados, se necessário.

É igual a:

 function yourA() {  } 

Estas são as citações da equipe React sobre o spread do operador no JSX:

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

 var component = ; 

Adereços mutantes são ruins
Se você não souber quais propriedades deseja definir, poderá se sentir tentado a adicioná-las ao object posteriormente:

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

Este é um anti-padrão porque significa que não podemos ajudá-lo a verificar os propTypes certos até mais tarde. Isso significa que seus erros propTypes acabam com um rastreamento de pilha enigmática.

Os adereços devem ser considerados imutáveis. Mutar o object props em outro lugar poderia causar consequências inesperadas, de maneira ideal, seria um object congelado nesse ponto.

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 = ; 

As propriedades do object que você passa são copiadas para os objects do componente.

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

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

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

Os três pontos representam o Operador de Spread no ES6. Nos permite fazer algumas coisas em Javascript:

  1. Copiando um array

     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. Destructuring an array

      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. Argumentos de function como array

      function fun1(...params) { } 

O acima é conhecido como parâmetros de descanso e não restringe o número de valores passados ​​para uma function. No entanto, os argumentos devem ser do mesmo tipo.

  1. Penteando dois objects

     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'} 

O ... (operador de espalhamento) é usado para reagir a:

fornecer uma maneira legal de passar adereços de componentes pai para filho. por exemplo, dado esses adereços em um componente pai,

 this.props = { username: "danM", email: "dan@mail.com" } 

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

  

que é semelhante a este

  

mas bem mais limpo.

Os três pontos (...) são chamados de operador de propagação, e isso é conceitualmente semelhante ao operador de propagação de matriz ES6, o JSX aproveita esses padrões suportados e em desenvolvimento para fornecer uma syntax mais limpa em JSX.

As propriedades de propagação nos inicializadores de object copiam as próprias propriedades enumeráveis ​​de um object fornecido para o object 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

Em suma, os três pontos … é um operador de dispersão 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); dê o resultado [1,2,3,4,5,6]

console.log (c); dê o resultado [7,8,1,2,3,4]

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

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

Uso do {…} Operador de Spread com suporte abaixo

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

Sem {…} Espalhar

  

Com {…} propagação

  

O Tweet de Dan Abramov sobre o operador Spread (criador do Redux) https://twitter.com/dan_abramov/status/694519379191545856?lang=pt-pt

Este é um novo recurso no ES6 / Harmony. É chamado de Operador de Spread. Ele permite que você separe as partes constituintes de um array / object, ou pegue vários itens / parâmetros e cole-os. Aqui está um exemplo:

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

E com um object / chaves:

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

O que é realmente legal é que você pode usá-lo para significar “o resto 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 

Aqueles são chamados de spreads. Assim como o nome indica. Isso significa que está colocando qualquer valor no array ou nos objects.

Tal como :

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