Cosa fanno questi tre punti in React?

Cosa fa il ... fare in questo codice React (using JSX) e come si chiama?

  

Risposta aggiornata (agosto 2018)

Questa è la notazione di diffusione della proprietà . È stato aggiunto in ES2018, ma è stato supportato a lungo nei progetti React tramite transpilation (come “attributi di diffusione JSX” anche se lo si poteva fare anche altrove, non solo gli attributi).

{...this.props} distribuisce le proprietà negli oggetti di scena come proprietà discrete (attributi) sull’elemento Modal che stai creando. Ad esempio, se this.props contenesse a: 1 b: 2 , quindi

  

sarebbe lo stesso di

  

Ma è dinamico, quindi sono incluse tutte le proprietà in props di props .

La notazione di diffusione è utile non solo per quel caso d’uso, ma per creare un nuovo object con la maggior parte (o tutte) delle proprietà di un object esistente – che risulta molto quando si aggiorna lo stato, poiché non è ansible modificare lo stato direttamente:

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

Sostituisce this.state.foo con un nuovo object con tutte le stesse proprietà di foo tranne la proprietà, che diventa "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; } 

Come sapete ... si chiamano Spread Attributes che il nome rappresenta permette di espandere un’espressione.

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

E in questo caso (lo semplificherò).

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

Questo:

  

è uguale a

  

Quindi, in breve, è una scorciatoia ordinata , possiamo dire .

I tre punti in JavaScript sono operatori di spread / rest .

Operatore di diffusione

La syntax di diffusione consente di espandere un’espressione in luoghi in cui sono previsti più argomenti.

 myFunction(...iterableObj); [...iterableObj, 4, 5, 6] [...Array(10)] 

Parametri di rest

La syntax dei parametri rimanenti viene utilizzata per funzioni con numero variabile di argomenti.

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

L’operatore spread / rest per gli array è stato introdotto in ES6. Esiste una proposta State 2 per le proprietà di diffusione / rest degli oggetti.

TypeScript supporta anche la syntax di diffusione e può trascriverlo nelle versioni precedenti di ECMAScript con problemi minori.

Questa è una funzione di es6 che è usata anche in React. Guarda l’esempio seguente:

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

In questo modo va bene se abbiamo un massimo di 3 parametri, ma cosa succederebbe se avessimo bisogno di aggiungere ad esempio 110 parametri. Dovremmo definirli tutti e aggiungerli uno per uno ?! Ovviamente c’è un modo più semplice per fare che si chiama SPREAD. Invece di passare tutti quei parametri scrivi:

 function (...numbers){} 

Non abbiamo idea di quanti parametri abbiamo ma sappiamo che ce ne sono molti. Basandoci su es6 possiamo riscrivere la funzione precedente come di seguito e utilizzare la diffusione e la mapping tra di loro per renderlo facile come un pezzo di torta:

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

Per coloro che provengono dal mondo Python, gli Attributi di Spread JSX sono equivalenti a Unpacking Argument Lists (il Python ** -operator).

Sono consapevole che questa è una domanda JSX, ma lavorare con le analogie a volte aiuta a farlo più velocemente.

È solo la definizione di oggetti di scena in un modo diverso in JSX per te!

Sta usando ... operatore di array e oggetti in ES6 (l’object uno non è ancora completamente supportato), quindi in pratica se definisci già i tuoi oggetti di scena, puoi passarlo al tuo elemento in questo modo.

Quindi nel tuo caso, il codice dovrebbe essere qualcosa del genere:

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

quindi gli oggetti di scena che hai definito, ora separati e possono essere riutilizzati se necessario.

È uguale a:

 function yourA() {  } 

Queste sono le virgolette del team di React sull’operatore di spread in JSX:

Attributi di diffusione JSX Se si conoscono tutte le proprietà che si desidera posizionare su un componente in anticipo, è facile utilizzare JSX:

 var component = ; 

Puntelli mutanti è cattivo
Se non sai quali proprietà vuoi impostare, potresti essere tentato di aggiungerle all’object in un secondo momento:

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

Questo è un anti-pattern perché significa che non possiamo aiutarti a controllare i propTypes giusti fino a un momento successivo. Ciò significa che gli errori propTypes finiscono con una traccia di stack criptica.

I puntelli dovrebbero essere considerati immutabili. La mutazione dell’object oggetti di scena da qualche altra parte potrebbe causare conseguenze inaspettate quindi idealmente sarebbe un object congelato a questo punto.

Spread Attributes
Ora puoi usare una nuova funzionalità di JSX chiamata attributi di diffusione:

 var props = {}; props.foo = x; props.bar = y; var component = ; 

Le proprietà dell’object che si passano vengono copiate sui puntelli del componente.

Puoi usarlo più volte o combinarlo con altri attributi. L’ordine delle specifiche è importante. Gli attributi successivi sostituiscono quelli precedenti.

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

Cosa c’è di strano … notazione?
L’operatore … (o operatore di spread) è già supportato per gli array in ES6. Esiste anche una proposta ECMAScript per Object Rest e Spread Properties. Stiamo sfruttando questi standard supportati e in via di sviluppo per fornire una syntax più pulita in JSX.

I tre punti rappresentano lo Spread Operator in ES6. Ci permette di fare parecchie cose in Javascript:

  1. Copia di un 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. Distruzione di un 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. Argomenti della funzione come array

      function fun1(...params) { } 

Quanto sopra è noto come parametri di rest e non limita il numero di valori passati a una funzione. Tuttavia, gli argomenti devono essere dello stesso tipo.

  1. Combinando due oggetti

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

Il ... (operatore di diffusione) viene utilizzato in risposta a:

fornire un modo pulito per passare oggetti di scena dai componenti principali a quelli secondari. per esempio dato questi oggetti di scena in un componente genitore,

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

potevano essere passati nel modo seguente al bambino,

  

che è simile a questo

  

ma molto più pulito.

I tre punti (...) sono chiamati operatori di spread e concettualmente simili all’operatore di diffusione di array ES6, JSX si avvale di questi standard supportati e in via di sviluppo per fornire una syntax più pulita in JSX

Le proprietà di diffusione negli inizializzatori di oggetti copia le proprie proprietà enumerabili da un object fornito sull’object appena creato.

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

Riferimento:

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

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

In breve, i tre punti … è un operatore di spread in ES6 (ES2015). operatore di spread recupererà tutti i dati.

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

console.log (b); dai il risultato [1,2,3,4,5,6]

console.log (c); dai il risultato [7,8,1,2,3,4]

Diffondere gli attributi utilizzati per passare le proprietà multiple in un modo semplice

{… this.props} sta mantenendo la proprietà di this.props

Uso dell’operatore di propagazione {…} con sotto i puntelli

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

Senza {…} Spread

  

Con {…} Spread

  

Tweet di Dan Abramov sull’operatore Spread (Creator of Redux) https://twitter.com/dan_abramov/status/694519379191545856?lang=it

Questa è una nuova funzionalità di ES6 / Harmony. Si chiama Spread Operator. Ti consente di separare le parti costitutive di un array / object o di prendere più elementi / parametri e incollarli insieme. Ecco un esempio:

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

E con un object / chiavi:

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

Ciò che è veramente interessante è che puoi usarlo per significare “il resto dei valori”.

 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 

Questi sono chiamati spread. Proprio come suggerisce il nome. Significa che sta mettendo qualunque valore in quegli array o oggetti.

Ad esempio :

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