Co robią te trzy kropki w Reaccie?

Jak wiesz ...nazywane są Spread atrybuty które reprezentuje nazwa pozwala na rozszerzenie wyrażenia.

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

I w tym przypadku (uproszczę to).

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

Więc w skrócie, jest to czysty Skrót, możemy powiedzieć.

Trzy kropki w JavaScript to operator spread / rest .

Operator spreadu

Składnia rozproszona pozwala na rozszerzenie wyrażenia w miejscach, w których oczekuje się wielu argumentów.

myFunction(...iterableObj);

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

[...Array(10)]

Parametry odpoczynku

Składnia parametru rest jest używana dla funkcji o zmiennej liczbie argumentów.

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

Operator spread / rest dla tablic został wprowadzony w ES6. Jest stan 2 propozycja {[12] } dla właściwości obiektu spread / rest.

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

Jest to cecha es6, która jest również używana w Reaccie. 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 dodać je jeden po drugim?! Oczywiście istnieje łatwiejszy sposób, który nazywa się rozprzestrzenianiem. Zamiast przekazywać wszystkie te parametry piszesz:

function (...numbers){} 

Nie mamy pojęcia, ile parametrów mamy, ale wiemy, że jest ich mnóstwo. Na podstawie es6 we można przepisać powyższą funkcję, jak poniżej i użyć spread i mapowania między nimi, aby uczynić 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

Dla tych, którzy pochodzą ze świata Pythona, atrybuty rozprzestrzeniania JSX są równoważne rozpakowywanie list argumentów (Operator Pythona **).

Zdaję sobie sprawę, że to jest pytanie JSX, ale praca z analogiami czasami pomaga je szybciej uzyskać.

Trzy kropki reprezentują Operator spreadu W ES6. Pozwala nam to zrobić sporo rzeczy w Javascript:

1. Kopiowanie tablicy

   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. Destrukcja 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. Argumenty funkcji jako tablica

    function fun1(...params) { 
   
    }  
   

Powyższe jest znane jako parametry rest i nie ogranicza liczby wartości przekazywanych do funkcji. Jednak argumenty muszą być tego samego Typ.

1. Czesanie 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'}
   

To tylko definiowanie rekwizytów w inny sposób w JSX dla Ciebie!

Używa tablicy ... i operatora obiektu w ES6 (obiekt pierwszy nie jest jeszcze w pełni obsługiwany), więc w zasadzie, jeśli już zdefiniowałeś swoje właściwości, możesz przekazać je do swojego elementu w ten sposób.

Więc 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 oddzielone i mogą być ponownie użyte w razie potrzeby.

Jest równa:

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

Są to cytaty z zespołu Reacta na temat operatora spreadu w JSX:

JSX Spread Attributes Jeśli znasz wszystkie właściwości, które chcesz umieścić na komponencie z wyprzedzeniem jest łatwy w użyciu 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 do obiektu później:

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ć na właściwe proptypy aż do czasu. Oznacza to, że twoje proptypy błędy kończą się tajemniczym śladem stosu.

Rekwizyty powinny być uważane za niezmienne. Mutacja obiektu rekwizytów gdzie indziej może spowodować nieoczekiwane konsekwencje, więc idealnie byłoby bądź w tym momencie zamrożonym obiektem.

Spread atrybuty
teraz możesz użyć nowej funkcji JSX o nazwie spread attributes:

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

Właściwości obiektu, który przekazujesz są skopiowane na rekwizyty komponentu.

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

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

O co chodzi z tym dziwactwem ?.. notacja?
The ... operator (lub operator spreadu) jest już obsługiwany dla tablic w ES6. Jest też propozycja ECMAScript dotycząca właściwości Rest I Spread obiektów. Jesteśmy korzystając z tych wspieranych i opracowywanie norm w celu aby zapewnić czystszą składnię w JSX.

...(operator spreadu) jest używany w reaccie na:

Zapewniają zgrabny sposób przekazywania właściwości z komponentów rodzica na komponenty potomne. np. biorąc pod uwagę te właściwości w komponencie nadrzędnym,

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

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

Który jest podobny do tego

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

Trzy kropki (...) nazywane są operatorem rozproszenia, a jest to koncepcyjnie podobne do operatora rozproszenia tablicy ES6, JSX korzystanie z tych wspieranych i rozwijanie standardów w celu zapewnienia czystszej składni w JSX

Właściwości Spread w inicjalizatorach obiektów kopiują własne wyliczenia właściwości z dostarczonego 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

W skrócie, trzy kropki ... jest operatorem spreadu w ES6 (ES2015). Operator spread pobierze wszystkie dane.

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

Konsola.log(b); podaj wynik [1,2,3,4,5,6]

Konsola.log(c); podaj wynik [7,8,1,2,3,4]

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

{ ... to.rekwizyty są własnością tego.rekwizyty

Użycie { ... Operator spreadu z podpórkami poniżej

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}

> 

Z { ... } Spread

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

Tweet dana Abramova o operatorze spreadu (twórcy Redux) https://twitter.com/dan_abramov/status/694519379191545856?lang=en

Powszechną praktyką jest przekazywanie rekwizytów w aplikacji Reactowej. W ten sposób możemy zastosować zmiany stanu do komponentu potomnego niezależnie od tego, czy jest on czysty czy nieczysty (bezstanowy czy Stanowy). Są momenty, w których najlepszym podejściem, kiedy przekazujesz rekwizyty, jest przekazanie pojedynczych Właściwości lub całego obiektu właściwości. Dzięki wsparciu dla macierzy w ES6 otrzymaliśmy"..."notacja i dzięki temu jesteśmy teraz w stanie osiągnąć przekazanie całego przedmiotu dziecku.

Typowy proces przekazywania rekwizytów dziecku jest odnotowany w tej składni:

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

Jest to w porządku używać, 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 potrzebnych w komponencie potomnym i typową metodą JavaScript jest proste ustawienie tych właściwości i powiązanie z obiektem później. Powoduje to problemy z sprawdzaniem propType i cryptic stack trace błędy, które nie są pomocne i powodują opóźnienia w debugowaniu. Poniżej znajduje się przykład tej praktyki i czego nie 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 to:

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

Ale nie używa spreadu JSX lub 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 "...props" to foo: x, bar: y. można to łączyć z innymi atrybutami, aby nadpisać właściwości "...props " używając tej składni:

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

Dodatkowo możemy kopiować na siebie inne obiekty Właściwości lub łą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 scalić dwa różne obiekty w ten sposób (nie jest to jeszcze dostępne we wszystkich wersjach Reacta):

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

Innym sposobem na wyjaśnienie tego, według Strony Facebook react / docs jest:

Jeśli masz już" rekwizyty "jako obiekt i chcesz przekazać je w JSX, możesz użyć"..."jako operator spreadu przekazać cały obiekt rekwizytów. Następujące 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 rozproszenia mogą być przydatne podczas budowania kontenerów generycznych. Mogą jednak również sprawić, że Twój kod będzie bałaganiony, ułatwiając przekazywanie wielu nieistotnych właściwości komponentom, które się nimi nie przejmują. Składnia ta powinna być używana oszczędnie.

Jest to nowa funkcja w ES6 / Harmony. Nazywa się operatorem rozprzestrzeniania. Pozwala ona na oddzielenie części składowych tablicy / obiektu lub na pobranie wielu elementów / parametrów i sklejenie ich razem. Oto przykład:

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

I z obiektem / 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, aby oznaczać "resztę 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

W javascript nazywa się to składnią spreadową.

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 to zrobić za pomocą funkcji Object.assign() w javascript.

Odniesienie:

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

Są to tzw. spready. Jak sama nazwa wskazuje. Oznacza to, że umieszcza w tych tablicach lub obiektach dowolną jego wartość.

Takie jak:

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