Что делают эти три точки в React?

как известно ... называют Распространение Атрибутами имя, которое представляет его, позволяет расширить выражение.

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

и в этом случае(я собираюсь упростить ее).

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

Это:

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

равна

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

короче говоря, это опрятный короче, можно сказать.

три точки в JavaScript оператор spread / rest.

распространение оператор

The распространение синтаксис позволяет расширить выражение в местах, где ожидается несколько аргументов.

myFunction(...iterableObj);

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

[...Array(10)]

параметры остальные

The остальное синтаксис параметров используется для функций с переменным числом аргументов.

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

распространение / отдых оператор для массивов был введен в ES6. Есть состояние 2 предложение для свойств объекта spread / rest.

TypeScript также поддерживает синтаксис распространения и может транспилировать его в более старые версии ECMAScript с помощью minor вопросы.

это особенность es6, которая также используется в React. Посмотрите на приведенный ниже пример:

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

этот способ хорош, если у нас есть максимум 3 параметра, но что делать, если нам нужно добавить, например, 110 параметров. Должны ли мы определить их все и добавить их по одному?! Конечно, есть более простой способ сделать это, который называется распространение. Вместо передачи всех этих параметров вы пишете:

function (...numbers){} 

мы не знаем, сколько параметров у нас есть, но мы знаем, что есть кучи те. На основе es6 мы можем переписать вышеуказанную функцию, как показано ниже, и использовать распространение и сопоставление между ними, чтобы сделать это так же просто, как кусок пирога:

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

для тех, кто пришел из мира Python, атрибуты распространения JSX эквивалентны Распаковка Списков Аргументов (питон **-оператор).

Я знаю, что это вопрос JSX, но работа с аналогиями иногда помогает получить его быстрее.

три точки представляют собой Распространение Оператор в ES6. Это позволяет нам делать довольно много вещей в Javascript:

1. копирование массива

   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. разрушение массива

     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. аргументы функции в виде массива

    function fun1(...params) { 
   
    }  
   

вышеизложенное известно как параметры rest и не ограничивает количество значения, передаваемые в функцию. Однако, аргументы должны быть одного типа.

1. расчесывание двух объектов

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

это просто определение реквизит иначе JSX для вас!

используется ... оператор массива и объекта в ES6 (object one еще не полностью поддерживается), поэтому в основном, если вы уже определяете свои реквизиты, вы можете передать его своему элементу таким образом.

поэтому в вашем случае код должен быть примерно таким:

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

Итак, реквизит, который вы определили, теперь разделен и может быть использован повторно, если необходимый.

это равно:

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

это цитаты из команды React об операторе распространения в JSX:

атрибуты распространения JSX Если вы знаете все свойства, которые вы хотите разместить на компоненте раньше времени, это простой в использовании JSX:

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

мутировать реквизит плохо
если вы не знаете, какие свойства вы хотите, вы могли бы попытаться добавить их на объект позже:

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

это анти-паттерн, потому что это означает, что мы не можем помочь вам проверить правильные проптипы до пути позже. Это означает, что ваши проптипы ошибки заканчиваются загадочной трассировкой стека.

реквизит должен считаться неизменным. Изменение объекта реквизита где-то еще может вызвать неожиданные последствия, так что в идеале это будет будьте замороженным объектом в этот момент.

распространение Атрибуты
теперь вы можете использовать новую функцию JSX под названием spread attributes:

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

свойства объекта, который вы передаете в копируются в реквизит компонента.

вы можете использовать это несколько раз или объединить его с другими атрибутами. Порядок спецификации важен. Переопределение более поздних атрибутов предыдущий.

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

что за странный ... нотация?
The ... оператор (или оператор распространения) уже поддерживается для массивов в ES6. Также предложение ECMAScript для объектов отдыха и распространять свойства. Мы использование этих поддерживаемых и развивающихся стандартов в целях чтобы обеспечить более чистый синтаксис в JSX.

The ...(оператор spread) используется в react to:

обеспечить аккуратный способ передачи реквизита от родительских к дочерним компонентам. например, учитывая эти реквизиты в Родительском компоненте,

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

они могут быть переданы ребенку следующим образом,

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

который похож на этот

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

но чище.

три точки (...) называются оператором распространения, и это концептуально похоже на оператор распространения массива ES6, JSX использование этих поддерживаемых и развивающихся стандартов для обеспечения более чистого синтаксиса в JSX

свойства распространения в инициализаторах объектов копирует собственные перечислимые свойства предоставленного объекта на вновь созданный объект.

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

ссылки:

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

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

короче говоря, три точки ... является оператором распространения в ES6 (ES2015). оператор спреда будет извлекать все данные.

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

Spread атрибуты, используемые для передачи нескольких свойств простым способом

{... этот.props } удерживает свойство этого.реквизит

использование { ... } Оператор распространения с реквизитами ниже

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

без { ... } Распространение

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

> 

С { ... } Распространение

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

дан Абрамов твит об операторе распространения (создателе Redux)https://twitter.com/dan_abramov/status/694519379191545856?lang=en

это обычная практика, чтобы передать реквизит вокруг в приложении React. При этом мы можем применить изменения состояния к дочернему компоненту независимо от того, является ли он чистым или нечистым (без состояния или с состоянием). Бывают случаи, когда лучший подход, при передаче в реквизит, чтобы передать в единственных свойствах или весь объект свойств. С поддержкой массивов в ES6 нам дали"..."нотация и с этим мы теперь можем достичь передачи всего объекта ребенку.

типичный процесс передачи реквизита ребенку отмечается с помощью этого синтаксиса:

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

это нормально использовать, когда количество реквизита минимально, но становится неуправляемым, когда номера реквизита становятся слишком высокими. Проблема с этим методом возникает, когда вы не знаете свойства, необходимые в дочернем компоненте, и типичный метод JavaScript-это просто установить эти свойства и привязать к объекту позже. Это вызывает проблемы с проверкой propType и загадочные ошибки трассировки стека, которые не являются полезными и вызывают задержки в отладке. Ниже приведен пример такой практики, а чего не делать:

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

этот же результат может быть достигнут, но с более подходящим успеха поступая следующим образом:

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

но не использует JSX spread или JSX, поэтому, чтобы вернуть это обратно в уравнение, мы теперь можем сделать что-то вроде этого:

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

свойства, включенные в "...реквизит " - это foo: x, bar: y. Это можно комбинировать с другими атрибутами, чтобы переопределить свойства "...реквизит", используя этот синтаксис:

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

кроме того, мы можем копировать другие объекты свойств друг на друга или объединять их таким образом:

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

или объединить два разных объекта, как это (это еще не доступно во всех версиях react):

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

другой способ объяснить это, согласно сайту react/docs Facebook:

если у вас уже есть "реквизит" в качестве объекта, и вы хотите чтобы передать его в JSX, вы можете использовать "..."как оператор распространения, чтобы передать весь объект реквизита. Следующие два примера эквивалентны:

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



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

атрибуты распространения могут быть полезны при создании универсальных контейнеров. Тем не менее, они также могут сделать ваш код грязным, упростив передачу большого количества ненужных реквизитов компонентам, которые не заботятся о них. Этот синтаксис следует использовать экономно.

Это новая функция в ES6 / Harmony. Он называется оператором распространения. Это позволяет либо разделить составные части массива / объекта, либо взять несколько элементов/параметров и склеить их вместе. Вот пример:

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

и с объектом/ключи:

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

что действительно здорово, вы можете использовать его, чтобы означать "остальные значения".

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

это называется синтаксис спредов в javascript.

Он используется для деструктурирования массива или объекта в javascript.

пример:

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)

Вы можете сделать это же результат с Object.assign() функция в javascript.

ссылки:

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

они называются спреды. Как и следует из названия. Это означает, что он помещает все его значение в этот массив или объекты.

, например :

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