Que font ces trois points dans React?

Comme vous le savez ... sont appelés Propagation d'Attributs dont le nom représente elle permet une expression à être élargi.

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

Et dans ce cas(je vais le simplifier).

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

Ceci:

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

Est égal à

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

Bref, c'est un raccourci net, on peut dire.

Les trois points sont en JavaScript propagation, du reste de l'opérateur.

Opérateur de propagation

La syntaxe spread permet de développer une expression dans des endroits où plusieurs arguments sont attendus.

myFunction(...iterableObj);

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

[...Array(10)]

Reste paramètres

La syntaxe du paramètrerest est utilisée pour les fonctions avec un nombre variable d'arguments.

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

L'opérateur spread / rest pour les tableaux a été introduit dans ES6. Il y a un État 2 proposition pour objet la propagation de repos propriétés.

TypeScript prend également en charge la syntaxe spread et peut la transpiler dans les anciennes versions D'ECMAScript avec des problèmes mineurs .

C'est une fonctionnalité de es6 qui est également utilisée dans React. Regardez l'exemple ci-dessous:

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

Cette façon est très bien si nous avons un maximum de 3 paramètres mais que faire si nous devons ajouter par exemple 110 paramètres. Devrions-nous les définir tous et les ajouter un par un?! Bien sûr, il y a un moyen plus facile de le faire qui est appelé propagation. Au lieu de passer tous ces paramètres vous écrivez :

function (...numbers){} 

Nous n'avons aucune idée du nombre de paramètres que nous avons mais nous savons qu'il y en a des tas. Basé sur es6 nous peut réécrire la fonction ci-dessus comme ci-dessous et utiliser la propagation et la cartographie entre eux pour le rendre aussi facile qu'un morceau de gâteau:

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

Pour ceux qui viennent du monde Python, les attributs JSX Spread sont équivalents à déballage des listes d'arguments (l'opérateur Python **).

Je suis conscient que c'est une question JSX, mais travailler avec des analogies aide parfois à l'obtenir plus rapidement.

Les trois points représentent l'opérateur de propagation dans ES6. Cela nous permet de faire pas mal de choses en Javascript:

1. La Copie d'un tableau

   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. Déstructurer un tableau

     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. Arguments de fonction comme tableau

    function fun1(...params) { 
   
    }  
   

Ce qui précède est connu sous le nom de paramètres rest et ne limite pas le nombre de valeurs transmises à une fonction. Cependant, les arguments doivent être les mêmes type.

1. Combinant deux objets

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

, C'est juste la définition de accessoires d'une manière différente dans JSX pour vous!

Il utilise ... Array et object operator dans ES6 (object one pas encore entièrement supporté), donc fondamentalement si vous définissez déjà vos accessoires, vous pouvez le passer à votre élément de cette façon.

Donc, dans votre cas, le code devrait être quelque chose comme ceci:

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

Donc les accessoires que vous avez définis, maintenant séparés et peuvent être réutilisés si nécessaire.

Il est égal à:

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

Ce sont les citations de L'équipe React sur l'opérateur spread dans JSX:

Attributs JSX Spread Si vous connaissez toutes les propriétés que vous souhaitez placer sur un composant à l'avance, il est facile d'utiliser JSX:

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

Les accessoires mutants sont mauvais
Si vous ne savez pas quelles propriétés Vous voulez définir, vous pourriez être tenté de les ajouter sur l'objet plus tard:

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

Ceci est un anti-modèle car cela signifie que nous ne pouvons pas vous aider à vérifier le propTypes droit jusqu'à bien plus tard. Cela signifie que vos propTypes les erreurs se terminent par une trace de pile cryptique.

Les accessoires doivent être considérés comme immuables. Mutation de l'objet props quelque part ailleurs pourrait entraîner des conséquences inattendues donc idéalement ce serait être un objet gelé à ce stade.

La Propagation des Attributs
Maintenant vous pouvez utiliser une nouvelle fonctionnalité de JSX appelée spread attributes:

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

Les propriétés de l'objet que vous transmettez sont copié sur le accessoires du composant.

Vous pouvez l'utiliser plusieurs fois ou le combiner avec d'autres attributs. L'ordre de spécification est important. Attributs ultérieurs override les précédentes.

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

C'est quoi ce truc bizarre ?.. la notation?
Le ... operator (ou spread operator) est déjà pris en charge pour les tableaux dans ES6. Il y a aussi une proposition ECMAScript pour les propriétés REST et Spread de L'objet. Nous sommes profitant de ces prises en charge et élaborer des normes pour pour fournir une syntaxe plus propre dans JSX.

Le ...(opérateur de propagation) est utilisé dans react to:

Fournir un moyen soigné de passer des accessoires de parent aux composants enfants. par exemple, étant donné ces accessoires dans un composant parent,

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

Ils pourraient être transmis de la manière suivante à l'enfant,

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

Qui est similaire à ceci

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

Mais beaucoup plus propre.

Les trois points {[1] } sont appelés l'opérateur de propagation, et ceci est conceptuellement similaire à L'opérateur de propagation de tableau ES6, JSX tirer parti de ces normes prises en charge et en développement afin de fournir une syntaxe plus propre dans JSX

Propagation propriétés dans les initialiseurs d'objets copies propre énumérable les propriétés d'un objet sur l'objet nouvellement créé.

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

Référence:

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

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

En bref, les trois points ... est un opérateur de propagation dans ES6 (ES2015). spread opérateur va chercher toutes les données.

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

Console.log (b); donner le résultat [1,2,3,4,5,6]

Console.log (c); donner le résultat [7,8,1,2,3,4]

Spread attributs utilisés pour passer les propriétés multiples d'une manière Simple

{ ... ce.props } détient la propriété de cette.accessoires

Utilisation du { ... } Opérateur de propagation avec des accessoires ci-dessous

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

Sans { ... } Propagation

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

> 

Avec { ... } Propagation

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

Tweet de Dan Abramov à propos de Spread operator (Creator de Redux) https://twitter.com/dan_abramov/status/694519379191545856?lang=en

Il est courant de passer des accessoires dans une application React. Ce faisant, nous pouvons appliquer des changements d'État à la composante enfant, qu'elle soit Pure ou Impure (sans état ou avec État). Il y a des moments où la meilleure approche, en passant dans les accessoires, est de passer dans des propriétés singulières ou un objet entier de propriétés. Avec le support des tableaux dans ES6, nous avons reçu le"..."notation et avec cela, nous sommes maintenant en mesure de réaliser le passage d'un objet entier à un enfant.

Le processus typique de passer des accessoires à un enfant est noté avec cette syntaxe:

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

C'est bien à utiliser lorsque le nombre d'accessoires est minime mais devient ingérable lorsque les nombres d'accessoires deviennent trop élevés. Un problème avec cette méthode se produit lorsque vous ne connaissez pas les propriétés nécessaires dans un composant enfant et la méthode JavaScript typique consiste à définir simplement ces propriétés et à se lier à l'objet plus tard. Cela provoque des problèmes avec la vérification de propType et la trace de pile cryptique erreurs qui ne sont pas utiles et provoquent des retards dans le débogage. Ce qui suit est un exemple de cette pratique, et ce qu'il ne faut pas faire:

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

Ce même résultat peut être atteint mais avec un succès plus approprié en faisant ceci:

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

Mais n'utilise pas JSX spread ou JSX donc pour boucler cela dans l'équation, Nous pouvons maintenant faire quelque chose comme ceci:

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

Les propriétés incluses dans "...props " sont foo: x, bar: Y. Cela peut être combiné avec d'autres attributs pour remplacer le propriétés de "...props " en utilisant cette syntaxe:

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

En outre, nous pouvons copier d'autres objets de propriété les uns sur les autres ou les combiner de cette manière:

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

Ou fusionner deux objets différents comme ceci (ce n'est pas encore disponible dans toutes les versions de react):

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

Une autre façon d'expliquer cela, selon le site react / docs de Facebook est:

Si vous avez déjà "props" comme objet, et que vous voulez le passer dans JSX, vous pouvez utiliser "..."en tant qu'opérateur de propagation pour passer le objet entier d'accessoires. Les deux exemples suivants sont équivalents:

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



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

Les attributs Spread peuvent être utiles lorsque vous construisez des conteneurs génériques. Cependant, ils peuvent également rendre votre code désordonné en le rendant facile à passer beaucoup d'accessoires non pertinents à des composants qui ne se soucient pas d'eux. Cette syntaxe doit être utilisée avec parcimonie.

C'est une nouvelle fonctionnalité dans ES6/Harmony. Il est appelé L'opérateur de propagation. Il vous permet de séparer les constituants d'un tableau/objet, ou de prendre plusieurs éléments/paramètres et les coller ensemble. Voici un exemple:

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

Et avec un objet / clés:

// 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 />

Ce qui est vraiment cool, c'est que vous pouvez utiliser pour dire "le reste des valeurs".

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

Il est appelé spreads syntaxe en javascript.

Il est utilisé pour déstructurer un tableau ou un objet en javascript.

Exemple:

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)

Vous pouvez faire le même résultat avec la fonction Object.assign() en javascript.

Référence:

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

Ceux-ci sont appelés spreads. Comme le nom l'indique. Cela signifie qu'il met n'importe quelle valeur dans ces tableaux ou objets.

Tels que:

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