Apa yang dilakukan ketiga titik ini dalam Bereaksi?

Apa yang ...dilakukan dalam kode Bereaksi (menggunakan JSX) ini dan apa namanya?

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

Itu notasi sebaran properti . Itu ditambahkan dalam ES2018 (spread untuk array / iterables sebelumnya, ES2015), tetapi telah didukung dalam proyek Bereaksi untuk waktu yang lama melalui transpilasi (sebagai " atribut sebaran JSX " meskipun Anda bisa melakukannya di tempat lain juga, bukan hanya atribut ).

{...this.props} menyebar properti enumerable "sendiri" propssebagai properti diskrit pada Modalelemen yang Anda buat. Misalnya, jika this.propsberisi a: 1dan b: 2, maka

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

akan sama dengan

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

Tapi ini dinamis, jadi apa pun properti "milik" yang ada di dalamnya propsdisertakan.

Karena childrenmerupakan properti "milik sendiri" props, spread akan memasukkannya. Jadi jika komponen tempat ini muncul memiliki elemen anak, mereka akan diteruskan ke Modal. Menempatkan elemen anak di antara tag pembuka dan tag penutup hanyalah gula sintaksis - jenis yang bagus - untuk menempatkan childrenproperti di tag pembuka. Contoh:

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>

Notasi sebaran berguna tidak hanya untuk kasus penggunaan itu, tetapi untuk membuat objek baru dengan sebagian besar (atau semua) properti dari objek yang sudah ada - yang banyak muncul ketika Anda memperbarui keadaan, karena Anda tidak dapat mengubah keadaan langsung:

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

Itu menggantikan this.state.foodengan objek baru dengan semua properti yang sama seperti fookecuali aproperti, yang menjadi "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;
}

Seperti yang Anda ketahui ...disebut Atribut Sebarkan yang mewakili nama itu memungkinkan ekspresi diperluas.

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

Dan dalam hal ini (saya akan menyederhanakannya).

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

Ini:

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

adalah sama dengan

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

Jadi singkatnya, itu jalan pintas yang rapi , bisa kita katakan .

Tiga titik mewakili Operator Penyebaran di ES6. Ini memungkinkan kita melakukan beberapa hal dalam Javascript:

1. Array gabungan

   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. Merusak susunan 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. Menggabungkan dua objek

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

Ada kegunaan lain untuk tiga titik yang dikenal sebagai Parameter Istirahat dan memungkinkan untuk mengambil semua argumen ke fungsi sebagai satu array.

4. Berfungsi sebagai argumen array

    function fun1(...params) { 
   
    }  

Tiga titik dalam JavaScript adalah operator spread / rest .

Operator yang tersebar

The spread sintaks memungkinkan ekspresi diperluas di tempat-tempat di mana beberapa argumen diharapkan.

myFunction(...iterableObj);

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

[...Array(10)]

Parameter istirahat

The Sisanya sintaks parameter yang digunakan untuk fungsi dengan variabel jumlah argumen.

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

Operator spread / rest untuk array diperkenalkan pada ES6. Ada proposal State 2 untuk properti spread / rest property.

TypeScript juga mendukung sintaksis penyebaran dan dapat mentransformasikannya menjadi versi ECMAScript yang lebih lama dengan masalah kecil .

Ini adalah fitur ES6, yang digunakan dalam Bereaksi juga. Lihat contoh di bawah ini:

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

Cara ini baik-baik saja jika kita memiliki maksimal 3 parameter. Tapi, bagaimana jika kita perlu menambahkan misalnya 110 parameter. Haruskah kita mendefinisikan semuanya dan menambahkannya satu per satu?

Tentu saja ada cara yang lebih mudah untuk dilakukan, yang disebut SPREAD . Alih-alih melewati semua parameter yang Anda tulis:

function (...numbers){} 

Kami tidak tahu berapa banyak parameter yang kami miliki, tetapi kami tahu ada banyak parameter tersebut. Berdasarkan ES6, kita dapat menulis ulang fungsi di atas seperti di bawah ini dan menggunakan spread dan pemetaan di antara mereka untuk membuatnya semudah sepotong kue:

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

Itu hanya mendefinisikan alat peraga dengan cara yang berbeda di BEJ untuk Anda!

Ini menggunakan ...array dan operator objek di ES6 (objek satu belum sepenuhnya didukung), jadi pada dasarnya jika Anda sudah mendefinisikan alat peraga Anda, Anda bisa meneruskannya ke elemen Anda dengan cara ini.

Jadi dalam kasus Anda, kodenya harus seperti ini:

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

jadi alat peraga yang Anda tetapkan, sekarang dipisahkan dan dapat digunakan kembali jika perlu.

Itu sama dengan:

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

Ini adalah kutipan dari tim React tentang operator penyebaran di BEJ:

Atribut JSX Sebarkan Jika Anda mengetahui semua properti yang ingin Anda tempatkan pada komponen sebelumnya, mudah untuk menggunakan JSX:

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

Mutasi Alat Peraga Buruk
Jika Anda tidak tahu properti mana yang ingin Anda set, Anda mungkin tergoda untuk menambahkannya ke objek nanti:

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

Ini adalah anti-pola karena itu berarti kami tidak dapat membantu Anda memeriksa propTip yang benar sampai nanti. Ini berarti bahwa kesalahan propTypes Anda berakhir dengan jejak stack cryptic.

Alat peraga harus dianggap tidak berubah. Mutasi objek props di tempat lain dapat menyebabkan konsekuensi yang tidak terduga sehingga idealnya akan menjadi objek beku pada saat ini.

Sebarkan Atribut
Sekarang Anda dapat menggunakan fitur baru JSX yang disebut atribut sebaran:

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

Properti dari objek yang Anda lewati disalin ke props komponen.

Anda dapat menggunakan ini beberapa kali atau menggabungkannya dengan atribut lainnya. Urutan spesifikasi penting. Atribut kemudian menimpa yang sebelumnya.

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

Ada apa dengan notasi yang aneh ...?
Operator ... (atau operator spread) sudah didukung untuk array di ES6. Ada juga proposal ECMAScript untuk Object Rest dan Spread Properties. Kami mengambil keuntungan dari standar yang didukung dan dikembangkan ini untuk memberikan sintaksis lebih bersih di BEJ.

Bagi mereka yang datang dari dunia Python, JSX Spread Attributes setara dengan Unpacking Argument Lists (the Python **-operator).

Saya sadar ini adalah pertanyaan BEJ, tetapi bekerja dengan analogi terkadang membantu untuk membuatnya lebih cepat.

The ...(spread operator) digunakan dalam bereaksi terhadap:

memberikan cara yang rapi untuk meneruskan alat peraga dari komponen induk ke anak. mis diberikan alat peraga ini dalam komponen induk,

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

mereka dapat diteruskan dengan cara berikut kepada anak,

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

yang mirip dengan ini

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

tapi jauh lebih bersih.

Tiga titik ...mewakili Penyebar Operator atau Parameter Istirahat ,

Ini memungkinkan ekspresi array atau string atau apa pun yang dapat iterasi untuk diperluas di tempat-tempat di mana nol atau lebih argumen untuk panggilan fungsi atau elemen untuk array diharapkan.

• Gabungkan dua array

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

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

• Array penyalinan:

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

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

Catatan: Sebarkan sintaks secara efektif hingga kedalaman satu level saat menyalin array. Oleh karena itu, mungkin tidak cocok untuk menyalin array multidimensi seperti yang ditunjukkan contoh berikut (sama dengan Object.assign () dan menyebar sintaksis).

• Tambahkan nilai dari satu array ke yang lain di indeks spesifik misalnya 3:

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

• Saat memanggil konstruktor dengan yang baru:

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

console.log(d);

• Tersebar dalam objek literal:

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}

Perhatikan bahwa fooproperti obj1 telah ditimpa oleh fooproperti obj2

• Sebagai sintaks parameter lainnya yang memungkinkan kami untuk merepresentasikan sejumlah argumen sebagai array:

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

Catatan: Sebarkan sintaks (selain dari kasus properti sebaran) dapat diterapkan hanya pada objek yang dapat diubah: Jadi, berikut ini akan membuang kesalahan

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

Referensi1

Referensi2

Kudos to Brandon Morelli. Dia menjelaskan dengan sempurna di sini , tetapi tautan mungkin mati sehingga saya hanya menempelkan konten di bawah ini:

Sintaksis sebarannya hanya tiga titik: ... Ini memungkinkan iterable untuk berkembang di tempat-tempat di mana 0+ argumen diharapkan. Definisi itu sulit tanpa konteks. Mari kita telusuri beberapa kasus penggunaan yang berbeda untuk membantu memahami apa artinya ini.

Contoh # 1 - Memasukkan Array Lihatlah kode di bawah ini. Dalam kode ini, kami tidak menggunakan sintaks spread:

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

console.log(arr);

Di atas, kami telah membuat array bernama mid. Kami kemudian membuat array kedua yang berisi midarray kami . Akhirnya, kami keluar hasilnya. Apa yang Anda harapkan arruntuk dicetak? Klik jalankan di atas untuk melihat apa yang terjadi. Berikut hasilnya:

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

Apakah itu hasil yang Anda harapkan? Dengan memasukkan midarray ke dalam arrarray, kita telah berakhir dengan sebuah array di dalam array. Tidak apa-apa jika itu tujuannya. Tetapi bagaimana jika Anda hanya menginginkan satu array dengan nilai 1 hingga 6? Untuk mencapai hal ini, kita dapat menggunakan sintaks spread! Ingat, sintaksis sebar memungkinkan elemen array kami berkembang. Mari kita lihat kode di bawah ini. Semuanya sama - kecuali kita sekarang menggunakan sintaks spread untuk menyisipkan midarray ke dalam arrarray:

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

console.log(arr);

Dan ketika Anda menekan tombol run, inilah hasilnya:

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

Luar biasa! Ingat definisi sintaksis penyebaran yang baru saja Anda baca di atas? Di sinilah ia berperan. Seperti yang Anda lihat, ketika kita membuat arrarray dan menggunakan operator spread pada midarray, alih-alih hanya dimasukkan, midarray akan melebar. Ekspansi ini berarti bahwa setiap elemen dalam midarray dimasukkan ke dalam arrarray. Alih-alih array bersarang, hasilnya adalah array tunggal angka mulai dari 1 hingga 6.

Contoh # 2 - Matematika JavaScript memiliki objek matematika bawaan yang memungkinkan kita melakukan beberapa perhitungan matematika yang menyenangkan. Dalam contoh ini kita akan melihat Math.max(). Jika Anda tidak terbiasa, Math.max()kembalikan angka terbesar dari nol atau lebih. Berikut ini beberapa contoh:

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

Seperti yang Anda lihat, jika Anda ingin menemukan nilai maksimum dari beberapa angka, Math.max()memerlukan beberapa parameter. Sayangnya Anda tidak bisa menggunakan satu array sebagai input. Sebelum sintaksis sebar, cara termudah untuk menggunakan Math.max()array adalah menggunakan.apply()

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

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

console.log(max(arr));

Berhasil, itu benar-benar menjengkelkan. Sekarang lihat bagaimana kita melakukan hal yang persis sama dengan sintaks spread:

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

console.log(max);

Daripada harus membuat fungsi dan menggunakan metode yang berlaku untuk mengembalikan hasil Math.max(), kita hanya perlu dua baris kode! Sintaks spread memperluas elemen array kami dan memasukkan setiap elemen dalam array kami secara individual ke dalam Math.max()metode!

Contoh # 3 - Salin Array Dalam JavaScript, Anda tidak bisa hanya menyalin array dengan mengatur variabel baru sama dengan array yang sudah ada. Perhatikan contoh kode berikut:

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

console.log(arr2);

Saat Anda menekan run, Anda akan mendapatkan output berikut:

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

Sekarang, pada pandangan pertama, sepertinya berhasil - sepertinya kita telah menyalin nilai arr ke arr2. Tapi bukan itu yang terjadi. Anda lihat, ketika bekerja dengan objek dalam javascript (array adalah jenis objek) kami menetapkan dengan referensi, bukan oleh nilai. Ini berarti bahwa arr2 telah ditetapkan ke referensi yang sama dengan arr. Dengan kata lain, apa pun yang kita lakukan untuk arr2 juga akan memengaruhi array array asli (dan sebaliknya). Lihatlah di bawah ini:

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

arr2.push('d');

console.log(arr);

Di atas, kami telah mendorong elemen baru d ke arr2. Namun, ketika kita keluar nilai arr, Anda akan melihat bahwa nilai d juga ditambahkan ke array itu:

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

Tidak perlu takut! Kita bisa menggunakan operator spread! Pertimbangkan kode di bawah ini. Hampir sama dengan di atas. Alih-alih, kami menggunakan operator spread dalam sepasang tanda kurung:

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

console.log(arr2);

Hit run, dan Anda akan melihat output yang diharapkan:

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

Di atas, nilai-nilai array dalam arr diperluas menjadi elemen individual yang kemudian ditugaskan ke arr2. Kita sekarang dapat mengubah array arr2 sebanyak yang kita inginkan tanpa konsekuensi pada array arr asli:

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

arr2.push('d');

console.log(arr);

Sekali lagi, alasan ini berfungsi adalah karena nilai arr diperluas untuk mengisi tanda kurung definisi array arr2 kami. Dengan demikian, kita mengatur arr2 untuk sama dengan nilai individual dari arr daripada referensi ke arr seperti yang kita lakukan pada contoh pertama.

Contoh Bonus - String to Array Sebagai contoh terakhir yang menyenangkan, Anda dapat menggunakan sintaks spread untuk mengubah string menjadi array. Cukup gunakan sintaks spread dalam sepasang tanda kurung:

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

console.log(chars);

Tiga titik (...)disebut operator spread, dan ini secara konseptual mirip dengan operator spread array ES6, JSX mengambil keuntungan dari standar yang didukung dan dikembangkan ini untuk memberikan sintaksis yang lebih bersih di JSX

Menyebar properti dalam inisialisasi objek menyalin properti enumerable sendiri dari objek yang disediakan ke objek yang baru dibuat.

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

Referensi:

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

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

Arti dari ... tergantung di mana Anda menggunakannya dalam kode,

1. Digunakan untuk menyebarkan / menyalin array / objek - Ini membantu untuk menyalin array / objek dan juga menambahkan nilai array baru / menambah properti baru ke objek, yang merupakan opsional.

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. Digunakan untuk menggabungkan argumen fungsi menjadi satu array - Anda kemudian dapat menggunakan fungsi array di dalamnya.

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

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

Ini operator penyebaran ...

Misalnya jika Anda memiliki array first=[1,2,3,4,5]dan lainnya second=[6,7,8].

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

Hal yang sama juga bisa dilakukan dengan objek json.

Singkatnya, tiga titik ...adalah operator yang menyebar di ES6 (ES2015). Operator yang menyebar akan mengambil semua data.

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


console.log(b);

Akan memberikan hasilnya [1,2,3,4,5,6]

console.log(c);

Akan memberikan hasilnya [7,8,1,2,3,4]

Biasanya disebut operator spread, digunakan untuk memperluas di mana pun diperlukan

contoh

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

Anda dapat menggunakan ini di mana pun Anda membutuhkannya lebih lanjut tentang menyebar operator Menyebarkan sintaks .

Sebarkan Atribut yang digunakan untuk Lulus beberapa Properti dengan Cara Sederhana

{... this.props} memegang properti this.props

Penggunaan {...} Operator Sebarkan dengan properti di bawah ini

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

Tanpa {...} Sebarkan

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

> 

Dengan {...} Sebarkan

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

Tweet Dan Abramov tentang operator Penyebar (Pencipta Redux)

... sintaks ini adalah bagian dari ES6 dan bukan sesuatu yang hanya dapat Anda gunakan dalam React. Ini dapat digunakan dalam dua cara yang berbeda; sebagai operator penyebar ATAU sebagai parameter lainnya. Anda dapat menemukan lebih banyak dari artikel ini: https://www.techiediaries.com/react-spread-operator-props-setstate/

apa yang telah Anda sebutkan dalam pertanyaan adalah sesuatu seperti ini, mari kita asumsikan seperti ini,

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

dengan menggunakan operator spread, Anda dapat meneruskan properti ke komponen seperti ini.

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

Ini adalah praktik umum untuk menyebarkan alat peraga dalam aplikasi Bereaksi. Dalam melakukan ini kami dapat menerapkan perubahan status ke komponen anak terlepas dari apakah itu Murni atau Tidak Murni (stateless atau stateful). Ada saat-saat ketika pendekatan terbaik, ketika melewati alat peraga, adalah lulus dalam sifat tunggal atau seluruh objek sifat. Dengan dukungan untuk array di ES6, kami diberi notasi "..." dan dengan ini kami sekarang dapat mencapai dengan menyerahkan seluruh objek ke anak.

Proses tipikal menyerahkan alat peraga kepada seorang anak dicatat dengan sintaks ini:

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

Ini bagus untuk digunakan ketika jumlah alat peraga minimal tetapi menjadi tidak terkendali ketika jumlah alat peraga menjadi terlalu tinggi. Masalah dengan metode ini terjadi ketika Anda tidak tahu properti yang dibutuhkan dalam komponen turunan dan metode JavaScript yang umum adalah dengan mengatur properti tersebut secara sederhana dan mengikat objek nanti. Ini menyebabkan masalah dengan pemeriksaan propType dan kesalahan pelacakan tumpukan samar yang tidak membantu dan menyebabkan keterlambatan dalam debugging. Berikut ini adalah contoh dari praktik ini, dan apa yang tidak boleh dilakukan:

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

Hasil yang sama ini dapat dicapai tetapi dengan keberhasilan yang lebih tepat dengan melakukan ini:

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

Tetapi tidak menggunakan JSX spread atau JSX sehingga untuk mengulang ini kembali ke persamaan sekarang kita bisa melakukan sesuatu seperti ini:

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

Properti yang termasuk dalam "... alat peraga" adalah foo: x, bar: y. Ini dapat digabungkan dengan atribut lain untuk mengesampingkan properti "... props" menggunakan sintaks ini:

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

Selain itu kami dapat menyalin objek properti lainnya satu sama lain atau menggabungkannya dengan cara ini:

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

Atau gabungkan dua objek berbeda seperti ini (ini belum tersedia di semua versi reaksi):

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

Cara lain untuk menjelaskan hal ini, menurut situs reaksi / dokumen Facebook adalah:

Jika Anda sudah memiliki "alat peraga" sebagai objek, dan Anda ingin meneruskannya di JSX, Anda dapat menggunakan "..." sebagai operator SPREAD untuk melewatkan seluruh objek alat peraga. Dua contoh berikut ini setara:

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



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

Atribut yang menyebar dapat bermanfaat saat Anda membangun wadah generik. Namun, mereka juga dapat membuat kode Anda berantakan dengan membuatnya mudah untuk melewatkan banyak alat peraga yang tidak relevan ke komponen yang tidak peduli tentang mereka. Sintaks ini harus digunakan dengan hemat.

Ini disebut operator penyebaran. Untuk misalnya let hello = {name: '', msg: ''} let hello1 = {... hello} Sekarang hello object properties disalin ke hello1.

Ini disebut sintaks spread dalam javascript.

Ini digunakan untuk merusak array atau objek dalam javascript.

contoh:

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)

Anda dapat melakukannya dengan hasil yang sama dengan Object.assign()fungsi dalam javascript.

Referensi: Sebarkan sintaks

Ini akan dikompilasi menjadi:

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

di mana ia memberi lebih dua properti title& di animationluar propselemen host.

...adalah operator ES6 yang disebut Spread .

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

spread operator (triple operator) memperkenalkan di ecama script 6 (ES6) .Ecama script (ES6) adalah pembungkus javascript.

sebarkan properti enumerable operator dalam alat peraga. this.props = {firstName: 'Dan', lastName: 'Abramov', kota: 'New York', negara: 'USA'}

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

Tetapi operator penyebaran fitur utama digunakan untuk jenis referensi.

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

person1.name = "Raheel";

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

Ini disebut tipe referensi, satu objek mempengaruhi objek lain karena mereka dapat dibagikan dalam memori. Jika Anda mendapatkan nilai secara independen berarti menyebar memori, gunakan operator spread.

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

person2.name = "Shahzad";

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

jika Anda memiliki array elemen dan Anda ingin menampilkan elemen yang baru saja Anda gunakan ... arrayemaments dan itu akan beralih ke semua elemen

...(tiga titik dalam Javascript) disebut Spread Syntax atau Spread Operator. Ini memungkinkan iterable seperti ekspresi array atau string untuk diperluas atau ekspresi objek diperluas di mana pun ditempatkan. Ini tidak spesifik untuk Bereaksi. Ini adalah operator Javascript.

Semua jawaban ini di sini sangat membantu, tetapi saya ingin menuliskan Kasus-kasus Penggunaan Sintaks Penyebar (Operator Penyebar) yang paling banyak digunakan.

1. Combine Arrays (Concatenate Arrays)

Ada berbagai cara untuk menggabungkan array , tetapi operator spread memungkinkan Anda untuk menempatkan ini di sembarang tempat dalam array. Jika Anda ingin menggabungkan dua array dan elemen tempat pada titik mana pun dalam array, Anda dapat melakukan hal berikut:

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

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

2. Menyalin Array

Ketika kami menginginkan salinan array, kami dulu memiliki metode Array.prototypr.slice () . Tapi, Anda bisa melakukan hal yang sama dengan operator spread.

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

3. Fungsi Panggilan tanpa Terapkan

Dalam ES5, untuk meneruskan array dua angka ke doStuff()fungsi, Anda sering menggunakan metode Function.prototype.apply () sebagai berikut:

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

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

Namun, dengan menggunakan operator spread, Anda dapat mengirimkan array ke dalam fungsi.

doStuff(...args);

4. Array Destrukturisasi

Anda dapat menggunakan destrrukturisasi dan operator lainnya bersama-sama untuk mengekstraksi informasi ke dalam variabel sesuai keinginan Anda:

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. Fungsi Argumen sebagai Parameter Istirahat

ES6 juga memiliki tiga titik (...) yang merupakan parameter istirahat yang mengumpulkan semua argumen fungsi yang tersisa ke dalam array.

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

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

6. Menggunakan Fungsi Matematika

Setiap fungsi di mana spread digunakan sebagai argumen dapat digunakan oleh fungsi yang dapat menerima sejumlah argumen.

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

7. Menggabungkan Dua Objek

Anda dapat menggunakan operator spread untuk menggabungkan dua objek. Ini adalah cara yang mudah dan bersih untuk melakukannya.

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

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

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

8. Pisahkan String menjadi Karakter Terpisah

Anda dapat menggunakan operator spread untuk menyebarkan string ke karakter yang terpisah.

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

Anda dapat memikirkan lebih banyak cara untuk menggunakan Penyebar Operator. Apa yang saya daftarkan di sini adalah kasus penggunaan yang populer.

Ini adalah fitur baru di ES6 / Harmony. Ini disebut Penyebar Operator. Ini memungkinkan Anda memisahkan bagian konstituen dari array / objek, atau mengambil beberapa item / parameter dan merekatkannya bersama-sama. Berikut ini sebuah contoh:

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

Dan dengan objek / kunci:

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

Apa yang benar-benar keren adalah Anda dapat menggunakannya untuk berarti "sisa nilai".

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

Itu disebut spread. Sama seperti namanya. Itu berarti meletakkan apa pun nilainya dalam array atau objek tersebut.

Seperti :

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