Co robią te trzy kropki w React?

Co robi ...ten kod React (używając JSX) i jak się nazywa?

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

To jest notacja rozprzestrzeniania się własności . Został dodany w ES2018 (spread dla tablic / iterable był wcześniejszy, ES2015), ale przez długi czas był obsługiwany w projektach React poprzez transpilację (jako „ atrybuty rozprzestrzeniania JSX ”, nawet jeśli można to zrobić również w innym miejscu, nie tylko atrybuty ).

{...this.props} rozkłada „własne” wyliczalne właściwości propsjako osobne właściwości na Modaltworzonym elemencie. Na przykład, jeżeli this.propszawarte a: 1i b: 2, a następnie

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

byłby taki sam jak

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

Ale jest dynamiczny, więc wszystkie „własne” właściwości propssą uwzględnione.

Ponieważ childrenjest to własność „własna” w props, spread obejmie ją. Więc jeśli komponent, w którym to się pojawia, zawiera elementy potomne, zostaną one przekazane do Modal. Umieszczanie elementów potomnych między tagiem otwierającym a tagami zamykającymi to po prostu cukier składniowy - dobry rodzaj - do umieszczania childrenwłaściwości w tagu otwierającym. Przykład:

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>

Notacja rozproszona jest przydatna nie tylko w tym przypadku użycia, ale także do tworzenia nowego obiektu z większością (lub wszystkimi) właściwościami istniejącego obiektu - co pojawia się często podczas aktualizacji stanu, ponieważ nie można go zmodyfikować bezpośrednio:

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

Zastępuje this.state.foogo nowy obiekt o tych samych właściwościach, fooz wyjątkiem awłaściwości, która staje się "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;
}

Jak wiesz, ...nazywa się je Atrybutami Rozprzestrzeniania, których nazwa reprezentuje, umożliwia rozszerzenie wyrażenia.

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

I w tym przypadku (zamierzam to uprościć).

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

To:

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

jest równe

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

Krótko mówiąc, możemy powiedzieć , że jest to fajny skrót .

Trzy kropki reprezentują operatora Spread w ES6. Pozwala nam to zrobić kilka rzeczy w Javascript:

1. Połącz tablice

   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. Niszczenie tablicy

     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. Łączenie dwóch obiektów

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

Istnieją trzy zastosowania trzech kropek, które są znane jako parametry spoczynkowe i umożliwiają przeniesienie wszystkich argumentów do funkcji jako jednej tablicy.

4. Argumenty funkcji jako tablica

    function fun1(...params) { 
   
    }  
   

Trzy kropki w JavaScript to operator rozłożenia / spoczynku .

Operator rozsiewu

Składnia spread pozwala wyrazem zostać rozszerzona w miejscach, gdzie są oczekiwane wiele argumentów.

myFunction(...iterableObj);

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

[...Array(10)]

Parametry odpoczynku

Reszta składnia parametr jest używany dla funkcji o zmiennej liczbie argumentów.

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

Operator rozkładania / odpoczynku dla tablic został wprowadzony w ES6. Istnieje propozycja stanu 2 dla właściwości rozkładania / odpoczynku obiektów.

TypeScript obsługuje również składnię stron widzących i może przenosić ją do starszych wersji ECMAScript z drobnymi problemami .

Jest to funkcja ES6, która jest również używana w React. Spójrz na poniższy przykład:

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

Ten sposób jest w porządku, jeśli mamy maksymalnie 3 parametry. Ale co, jeśli musimy dodać na przykład 110 parametrów. Czy powinniśmy zdefiniować je wszystkie i dodawać je jeden po drugim?

Oczywiście istnieje łatwiejszy sposób, który nazywa się SPREAD . Zamiast przekazać wszystkie te parametry, które piszesz:

function (...numbers){} 

Nie mamy pojęcia, ile mamy parametrów, ale wiemy, że jest ich mnóstwo. W oparciu o ES6 możemy przepisać powyższą funkcję jak poniżej i użyć rozkładania i mapowania między nimi, aby było to tak proste jak bułka z masłem:

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

Po prostu definiuje rekwizyty w inny sposób w JSX dla Ciebie!

Używa ...operatora tablic i obiektów w ES6 (obiekt nie jest jeszcze w pełni obsługiwany), więc w zasadzie, jeśli już zdefiniowałeś swoje rekwizyty, możesz w ten sposób przekazać je swojemu elementowi.

W twoim przypadku kod powinien wyglądać mniej więcej tak:

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

więc rekwizyty, które zdefiniowałeś, są teraz rozdzielone i mogą być ponownie użyte w razie potrzeby.

Jest to równe:

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

Oto cytaty z zespołu React dotyczące operatora spreadów w JSX:

Atrybuty rozprzestrzeniania JSX Jeśli znasz wszystkie właściwości, które chcesz umieścić w komponencie z wyprzedzeniem, łatwo jest użyć JSX:

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

Mutowanie rekwizytów jest złe
Jeśli nie wiesz, które właściwości chcesz ustawić, możesz pokusić się o dodanie ich później do obiektu:

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

Jest to anty-wzorzec, ponieważ oznacza, że ​​nie możemy pomóc ci sprawdzić właściwych propTypes aż do później. Oznacza to, że błędy PropTypes kończą się zaszyfrowaniem stosu.

Rekwizyty należy uznać za niezmienne. Mutowanie obiektu rekwizytów w innym miejscu może spowodować nieoczekiwane konsekwencje, więc idealnie byłoby to w tym momencie zamrożony obiekt.

Rozprzestrzenianie atrybutów
Teraz możesz użyć nowej funkcji JSX o nazwie atrybuty rozprzestrzeniania:

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

Właściwości przekazywanego obiektu są kopiowane na rekwizyty komponentu.

Możesz użyć tego wielokrotnie lub połączyć z innymi atrybutami. Kolejność specyfikacji jest ważna. Późniejsze atrybuty zastępują poprzednie.

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

O co chodzi z tym dziwnym ... zapisem?
Operator ... (lub operator rozkładania) jest już obsługiwany dla tablic w ES6. Istnieje również propozycja ECMAScript dla właściwości Rest Object i Spread. Korzystamy z tych obsługiwanych i rozwijanych standardów, aby zapewnić czystszą składnię w JSX.

Dla tych, którzy pochodzą ze świata Python, atrybuty rozprzestrzeniania JSX są równoważne z rozpakowaniem list argumentów ( **operator Python ).

Wiem, że jest to pytanie JSX, ale praca z analogiami czasami pomaga uzyskać je szybciej.

...(Operator spread) stosuje się w reakcji z:

zapewniają dobry sposób przekazywania rekwizytów z komponentów nadrzędnych do podrzędnych. np. biorąc pod uwagę te rekwizyty w komponencie macierzystym,

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

można je przekazać dziecku w następujący sposób,

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

który jest podobny do tego

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

ale o wiele czystsze.

Trzy kropki ...oznaczają operatory rozprzestrzeniania lub parametry spoczynkowe ,

Pozwala rozszerzyć wyrażenie lub ciąg tablicowy lub cokolwiek, co może być iteracją, w miejscach, w których oczekiwane jest zero lub więcej argumentów dla wywołań funkcji lub elementów tablicy.

• Scal dwie tablice

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

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

• Kopiowanie tablicy:

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

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

Uwaga: Składnia rozprzestrzeniania efektywnie idzie o jeden poziom w głąb podczas kopiowania tablicy. Dlatego może nie nadawać się do kopiowania tablic wielowymiarowych, jak pokazano w poniższym przykładzie (to samo z Object.assign () i składnią rozkładania).

• Dodaj wartości jednej tablicy do drugiej pod określonym indeksem, np. 3:

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

• Podczas wywoływania konstruktora z nowym:

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

console.log(d);

• Rozłożone w literałach obiektowych:

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}

Zauważ, że foowłaściwość obj1 została nadpisana przez foowłaściwość obj2

• Jako składnia parametru reszty, która pozwala nam reprezentować nieokreśloną liczbę argumentów jako tablicę:

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

Uwaga: Składnia spreadu (inna niż w przypadku właściwości spreadu) może być zastosowana tylko do obiektów iterowalnych: więc następujące błędy spowodują błąd

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

Odniesienie 1

Odniesienie 2

Uznanie dla Brandona Morelli. Wyjaśnił tutaj doskonale , ale linki mogą umrzeć, więc wklejam tylko poniższe treści:

Składnia spreadu składa się z trzech kropek: ... pozwala iterowalnym rozwinąć się w miejscach, w których spodziewane są argumenty 0+. Definicje są trudne bez kontekstu. Przeanalizujmy kilka różnych przypadków użycia, aby zrozumieć, co to oznacza.

Przykład # 1 - Wstawianie tablic Spójrz na poniższy kod. W tym kodzie nie używamy składni spreadu:

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

console.log(arr);

Powyżej stworzyliśmy tablicę o nazwie mid. Następnie tworzymy drugą tablicę, która zawiera naszą midtablicę. Na koniec wylogowujemy wynik. Czego oczekujesz arrdo wydrukowania? Kliknij Uruchom powyżej, aby zobaczyć, co się stanie. Oto wynik:

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

Czy tego oczekiwałeś? Wstawiając midtablicę do arrtablicy, otrzymaliśmy tablicę w tablicy. W porządku, jeśli to był cel. Ale co, jeśli chcesz tylko jedną tablicę o wartościach od 1 do 6? Aby to osiągnąć, możemy użyć składni spreadu! Pamiętaj, że składnia spreadu pozwala na rozszerzenie elementów naszej tablicy. Spójrzmy na poniższy kod. Wszystko jest takie samo - z wyjątkiem tego, że teraz używamy składni spreadu do wstawienia midtablicy do arrtablicy:

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

console.log(arr);

A kiedy naciśniesz przycisk uruchamiania, oto wynik:

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

Niesamowite! Pamiętasz definicję składni spreadu, którą właśnie przeczytałeś powyżej? Oto, gdzie wchodzi w grę. Jak widać, kiedy tworzymy arrtablicę i używamy operatora rozkładania na midtablicy, zamiast po prostu wstawiać, midtablica się rozwija. To rozszerzenie oznacza, że ​​każdy element w midtablicy jest wstawiany do arrtablicy. Zamiast zagnieżdżonych tablic wynikiem jest pojedyncza tablica liczb od 1 do 6.

Przykład 2 - Matematyka JavaScript ma wbudowany obiekt matematyczny, który pozwala nam wykonywać zabawne obliczenia matematyczne. W tym przykładzie przyjrzymy się Math.max(). Jeśli nie jesteś zaznajomiony, Math.max()zwraca największą z zer lub więcej liczb. Oto kilka przykładów:

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

Jak widać, jeśli chcesz znaleźć maksymalną wartość wielu liczb, Math.max()wymaga wielu parametrów. Niestety nie możesz po prostu użyć jednej tablicy jako danych wejściowych. Przed składnią rozprzestrzeniania najłatwiejszym sposobem na użycie Math.max()tablicy jest użycie.apply()

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

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

console.log(max(arr));

To działa, to po prostu bardzo denerwujące. Teraz spójrz, jak robimy to samo dokładnie ze składnią rozprzestrzeniania:

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

console.log(max);

Zamiast tworzyć funkcję i używać metody Apply do zwrócenia wyniku Math.max(), potrzebujemy tylko dwóch linii kodu! Składnia rozprzestrzeniania rozszerza nasze elementy tablicy i wprowadza każdy element z naszej tablicy indywidualnie do Math.max()metody!

Przykład 3 - Kopiowanie tablicy W JavaScript nie można po prostu skopiować tablicy, ustawiając nową zmienną równą już istniejącej tablicy. Rozważ następujący przykład kodu:

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

console.log(arr2);

Po naciśnięciu przycisku Uruchom otrzymasz następujące dane wyjściowe:

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

Teraz na pierwszy rzut oka wygląda na to, że zadziałało - wygląda na to, że skopiowaliśmy wartości arr do arr2. Ale tak się nie stało. Widzisz, podczas pracy z obiektami w javascript (tablice są rodzajem obiektu) przypisujemy je przez odwołanie, a nie wartość. Oznacza to, że arr2 został przypisany do tego samego odwołania, co arr. Innymi słowy, wszystko, co zrobimy dla arr2, wpłynie również na oryginalną tablicę arr (i odwrotnie). Spójrz poniżej:

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

arr2.push('d');

console.log(arr);

Powyżej umieściliśmy nowy element d w arr2. Kiedy jednak wylogujemy się z wartości arr, zobaczysz, że wartość d została również dodana do tej tablicy:

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

Nie musisz się jednak bać! Możemy użyć operatora rozrzutu! Rozważ poniższy kod. To prawie tak samo jak powyżej. Zamiast tego użyliśmy operatora rozkładania w parze nawiasów kwadratowych:

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

console.log(arr2);

Naciśnij Uruchom, a zobaczysz oczekiwany wynik:

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

Powyżej wartości tablicy w arr zostały rozszerzone, aby stać się pojedynczymi elementami, które następnie zostały przypisane do arr2. Możemy teraz zmienić tablicę arr2 tak, jak byśmy tego chcieli, bez konsekwencji dla oryginalnej tablicy arr:

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

arr2.push('d');

console.log(arr);

Ponownie powodem tego jest to, że wartość arr jest rozszerzana, aby wypełnić nawiasy naszej definicji tablicy arr2. Tak więc ustawiamy arr2, aby zrównywał poszczególne wartości arr zamiast odwołania do arr, tak jak to zrobiliśmy w pierwszym przykładzie.

Przykład bonusu - ciąg znaków do tablicy Jako zabawny ostatni przykład, możesz użyć składni spreadu do konwersji ciągu znaków na tablicę. Po prostu użyj składni spreadu w parze nawiasów kwadratowych:

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

console.log(chars);

Trzy kropki (...)nazywane są operatorem rozprzestrzeniania, i jest to koncepcyjnie podobne do operatora rozprzestrzeniania macierzy ES6, JSX wykorzystuje te obsługiwane i opracowuje standardy, aby zapewnić czystszą składnię w JSX

Rozłóż właściwości w inicjalizatorach obiektów kopiuje własne wyliczalne właściwości z podanego obiektu na nowo utworzony obiekt.

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

Odniesienie:

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

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

Znaczenie ... zależy od tego, gdzie używasz go w kodzie,

1. Służy do rozkładania / kopiowania tablicy / obiektu - pomaga skopiować tablicę / obiekt, a także dodać nowe wartości tablicy / dodać nowe właściwości do obiektu, co jest opcjonalne.

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. Służy do scalania argumentów funkcji w jedną tablicę - możesz wtedy użyć na niej funkcji tablicowych.

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

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

To operator rozprzestrzeniania ...

Na przykład, jeśli masz tablicę first=[1,2,3,4,5]i inną second=[6,7,8].

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

To samo można również zrobić z obiektami Json.

W skrócie, trzy kropki ...to operator rozrzutu w ES6 (ES2015). Operator spreadu pobierze wszystkie dane.

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


console.log(b);

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

console.log(c);

Daje wynik [7,8,1,2,3,4]

Zwykle nazywany jest operatorem rozprzestrzeniania, służy do rozszerzania wszędzie tam, gdzie jest to wymagane

przykład

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

możesz tego użyć wszędzie tam, gdzie jest to potrzebne, bardziej na temat operatora spreadu Składnia spreadu .

Rozłóż atrybuty używane do przekazania wielu właściwości w prosty sposób

{... this.props} posiada własność this.props

Korzystanie z {...} Spread Operator z poniższymi rekwizytami

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

Bez {...} Spread

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

> 

Dzięki {...} Spread

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

Tweet Dana Abramova o operatorze Spread (Creator of Redux)

... ta składnia jest częścią ES6 i nie jest czymś, czego można używać tylko w React. Można jej używać na dwa różne sposoby; jako operator rozkładania LUB jako parametr spoczynkowy. Więcej informacji można znaleźć w tym artykule: https://www.techiediaries.com/react-spread-operator-props-setstate/

to, o czym wspomniałeś w pytaniu, jest coś takiego, załóżmy, że tak,

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

za pomocą operatora rozprzestrzeniania można przekazywać rekwizyty do komponentu w ten sposób.

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

Powszechną praktyką jest przekazywanie rekwizytów w aplikacji React. Robiąc to, jesteśmy w stanie zastosować zmiany stanu do elementu potomnego, niezależnie od tego, czy jest on czysty, czy nieczysty (bezstanowy lub stanowy). Są chwile, kiedy najlepszym podejściem, gdy podaje się rekwizyty, jest przejście właściwości pojedynczych lub całego obiektu właściwości. Dzięki obsłudze tablic w ES6 otrzymaliśmy notację „...” i dzięki temu jesteśmy w stanie osiągnąć przekazanie całego obiektu dziecku.

Typowy proces przekazywania rekwizytów dziecku jest odnotowany za pomocą następującej składni:

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

Jest to przydatne, gdy liczba rekwizytów jest minimalna, ale staje się niemożliwa do zarządzania, gdy liczba rekwizytów jest zbyt duża. Problem z tą metodą występuje, gdy nie znasz właściwości wymaganych w komponencie potomnym, a typową metodą JavaScript jest proste ustawienie tych właściwości i późniejsze powiązanie z obiektem. Powoduje to problemy z sprawdzaniem propType i błędami śledzenia stosu kryptycznego, które nie są pomocne i powodują opóźnienia w debugowaniu. Oto przykład tej praktyki i tego, czego nie należy robić:

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

Ten sam wynik można osiągnąć, ale z bardziej odpowiednim sukcesem, wykonując następujące czynności:

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

Ale nie używa spreadu JSX ani JSX, więc aby zapętlić to z powrotem do równania, możemy teraz zrobić coś takiego:

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

Właściwości zawarte w „... rekwizytach” to foo: x, bar: y. Można to połączyć z innymi atrybutami, aby zastąpić właściwości „... rekwizytów” przy użyciu tej składni:

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

Ponadto możemy skopiować na siebie inne obiekty własności lub połączyć je w ten sposób:

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

Lub scal dwa różne obiekty takie jak ten (nie jest to jeszcze dostępne we wszystkich wersjach reagujących):

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

Innym sposobem na wyjaśnienie tego, zgodnie z witryną React / Docs na Facebooku, jest:

Jeśli masz już „rekwizyty” jako obiekt i chcesz przekazać go w JSX, możesz użyć „...” jako operatora SPREAD, aby przekazać cały obiekt rekwizytów. Poniższe dwa przykłady są równoważne:

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



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

Atrybuty rozkładania mogą być przydatne podczas budowania ogólnych kontenerów. Mogą jednak również powodować bałagan w kodzie, ułatwiając przekazywanie wielu nieistotnych rekwizytów do komponentów, które nie dbają o nie. Tej składni należy używać oszczędnie.

Nazywa się to operatorem spreadu. Na przykład let hello = {name: '', msg: ''} let hello1 = {... hello} Teraz właściwości obiektu hello są kopiowane do hello1.

Nazywa się to składnią spreadów w javascript.

Służy do niszczenia tablicy lub obiektu w javascript.

przykład:

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)

Możesz zrobić to samo z Object.assign()funkcją w javascript.

Odniesienie: Składnia spreadu

Zostanie to skompilowane w:

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

gdzie daje więcej dwóch właściwości titlei animationwięcej niż propselement hosta ma.

...to operator ES6 o nazwie Spread .

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

operator rozprzestrzeniania (potrójny) wprowadza w skrypcie ecama 6 (ES6). Skrypt Eama (ES6) jest opakowaniem javascript.

rozłóż operatorowi wyliczalne właściwości w rekwizytach. this.props = {firstName: „Dan”, lastName: „Abramov”, miasto: „New York”, kraj: „USA”}

{... this.props} = {firstName: „Dan”, lastName: „Abramov”, miasto: „New York”, kraj: „USA”}

Ale główny typ operatora rozprzestrzeniania jest używany jako typ odniesienia.

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

person1.name = "Raheel";

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

Nazywa się to typem odniesienia, jeden obiekt wpływa na inne obiekty, ponieważ można je współużytkować w pamięci. Jeśli otrzymujesz wartość niezależnie oznacza pamięć rozproszenia, obaj używaj operatora rozkładania.

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

person2.name = "Shahzad";

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

jeśli masz tablicę elementów i chcesz wyświetlić elementy, których po prostu używasz ... macierze tablicowe i będzie iterować po wszystkich elementach

...(trzy kropki w Javascript) nazywa się Spread Syntax lub Spread Operator. Umożliwia to rozwinięcie iterowalnego wyrażenia lub ciągu tablicowego lub rozwinięcie wyrażenia obiektowego w dowolnym miejscu. Nie dotyczy to React. Jest to operator Javascript.

Wszystkie te odpowiedzi tutaj są pomocne, ale chcę wymienić najczęściej używane praktyczne przypadki użycia składni spreadu (operator spreadu).

1. Połącz tablice (tablice konkatenacji)

Istnieje wiele sposobów łączenia tablic , ale operator rozkładania pozwala na umieszczenie tego w dowolnym miejscu w tablicy. Jeśli chcesz połączyć dwie tablice i umieścić elementy w dowolnym punkcie tablicy, możesz wykonać następujące czynności:

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

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

2. Kopiowanie tablic

Gdy potrzebowaliśmy kopii tablicy, mieliśmy metodę Array.prototypr.slice () . Ale możesz zrobić to samo z operatorem rozprzestrzeniania.

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

3. Wywołanie funkcji bez zastosowania

W ES5, aby przekazać tablicę dwóch liczb do doStuff()funkcji, często używasz metody Function.prototype.apply () w następujący sposób:

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

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

Jednak za pomocą operatora rozkładania można przekazać tablicę do funkcji.

doStuff(...args);

4. Tablice destrukcyjne

Możesz użyć restrukturyzacji i operatora reszty razem, aby wyodrębnić informacje do zmiennych, tak jak chcesz:

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. Argumenty funkcji jako parametry spoczynkowe

ES6 ma również trzy kropki (...), które są parametrem rest, który gromadzi wszystkie pozostałe argumenty funkcji w tablicy.

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

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

6. Korzystanie z funkcji matematycznych

Każda funkcja, w której jako argument używany jest rozkład, może być używana przez funkcje, które mogą przyjmować dowolną liczbę argumentów.

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

7. Łączenie dwóch obiektów

Za pomocą operatora rozkładania można łączyć dwa obiekty. Jest to łatwy i czystszy sposób na zrobienie tego.

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

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

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

8. Rozdziel ciąg znaków na osobne znaki

Za pomocą operatora rozkładania możesz rozłożyć ciąg znaków na osobne znaki.

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

Możesz wymyślić więcej sposobów korzystania z operatora Spread. Wymieniłem tutaj popularne przypadki użycia.

To nowa funkcja w ES6 / Harmony. Nazywa się to Operatorem Spreadu. Pozwala albo oddzielić części składowe tablicy / obiektu, albo wziąć wiele elementów / parametrów i skleić je ze sobą. Oto przykład:

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

I z przedmiotem / kluczami:

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

Naprawdę fajne jest to, że możesz użyć go do oznaczenia „reszty wartości”.

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

Są to tak zwane spready. Tak jak sama nazwa wskazuje. Oznacza to, że umieszcza dowolną jego wartość w tych tablicach lub obiektach.

Jak na przykład :

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