Что делают эти три точки в 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.

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

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

myFunction(...iterableObj);

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

[...Array(10)]

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

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

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 параметров. Должны ли мы определить их все и добавить их один за другим?! Конечно, есть более простой способ сделать это, который называется SPREAD. Вместо передачи всех этих параметров вы пишете:

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

    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 для вас!

используется ... array и object operator в 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

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

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

распространение Атрибуты
теперь вы можете использовать новую функцию 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 для свойств Rest и Spread объекта. Мы использование этих поддерживаемых и разрабатываемых стандартов для чтобы обеспечить более чистый синтаксис в JSX.

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

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

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

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

<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). оператор spread получит все данные.

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

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

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

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

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

Дана Абрамова tweet о операторов (создатель "возвращение") 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, вы можете использовать "..."как оператор распространения, чтобы передать весь объект props. Следующие два примера эквивалентны:

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]