Что делают эти три точки в React?
Что это ... сделать в этом React (используя JSX) код и как он называется?
<Modal {...this.props} title='Modal heading' animation={false}>
40 ответов
Это нотация распространения собственности. Он был добавлен в ES2018, но долгое время поддерживался в проектах React с помощью транспиляции (как "атрибуты распространения JSX", хотя вы могли бы делать это и в других местах, а не только в атрибутах).
{...this.props} распространяет "свои" свойства в props в качестве дискретных свойств на Modal элемент, который вы создаете. Например, если this.props содержащиеся a: 1 а также b: 2, затем
<Modal {...this.props} title='Modal heading' animation={false}>
будет так же, как
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
Но это динамично, поэтому, какие бы "собственные" свойства не находились в props включены.
поскольку children является "собственной" собственностью в props, распространение будет включать это. Так что, если компонент, где это появляется, имеет дочерние элементы, они будут переданы Modal, Помещение дочерних элементов между открывающим и закрывающим тегами является просто синтаксическим сахаром - хороший вид - для размещения children свойство в открывающем теге. Пример:
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>Распространение нотации удобно не только для этого варианта использования, но и для создания нового объекта с большинством (или всеми) свойствами существующего объекта - который часто появляется при обновлении состояния, поскольку вы не можете изменять состояние непосредственно:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
Это заменяет this.state.foo с новым объектом со всеми теми же свойствами, что и foo кроме a свойство, которое становится "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;
}Как Вам известно ... называются Spread Attributes, которые представляет имя, это позволяет расширить выражение.
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} />
Короче говоря, это аккуратный короткий путь, можно сказать.
Три точки представляют Оператор Распространения в ES6. Это позволяет нам делать довольно много вещей в Javascript:
Копирование массива
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']Уничтожение массива
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']Аргументы функции как массив
function fun1(...params) { }
Вышеупомянутое известно как остальные параметры и не ограничивает количество значений, передаваемых в функцию. Однако аргументы должны быть одного типа.
Расчесывать два объекта
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'}
...(три точки в Javascript) называется синтаксисом распространения или оператором распространения. Это позволяет развернуть итерацию, такую как выражение массива или строку, или выражение объекта, где бы оно ни находилось. Это не относится к React. Это оператор Javascript.
Все эти ответы здесь полезны, но я хочу перечислить наиболее часто используемые практические варианты использования синтаксиса распространения (оператора распространения).
1. Объединение массивов (объединение массивов)
Существует множество способов комбинирования массивов, но оператор распространения позволяет вам разместить это в любом месте массива. Если вы хотите объединить два массива и разместить элементы в любой точке массива, вы можете сделать следующее:
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
2. Копирование массивов
Когда нам нужна была копия массива, у нас был метод Array.prototypr.slice(). Но вы можете сделать то же самое с оператором распространения.
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
3. Вызов функций без применения Apply
В ES5, чтобы передать массив из двух чисел в doStuff()функция, вы часто используете метод Function.prototype.apply() следующим образом:
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
Однако, используя оператор распространения, вы можете передать в функцию массив.
doStuff(...args);
4. Разрушение массивов
Вы можете использовать деструктуризацию и оператор rest вместе для извлечения информации в переменные по своему усмотрению:
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. Аргументы функций как параметры отдыха
ES6 также имеет три точки ( ...), которые являются параметром отдыха, который собирает все оставшиеся аргументы функции в массив.
function f(a, b, ...args) {
console.log(args);
}
f(1,2,3,4,5);
// [ 3, 4, 5 ]
6. Использование математических функций
Любая функция, в которой в качестве аргумента используется распространение, может использоваться функциями, которые могут принимать любое количество аргументов.
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
7. Объединение двух объектов
Вы можете использовать оператор распространения, чтобы объединить два объекта. Это простой и понятный способ сделать это.
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
8. Разделите строку на отдельные символы.
Вы можете использовать оператор распространения, чтобы разбить строку на отдельные символы.
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
Вы можете придумать и другие способы использования оператора распространения. Я перечислил наиболее популярные варианты его использования.
Три точки в JavaScript - это оператор распространения / отдыха.
Оператор спреда
Синтаксис распространения позволяет расширять выражение в местах, где ожидается несколько аргументов.
myFunction(...iterableObj);
[...iterableObj, 4, 5, 6]
[...Array(10)]
Параметры отдыха
Синтаксис остальных параметров используется для функций с переменным числом аргументов.
function(a, b, ...theArgs) {
// ...
}
Оператор распространения / отдыха для массивов был введен в ES6. Есть предложение State 2 для свойств распространения / отдыха объекта.
TypeScript также поддерживает синтаксис распространения и может переносить его в более старые версии ECMAScript с небольшими проблемами.
Это особенность 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
Престижность Брэндону Морелли. Он прекрасно объяснил здесь, но ссылки могут исчезнуть, поэтому я просто вставляю содержимое ниже:
Синтаксис распространения - это просто три точки: ...
Это позволяет итерируемому расширяться в местах, где ожидается 0+ аргументов. Определения без контекста трудны. Давайте рассмотрим несколько различных вариантов использования, чтобы понять, что это означает.
Пример №1 - Вставка массивов Взгляните на приведенный ниже код. В этом коде мы не используем синтаксис распространения:
var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];
console.log(arr);Выше мы создали массив с именем mid. Затем мы создаем второй массив, содержащий нашиmidмассив. Наконец, выводим результат. Что вы ожидаетеarrпечатать? Нажмите "Выполнить" выше, чтобы увидеть, что произойдет. Вот результат:
[1, 2, [3, 4], 5, 6]
Вы ожидали такого результата? Вставивmid массив в arrarray, мы получили массив внутри массива. Хорошо, если это была цель. Но что, если вам нужен только один массив со значениями от 1 до 6? Для этого мы можем использовать синтаксис распространения! Помните, что синтаксис распространения позволяет элементам нашего массива расширяться. Давайте посмотрим на код ниже. Все то же самое, за исключением того, что теперь мы используем синтаксис распространения для вставкиmid массив в arr массив:
var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];
console.log(arr);И когда вы нажимаете кнопку запуска, вот результат:
[1, 2, 3, 4, 5, 6]
Потрясающе! Помните определение синтаксиса распространения, которое вы только что прочитали выше? Вот где это вступает в игру. Как видите, когда мы создаемarr массив и используйте оператор распространения в mid массив, вместо того, чтобы просто вставляться, midмассив расширяется. Это расширение означает, что каждый элемент вmid массив вставляется в arrмассив. Вместо вложенных массивов результатом будет один массив чисел от 1 до 6.
Пример №2 - Математика В
JavaScript есть встроенный математический объект, который позволяет нам выполнять некоторые забавные математические вычисления. В этом примере мы рассмотримMath.max(). Если вы незнакомы,Math.max()возвращает наибольшее из нуля или более чисел. Вот несколько примеров:
Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100
Как видите, если вы хотите найти максимальное значение нескольких чисел, Math.max()требует нескольких параметров. К сожалению, вы не можете просто использовать один массив в качестве входных данных. Перед синтаксисом распространения самый простой способ использоватьMath.max() на массиве использовать .apply()
var arr = [2, 4, 8, 6, 0];
function max(arr) {
return Math.max.apply(null, arr);
}
console.log(max(arr));Работает, просто раздражает. Теперь посмотрим, как мы делаем то же самое с синтаксисом распространения:
var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);Вместо того, чтобы создавать функцию и использовать метод apply для возврата результата Math.max(), нам нужно всего две строчки кода! Синтаксис распространения расширяет элементы нашего массива и вводит каждый элемент в нашем массиве индивидуально вMath.max() метод!
Пример № 3 - Копирование массива В JavaScript вы не можете просто скопировать массив, установив новую переменную, равную уже существующему массиву. Рассмотрим следующий пример кода:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);Когда вы нажмете run, вы получите следующий результат:
['a', 'b', 'c']
Теперь, на первый взгляд, похоже, что это сработало - похоже, мы скопировали значения arr в arr2. Но этого не произошло. Видите ли, при работе с объектами в javascript (массивы - это тип объекта) мы назначаем по ссылке, а не по значению. Это означает, что arr2 был назначен той же ссылке, что и arr. Другими словами, все, что мы делаем с arr2, также повлияет на исходный массив arr (и наоборот). Взгляните ниже:
var arr = ['a', 'b', 'c'];
var arr2 = arr;
arr2.push('d');
console.log(arr);Выше мы поместили новый элемент d в arr2. Тем не менее, когда мы выведем значение arr, вы увидите, что значение d также было добавлено в этот массив:
['a', 'b', 'c', 'd']
Но бояться нечего! Мы можем использовать оператор спреда! Рассмотрим код ниже. Это почти то же самое, что и выше. Вместо этого мы использовали оператор распространения в квадратных скобках:
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);Нажмите "Выполнить", и вы увидите ожидаемый результат:
['a', 'b', 'c']
Выше значения массива в arr расширены, чтобы стать отдельными элементами, которые затем были присвоены arr2. Теперь мы можем изменить массив arr2 столько, сколько захотим, без последствий для исходного массива arr:
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
arr2.push('d');
console.log(arr);Опять же, причина, по которой это работает, заключается в том, что значение arr расширено, чтобы заполнить скобки нашего определения массива arr2. Таким образом, мы устанавливаем arr2 равным отдельным значениям arr вместо ссылки на arr, как мы это делали в первом примере.
Дополнительный пример - строка в массив В качестве забавного финального примера вы можете использовать синтаксис распространения для преобразования строки в массив. Просто используйте синтаксис распространения в квадратных скобках:
var str = "hello";
var chars = [...str];
console.log(chars);Для тех, кто хочет понять это просто и быстро:
Прежде всего, это не синтаксис только для реакции. это синтаксис ES6, называемый синтаксисом Spread, который выполняет итерацию (слияние, добавление... и т. д.) массива и объекта. подробнее здесь
Итак, ответьте на вопрос: представьте, что у вас есть этот тег:
<UserTag name="Supun" age="66" gender="male" />
и вы делаете это:
const user = {
"name"=>"Joe",
"age"=>"50"
"test"=>"test-val"
};
<UserTag name="Supun" gender="male" {...user} age="66" />
тогда тег будет таким:
<UserTag name="Joe" gender="male" test="test-val" age="66" />
Итак, что произошло, когда вы использовали синтаксис Spread в теге реакции, он принимает атрибут тега как атрибуты объекта, которые объединяются (заменяют, если он существует) с заданным объектом
user. Кроме того, вы могли заметить одну вещь, которая заменяет только атрибуты до, а не после атрибутов. так что в этом примере возраст остается неизменным.
Надеюсь, это поможет:)
Это просто определение реквизита в JSX по-другому для вас!
Он использует ... оператор массива и объекта в ES6 (объект еще не полностью поддерживается), поэтому, в основном, если вы уже определили свой реквизит, вы можете передать его своему элементу таким образом.
Так что в вашем случае код должен выглядеть примерно так:
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 заканчиваются загадочной трассировкой стека.
Реквизит следует считать неизменным. Мутирование объекта реквизита в другом месте может привести к неожиданным последствиям, поэтому в идеале это должен быть замороженный объект на данном этапе.
Атрибуты распространения
Теперь вы можете использовать новую функцию JSX, которая называется атрибутами распространения:
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'
Что за странная... запись?
Оператор... (или оператор распространения) уже поддерживается для массивов в ES6. Существует также предложение ECMAScript для свойств покоя и распространения объекта. Мы используем эти поддерживаемые и разрабатываемые стандарты для обеспечения более чистого синтаксиса в JSX.
Для тех, кто пришел из мира Python, атрибуты распространения JSX эквивалентны распаковке списков аргументов (Python **-оператором).
Я знаю, что это вопрос JSX, но работа с аналогами иногда помогает получить его быстрее.
Три точки ... представляет операторы распространения или остальные параметры,
Это позволяет расширять выражение массива или строку или что-либо, что может повторяться, в местах, где ожидается ноль или более аргументов для вызовов функций или элементов для массива.
- Объединить два массива
var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1 = [...arr1, ...arr2];
console.log(arr1); //[1, 2, 3, 4, 5, 6]- Копирование массива:
var arr = [1, 2, 3];
var arr2 = [...arr];
console.log(arr); //[1, 2, 3]Примечание. Синтаксис Spread эффективно копируется на один уровень при копировании массива. Следовательно, это может быть непригодно для копирования многомерных массивов, как показано в следующем примере (то же самое с Object.assign() и синтаксисом распространения).
- Добавьте значения одного массива в другой по определенному индексу, например, 3:
var arr1 = [4,5]
var arr2 = [1,2,3,...arr1,6]
console.log(arr2); // [1, 2, 3, 4, 5, 6]- При вызове конструктора с новым:
var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);
console.log(d);- Распространение в объектных литералах:
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}Обратите внимание, что foo свойство obj1 было перезаписано obj2 foo имущество
- В качестве синтаксиса параметра rest, который позволяет нам представлять неопределенное количество аргументов в виде массива:
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Примечание. Синтаксис распространения (отличный от свойств распространения) может применяться только к итерируемым объектам.
var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterable...(оператор распространения) используется в реакции на:
обеспечить удобный способ передачи реквизита от родительских компонентов к дочерним. например, учитывая эти реквизиты в родительском компоненте,
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 }
Ссылка:
Атрибуты Spread, используемые для простой передачи нескольких свойств
{ ... this.props } содержит свойство this.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
Эти три точки называются оператором распространения. Оператор Spread помогает нам создать состояние копирования или свойства в реакции.
Использование оператора распространения в состоянии реакции
const [myState, setMyState] = useState({
variable1: 'test',
variable2: '',
variable3: ''
});
setMyState({...myState, variable2: 'new value here'});
в приведенном выше операторе распространения кода будет сохранена копия текущего состояния, и мы также добавим новое значение в то же время, если мы этого не сделаем, тогда состояние будет иметь только значение переменной 2, оператор распространения поможет нам написать оптимизирующий код
Короче говоря, три точки... это оператор распространения в ES6(ES2015). оператор распространения будет получать все данные.
let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];
console.log (б); дать результат [1,2,3,4,5,6]
console.log (с); дать результат [7,8,1,2,3,4]
Значение... зависит от того, где вы используете его в коде,
- Используется для распространения / копирования массива / объекта - помогает копировать массив / объект, а также добавлять новые значения массива / добавлять новые свойства к объекту, что необязательно.
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}- Используется для объединения аргументов функции в один массив - вы можете использовать функции массива для него.
const filter = (...args) => {
return args.filter(el => el ===1);
}
console.log(filter(1,2,3)); //prints [1] Это оператор распространения...
Например, если у вас есть массив first=[1,2,3,4,5] и другой second=[6,7,8].
[...first, ...second] //result is [1,2,3,4,5,6,7,8]
То же самое можно сделать и с объектами json.
Распространяйте оператор! Поскольку большинство людей уже элегантно ответили на вопрос, я хотел предложить краткий список способов использования оператора распространения:
Оператор …spread полезен для многих различных рутинных задач в JavaScript, включая следующие:
- Копирование массива
- Объединение или объединение массивов
- Использование математических функций
- Использование массива в качестве аргументов
- Добавление элемента в список
- Добавление в состояние в React
- Объединение объектов
- Преобразование NodeList в массив
Ознакомьтесь со статьей для более подробной информации. Как пользоваться оператором спреда.Рекомендую привыкнуть. Есть так много крутых способов использования операторов спреда.
... 3 точки обозначают оператор спреда в JS.
Без оператора распространения.
let a = ['one','one','two','two'];
let unq = [new Set(a)];
console.log(a);
console.log(unq);
Выход:
(4) ['one', 'one', 'two', 'two']
[Set(2)]
С оператором спреда.
let a = ['one','one','two','two'];
let unq = [...new Set(a)];
console.log(a);
console.log(unq);
Выход:
(4) ['one', 'one', 'two', 'two']
(2) ['one', 'two']
Оператор распространения (тройной оператор) вводится в сценарии ecama 6(ES6). Сценарий Ecama (ES6) является оболочкой javascript.
Перечислимые свойства оператора распространения в props. this.props = {firstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA'}
{...this.props} = {firstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA'}
Но для ссылочного типа используется основной оператор распространения признака.
For example
let person= {
name: 'Alex',
age: 35
}
person1= person;
person1.name = "Raheel";
console.log( person.name); // output: Raheel
Это называется ссылочным типом, один объект влияет на другие объекты, потому что они совместно используются в памяти. Если вы получаете независимое значение, то в обоих случаях используется оператор распространения.
let person= {
name: 'Alex',
age: 35
}
person2 = {...person};
person2.name = "Shahzad";
console.log(person.name); // output: Alex
// Попробуйте этот способ, используя пример синтаксиса распространения
"Math-объект Javascript не принимает в качестве аргумента отдельный массив, но с синтаксисом распространения массив расширяется до ряда аргументов"
//Passing elements of the array as arguments to the Math Object
const arr = [1,2,500,-1,.20,0,-10];
console.log(Math.min(...arr));
console.log(Math.max(...arr));
Оператор распространения - это три точки (...), которые выполняют несколько разных задач. Во-первых, оператор распространения позволяет нам комбинировать содержимое массивов.
var peaks = ["Tallac", "Ralston", "Rose"]
var canyons = ["Ward", "Blackwood"]
var tahoe = [...peaks, ...canyons]
console.log(tahoe.join(', ')) // Tallac, Ralston, Rose, Ward, Blackwood
Оператор распространения также может использоваться для получения некоторых или остальных элементов массива:
var lakes = ["Donner", "Marlette", "Fallen Leaf", "Cascade"]
var [first, ...rest] = lakes
console.log(rest.join(", ")) // "Marlette, Fallen Leaf, Cascade"
Мы также можем использовать оператор распространения для сбора аргументов функции в виде массива.
function directions(...args) {
var [start, ...remaining] = args
var [finish, ...stops] = remaining.reverse()
console.log(start, finish)
}
Оператор распространения также можно использовать для объектов.
var morning = {
breakfast: "oatmeal",
lunch: "peanut butter and jelly"
}
var dinner = "mac and cheese"
var backpackingMeals = {
...morning,
dinner
}
console.log(backpackingMeals) // {breakfast: "oatmeal", lunch: "peanut butter and jelly", dinner: "mac and cheese"}
Ссылка: Learning React: Functional Web Development with React and Redux, Алекс Бэнкс, Ева Порчелло
... обычно называется оператором распространения, он используется для расширения там, где это требуется
пример
const SomeStyle = {
margin:10,
background:#somehexa
}
вы можете использовать это там, где вам когда-либо понадобится больше о распространении оператора https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
... этот синтаксис является частью ES6, а не тем, что вы можете использовать только в React. Его можно использовать двумя разными способами; в качестве оператора распространения ИЛИ в качестве параметра отдыха. Дополнительную информацию можно найти в этой статье: https://www.techiediaries.com/react-spread-operator-props-setstate/
то, что вы упомянули в вопросе, примерно так, давайте предположим вот так,
function HelloUser() {
return <Hello Name="ABC" City="XYZ" />;
}
с помощью оператора распространения вы можете передать свойства компоненту следующим образом.
function HelloUser() {
const props = {Name: 'ABC', City: 'XYZ'};
return <Hello {...props} />;
}
Это называется синтаксис спредов в 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
Обычная практика - передавать информацию в приложении 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-распространение или JSX, поэтому, чтобы вернуться к уравнению, теперь мы можем сделать что-то вроде этого:
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
Свойства, включенные в "... props": foo: x, bar: y. Это может быть объединено с другими атрибутами, чтобы переопределить свойства "... props", используя этот синтаксис:
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';
Или объедините два разных объекта, как это (это еще не доступно во всех версиях реакции):
var ab = { ...a, ...b }; // merge(a, b)
Другой способ объяснить это, согласно сайту реакции / документации Facebook:
Если у вас уже есть "props" в качестве объекта и вы хотите передать его в JSX, вы можете использовать "..." в качестве оператора SPREAD для передачи всего объекта "props". Следующие два примера эквивалентны:
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
Атрибуты распространения могут быть полезны при создании универсальных контейнеров. Тем не менее, они также могут сделать ваш код беспорядочным, упрощая передачу ненужных реквизитов компонентам, которые не заботятся о них. Этот синтаксис следует использовать с осторожностью.
Это будет скомпилировано в:
React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)
где дает еще два свойства title & animation за пределами props элемент хоста имеет.
...- это оператор ES6 под названием Spread.
См. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
Эти 3 точки...это не термины React. Это операторы распространения JavaScript ES6. Что помогает создать новый массив, не нарушая исходный для выполнения глубокой копии. Это также можно использовать для объектов.
const arr1 = [1, 2, 3, 4, 5]
const arr2 = arr1 // [1, 2, 3, 4, 5]
/*
This is an example of a shallow copy.
Where the value of arr1 is copied to arr2
But now if you apply any method to
arr2 will affect the arr1 also.
*/
/*
This is an example of a deep copy.
Here the values of arr1 get copied but they
both are disconnected. Meaning if you
apply any method to arr3 it will not
affect the arr1.
*/
const arr3 = [...arr1] // [1, 2, 3, 4, 5]
Если у вас есть массив элементов, и вы хотите отобразить только что используемые элементы...arrayemaments, и он будет перебирать все элементы