Was machen diese drei Punkte in React?

Was bedeutet die ... tun in diesem React (mit JSX) Code und wie heißt er?

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

Das ist Property-Spread-Notation. Es wurde in ES2018 hinzugefügt (Spread für Arrays/Iterables war früher, ES2015), aber es wird seit langem in React-Projekten über Transpilation unterstützt (als “JSX-Spread-Attribute” obwohl man es auch woanders machen könnte, nicht nur bei Attributen).

{...this.props} breitet sich aus die “eigenen” aufzählbaren Eigenschaften in props als diskrete Eigenschaften auf der Modal Element, das Sie erstellen. Zum Beispiel, wenn this.props enthalten a: 1 und b: 2dann

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

wäre dasselbe wie

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

Aber es ist dynamisch, also was auch immer “eigene” Eigenschaften drin sind props sind inklusive.

Seit children ist eine “eigene” Eigenschaft in props, Spread wird es enthalten. Wenn also die Komponente, in der dies erscheint, untergeordnete Elemente hatte, werden diese weitergegeben Modal. Das Einfügen von untergeordneten Elementen zwischen das öffnende und das schließende Tag ist nur syntaktischer Zucker – die gute Art – zum Einfügen von a children -Eigenschaft im öffnenden Tag. Beispiel:

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>

Die Spread-Notation ist nicht nur für diesen Anwendungsfall praktisch, sondern auch zum Erstellen eines neuen Objekts mit den meisten (oder allen) Eigenschaften eines vorhandenen Objekts – was häufig vorkommt, wenn Sie den Status aktualisieren, da Sie den Status nicht ändern können direkt:

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

Das ersetzt this.state.foo mit einem neuen Objekt mit denselben Eigenschaften wie foo außer der a Eigentum, das wird "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;
}

... are called spread attributes which, as the name represents, it allows an expression to be expanded.

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

Und in diesem Fall (ich werde es vereinfachen).

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

Dies:

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

ist gleich

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

Also kurz gesagt, es ist ein sauber Abkürzung, Wir können sagen.

Die drei Punkte stellen die dar Spread-Operator in ES6. Es erlaubt uns, einige Dinge in JavaScript zu tun:

1. Arrays verketten

    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. Destrukturieren eines Arrays

      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. Kombinieren von zwei Objekten

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

Es gibt eine andere Verwendung für die drei Punkte, die als bekannt ist Ruheparameter und es macht es möglich, alle Argumente einer Funktion als ein Array zu übernehmen.

4. Funktionsargumente als Array

     function fun1(...params) {
   
     }
   

Die drei Punkte in JavaScript sind die Spread / Rest-Operator.

Spread-Operator

Die Spread-Syntax ermöglicht die Erweiterung eines Ausdrucks an Stellen, an denen mehrere Argumente erwartet werden.

myFunction(...iterableObj);

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

[...Array(10)]

Ruheparameter

Die sich ausruhen Die Parametersyntax wird für Funktionen mit einer variablen Anzahl von Argumenten verwendet.

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

Der Spread/Rest-Operator für Arrays wurde eingeführt in ES6. Es gibt einen Zustand 2 Vorschlag für Objektverbreitung / Ruheeigenschaften.

TypeScript unterstützt auch die Spread-Syntax und kann diese in ältere Versionen von ECMAScript mit Minor transpilieren Themen.

... (drei Punkte in JavaScript) wird als Spread-Syntax oder Spread-Operator bezeichnet. Dies ermöglicht ein Iterable wie z Reihe Ausdruck bzw Schnur zu erweitern oder ein Objekt Ausdruck zu erweitern, wo immer platziert. Dies ist nicht spezifisch für React. Es ist ein JavaScript-Operator.

Alle diese Antworten hier sind hilfreich, aber ich möchte die am häufigsten verwendeten praktischen Anwendungsfälle der auflisten Spread-Syntax (Spread-Operator).

1. Arrays kombinieren (Arrays verketten)

Es gibt ein Vielzahl von Möglichkeiten, Arrays zu kombinieren, aber mit dem Spread-Operator können Sie dies an einer beliebigen Stelle in einem Array platzieren. Wenn Sie zwei Arrays kombinieren und Elemente an beliebiger Stelle innerhalb des Arrays platzieren möchten, können Sie wie folgt vorgehen:

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

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

2. Kopieren von Arrays

Wenn wir eine Kopie eines Arrays wollten, hatten wir früher die Array.prototypr.slice() Methode. Aber Sie können dasselbe mit dem Spread-Operator tun.

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

3. Aufrufen von Funktionen ohne Apply

Um in ES5 ein Array aus zwei Zahlen an die zu übergeben doStuff() Funktion verwenden Sie häufig die Funktion.prototyp.apply() Methode wie folgt:

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

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

Mit dem Spread-Operator können Sie jedoch ein Array an die Funktion übergeben.

doStuff(...args);

4. Destrukturieren von Arrays

Sie können die Destrukturierung und den Restoperator zusammen verwenden, um die Informationen nach Ihren Wünschen in Variablen zu extrahieren:

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. Funktionsargumente als Restparameter

ES6 hat auch die drei Punkte ( …), die ein Restparameter sind, der alle verbleibenden Argumente einer Funktion in einem Array sammelt.

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

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

6. Verwenden von mathematischen Funktionen

Jede Funktion, bei der Spread als Argument verwendet wird, kann von Funktionen verwendet werden, die eine beliebige Anzahl von Argumenten akzeptieren können.

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

7. Kombinieren von zwei Objekten

Sie können den Spread-Operator verwenden, um zwei Objekte zu kombinieren. Dies ist eine einfache und saubere Methode.

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

var carFuel="Petrol";

var carData = {
  ...carType,
  carFuel
}

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

8. Trennen Sie eine Zeichenfolge in separate Zeichen

Sie können den Spread-Operator verwenden, um eine Zeichenfolge in einzelne Zeichen zu verteilen.

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

Sie können sich weitere Möglichkeiten vorstellen, den Spread-Operator zu verwenden. Was ich hier aufgelistet habe, sind die beliebten Anwendungsfälle davon.

Dies ist eine Funktion von ES6, die auch in React verwendet wird. Sehen Sie sich das folgende Beispiel an:

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

Dieser Weg ist in Ordnung, wenn wir maximal drei Parameter haben. Aber was ist, wenn wir zum Beispiel 110 Parameter hinzufügen müssen? Sollen wir sie alle definieren und nacheinander hinzufügen?

Natürlich gibt es einen einfacheren Weg, der aufgerufen wird Verbreitung. Anstatt all diese Parameter zu übergeben, schreiben Sie:

function (...numbers){} 

Wir haben keine Ahnung, wie viele Parameter wir haben, aber wir wissen, dass es jede Menge davon gibt.

Beyogen auf ES6können wir die obige Funktion wie folgt umschreiben und die Verteilung und Zuordnung zwischen ihnen verwenden, um es so einfach wie ein Kinderspiel zu machen:

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

Ein großes Lob an Brandon Morelli. Er hat es perfekt erklärt Hieraber Links können sterben, also füge ich einfach den folgenden Inhalt ein:

Die Spread-Syntax besteht einfach aus drei Punkten: ...
Es ermöglicht einem Iterable, an Stellen zu expandieren, an denen 0+ Argumente erwartet werden. Definitionen sind ohne Kontext schwierig. Lassen Sie uns einige verschiedene Anwendungsfälle untersuchen, um zu verstehen, was dies bedeutet.

Beispiel 1 – Einfügen von Arrays

Sehen Sie sich den Code unten an. In diesem Code verwenden wir nicht die Spread-Syntax:

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

console.log(arr);

Oben haben wir ein Array mit dem Namen erstellt mid. Wir erstellen dann ein zweites Array, das unsere enthält mid Reihe. Abschließend loggen wir das Ergebnis aus. Was erwartest du arr zu drucken? Klicken Sie oben auf Ausführen, um zu sehen, was passiert. Hier ist die Ausgabe:

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

Ist das das erwartete Ergebnis?

Durch das Einfügen der mid Array in die arr Array haben wir ein Array innerhalb eines Arrays erhalten. Das ist in Ordnung, wenn das das Ziel war. Aber was, wenn Sie nur ein einzelnes Array mit den Werten von 1 bis 6 wollen? Um dies zu erreichen, können wir die Spread-Syntax verwenden! Denken Sie daran, dass die Spread-Syntax die Erweiterung der Elemente unseres Arrays ermöglicht.

Schauen wir uns den folgenden Code an. Alles ist gleich – außer dass wir jetzt die Spread-Syntax verwenden, um die einzufügen mid Array in die arr Array:

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

console.log(arr);

Und wenn Sie auf die Schaltfläche „Ausführen“ klicken, ist hier das Ergebnis:

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

Fantastisch!

Erinnern Sie sich an die Definition der Spread-Syntax, die Sie gerade oben gelesen haben? Hier kommt es ins Spiel. Wie Sie sehen können, wenn wir die erstellen arr Array und verwenden Sie den Spread-Operator für die mid Array, anstatt nur eingefügt zu werden, die mid Array erweitert. Diese Erweiterung bedeutet, dass jedes einzelne Element in der mid Array wird in die eingefügt arr Reihe. Anstelle von verschachtelten Arrays ist das Ergebnis ein einzelnes Array mit Zahlen von 1 bis 6.

Beispiel 2 – Math

JavaScript hat ein eingebautes mathematisches Objekt, mit dem wir einige lustige mathematische Berechnungen durchführen können. In diesem Beispiel betrachten wir Math.max(). Wenn Sie sich nicht auskennen, Math.max() gibt die größte von null oder mehr Zahlen zurück. Hier sind ein paar Beispiele:

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

Wie Sie sehen können, wenn Sie den Maximalwert mehrerer Zahlen finden möchten, Math.max() erfordert mehrere Parameter. Leider können Sie nicht einfach ein einzelnes Array als Eingabe verwenden. Vor der Spread-Syntax die einfachste Art der Verwendung Math.max() auf einem Array zu verwenden ist .apply().

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

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

console.log(max(arr));

Es funktioniert, es ist nur sehr nervig.

Schauen Sie sich nun an, wie wir genau dasselbe mit der Spread-Syntax machen:

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

console.log(max);

Anstatt eine Funktion erstellen und die apply-Methode verwenden zu müssen, um das Ergebnis von zurückzugeben Math.max() , brauchen wir nur zwei Codezeilen! Die Spread-Syntax erweitert unsere Array-Elemente und gibt jedes Element in unserem Array einzeln in die ein Math.max() Methode!

Beispiel 3 – Kopieren eines Arrays

In JavaScript können Sie ein Array nicht einfach kopieren, indem Sie eine neue Variable gleich einem bereits vorhandenen Array setzen. Betrachten Sie das folgende Codebeispiel:

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

console.log(arr2);

Wenn Sie auf Ausführen drücken, erhalten Sie die folgende Ausgabe:

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

Jetzt sieht es auf den ersten Blick so aus, als hätte es funktioniert – es sieht so aus, als hätten wir die Werte von arr in arr2 kopiert. Aber das ist nicht passiert. Sie sehen, wenn wir mit Objekten in JavaScript arbeiten (Arrays sind ein Objekttyp), weisen wir sie nach Referenz zu, nicht nach Wert. Das bedeutet, dass arr2 der gleichen Referenz wie arr zugewiesen wurde. Mit anderen Worten, alles, was wir mit arr2 tun, wirkt sich auch auf das ursprüngliche arr-Array aus (und umgekehrt). Schauen Sie unten:

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

arr2.push('d');

console.log(arr);

Oben haben wir ein neues Element d in arr2 geschoben. Wenn wir jedoch den Wert von arr ausloggen, werden Sie sehen, dass der d-Wert ebenfalls zu diesem Array hinzugefügt wurde:

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

Aber keine Angst! Wir können den Spread-Operator verwenden! Betrachten Sie den folgenden Code. Es ist fast das gleiche wie oben. Stattdessen haben wir jedoch den Spread-Operator in einem Paar eckiger Klammern verwendet:

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

console.log(arr2);

Klicken Sie auf Ausführen, und Sie sehen die erwartete Ausgabe:

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

Oben wurden die Array-Werte in arr zu einzelnen Elementen erweitert, die dann arr2 zugewiesen wurden. Wir können jetzt das Array arr2 so oft ändern, wie wir möchten, ohne Auswirkungen auf das ursprüngliche Array arr:

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

arr2.push('d');

console.log(arr);

Auch hier liegt der Grund dafür, dass der Wert von arr erweitert wird, um die Klammern unserer Array-Definition arr2 zu füllen. Daher setzen wir arr2 so, dass es den einzelnen Werten von arr entspricht, anstatt wie im ersten Beispiel auf arr zu verweisen.

Bonusbeispiel – String zu Array

Als lustiges letztes Beispiel können Sie die Spread-Syntax verwenden, um eine Zeichenfolge in ein Array umzuwandeln. Verwenden Sie einfach die Spread-Syntax innerhalb eines Paares eckiger Klammern:

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

console.log(chars);