javascript - suspensivos - ¿Qué hacen estos tres puntos en React?
title css (19)
Atributos separados utilizados para pasar las múltiples propiedades de una manera simple
{... this.props} tiene la propiedad de this.props
Uso del {...} Operador de propagación con los siguientes accesorios
this.props = { firstName: ''Dan'', lastName: ''Abramov'', city: ''New York'', country: ''USA'' }Sin {...} Spread
<Child firstName={this.props.firstName} lastName={this.props.lastName} city={this.props.city} country={this.props.country} >Con {...} Spread
<Child { ...this.props } />Tweet de Dan Abramov sobre el operador Spread (Creador de Redux)
¿Qué hace el
...
en este código React (usando JSX) y cómo se llama?
<Modal {...this.props} title=''Modal heading'' animation={false}>
¡Es solo definir accesorios de una manera diferente en JSX para ti!
Está utilizando
...
operador de matriz y objeto en ES6 (el objeto uno aún no es totalmente compatible), por lo que, básicamente, si ya definió sus accesorios, puede pasarlo a su elemento de esta manera.
Entonces, en su caso, el código debería ser algo como esto:
function yourA() {
const props = {name=''Alireza'', age=''35''};
<Modal {...props} title=''Modal heading'' animation={false} />
}
así que los accesorios que definiste, ahora están separados y se pueden reutilizar si es necesario.
Es igual a:
function yourA() {
<Modal name=''Alireza'' age=''35'' title=''Modal heading'' animation={false} />
}
Estas son las citas del equipo de React sobre el operador de propagación en JSX:
Atributos de propagación de JSX Si conoce todas las propiedades que desea colocar en un componente con anticipación, es fácil usar JSX:
var component = <Component foo={x} bar={y} />;
Los accesorios de mutación son malos
Si no sabe qué propiedades desea establecer, puede verse tentado a agregarlas al objeto más adelante:
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad
Este es un antipatrón porque significa que no podemos ayudarlo a verificar los tipos de propiedad correctos hasta mucho más tarde. Esto significa que sus errores de propTypes terminan con una traza de pila críptica.
Los accesorios deben considerarse inmutables. La mutación del objeto de utilería en otro lugar podría causar consecuencias inesperadas, por lo que idealmente sería un objeto congelado en este punto.
Atributos separados
Ahora puede usar una nueva característica de JSX llamada atributos de propagación:
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
Las propiedades del objeto que pasa se copian en los accesorios del componente.
Puede usar esto varias veces o combinarlo con otros atributos. El orden de las especificaciones es importante. Los atributos posteriores anulan a los anteriores.
var props = { foo: ''default'' };
var component = <Component {...props} foo={''override''} />;
console.log(component.props.foo); // ''override''
¿Qué pasa con la extraña ... notación?
El operador ... (u operador de propagación) ya es compatible con matrices en ES6. También hay una propuesta de ECMAScript para el descanso de objetos y las propiedades de propagación. Estamos aprovechando estos estándares compatibles y en desarrollo para proporcionar una sintaxis más limpia en JSX.
Como sabes
...
se llaman
Atributos de extensión
que el nombre lo representa permite expandir una expresión.
var parts = [''two'', ''three''];
var numbers = [''one'', ...parts, ''four'', ''five'']; // ["one", "two", "three", "four", "five"]
Y en este caso (lo voy a simplificar).
//just assume we have an object like this:
var person= {
name: ''Alex'',
age: 35
}
Esta:
<Modal {...person} title=''Modal heading'' animation={false} />
es igual a
<Modal name={person.name} age={person.age} title=''Modal heading'' animation={false} />
En resumen, podemos decir que es un atajo ordenado .
El
...
(operador de propagación) se usa para reaccionar a:
Proporcionan una forma ordenada de pasar accesorios de componentes primarios a secundarios. Por ejemplo, dado estos accesorios en un componente principal,
this.props = {
username: "danM",
email: "[email protected]"
}
podrían pasarse de la siguiente manera al niño,
<ChildComponent {...this.props} />
que es similar a esto
<ChildComponent username={this.props.username} email={this.props.email} />
Pero mucho más limpio.
El significado de ... depende de dónde lo use en el código,
- Se utiliza para distribuir / copiar la matriz / objeto : ayuda a copiar la matriz / objeto y también a agregar nuevos valores de matriz / agregar nuevas propiedades al objeto, lo cual es opcional.
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}
- Se usa para fusionar los argumentos de la función en una sola matriz : luego puede usar funciones de matriz en ella.
const filter = (...args) => {
return args.filter(el => el ===1);
}
console.log(filter(1,2,3)); //prints [1]
En resumen, los tres puntos ... es un operador extendido en ES6 (ES2015). El operador spread buscará todos los datos.
let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];
console.log (b); dar el resultado [1,2,3,4,5,6]
console.log (c); dar el resultado [7,8,1,2,3,4]
Es una práctica común pasar accesorios en una aplicación React. Al hacer esto, podemos aplicar cambios de estado al componente hijo independientemente de si es Puro o Impuro (sin estado o con estado). Hay momentos en que el mejor enfoque, al pasar accesorios, es pasar propiedades singulares o un objeto completo de propiedades. Con el soporte para matrices en ES6 se nos dio la notación "..." y con esto ahora podemos lograr pasar un objeto completo a un niño.
El proceso típico de pasar accesorios a un niño se observa con esta sintaxis:
var component = <Component foo={x} bar={y} />;
Está bien usarlo cuando el número de accesorios es mínimo, pero se vuelve inmanejable cuando los números de accesorios aumentan demasiado. Un problema con este método ocurre cuando no conoce las propiedades necesarias dentro de un componente secundario y el método típico de JavaScript es establecer esas propiedades y vincularlas al objeto más tarde. Esto causa problemas con la comprobación de propType y los errores de rastreo de la pila críptica que no son útiles y causan demoras en la depuración. El siguiente es un ejemplo de esta práctica, y qué no hacer:
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;
Se puede lograr el mismo resultado pero con un éxito más apropiado al hacer esto:
var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?
Pero no utiliza JSX spread o JSX, así que para volver a incluirlo en la ecuación, ahora podemos hacer algo como esto:
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
Las propiedades incluidas en "... accesorios" son foo: x, bar: y. Esto se puede combinar con otros atributos para anular las propiedades de "... accesorios" utilizando esta sintaxis:
var props = { foo: ''default'' };
var component = <Component {...props} foo={''override''} />;
console.log(component.props.foo); // ''override''
Además, podemos copiar otros objetos de propiedad entre sí o combinarlos de esta manera:
var oldObj = { foo: ''hello'', bar: ''world'' };
var newObj = { ...oldObj, foo: ''hi'' };
console.log(newObj.foo); // ''hi'';
console.log(newObj.bar); // ''world'';
O combine dos objetos diferentes como este (esto aún no está disponible en todas las versiones de reacción):
var ab = { ...a, ...b }; // merge(a, b)
Otra forma de explicar esto, según el sitio react / docs de Facebook es:
Si ya tiene "accesorios" como objeto y desea pasarlo en JSX, puede usar "..." como operador SPREAD para pasar todo el objeto de accesorios. Los siguientes dos ejemplos son equivalentes:
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: ''Ben'', lastName: ''Hector''};
return <Greeting {...props} />;
}
Los atributos extendidos pueden ser útiles cuando está creando contenedores genéricos. Sin embargo, también pueden hacer que su código sea desordenado al facilitar la transmisión de muchos accesorios irrelevantes a componentes que no les importan. Esta sintaxis debe usarse con moderación.
Esa es la notación de propagación de propiedad . Se agregó en ES2018, pero se admitió durante mucho tiempo en los proyectos React a través de la transpilación (como "atributos extendidos JSX", aunque también podría hacerlo en otro lugar, no solo atributos).
{...this.props}
extiende
las propiedades "propias" en los
props
como propiedades discretas en el elemento
Modal
que está creando.
Por ejemplo, si
this.props
contenía
a: 1
b: 2
, entonces
<Modal {...this.props} title=''Modal heading'' animation={false}>
sería lo mismo que
<Modal a={this.props.a} b={this.props.b} title=''Modal heading'' animation={false}>
Pero es dinámico, por lo que se incluyen las propiedades "propias" que se encuentran en los
props
.
Como los
children
son una propiedad "propia" en los
props
, la propagación lo incluirá.
Entonces, si el componente donde aparece esto tenía elementos secundarios, se pasarán a
Modal
.
Poner elementos secundarios entre la etiqueta de apertura y las etiquetas de cierre es solo azúcar sintáctico, el tipo bueno, para poner una propiedad de
children
en la etiqueta de apertura.
Ejemplo:
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>
La notación extendida es útil no solo para ese caso de uso, sino también para crear un nuevo objeto con la mayoría (o todas) de las propiedades de un objeto existente, que aparece mucho cuando se actualiza el estado, ya que no puede modificar el estado directamente:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
Eso reemplaza
this.state.foo
con un nuevo objeto con las mismas propiedades que
foo
excepto la propiedad a, que se convierte en
"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;
}
Esos se llaman spreads. Justo como su nombre lo indica. Significa que está poniendo cualquier valor en esos arreglos u objetos.
Como :
let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]
Esta es una característica de es6 que también se usa en React. Mira el siguiente ejemplo:
function Sum(x,y,z) {
return x + y + z;
}
console.log(Sum(1,2,3)); //6
De esta manera está bien si tenemos un máximo de 3 parámetros, pero ¿qué pasa si necesitamos agregar, por ejemplo, 110 parámetros? ¿Deberíamos definirlos todos y agregarlos uno por uno? Por supuesto, hay una manera más fácil de hacer que se llama SPREAD. En lugar de pasar todos esos parámetros que escribes:
function (...numbers){}
No tenemos idea de cuántos parámetros tenemos, pero sabemos que hay un montón de esos. Con base en es6 podemos reescribir la función anterior como se muestra a continuación y usar la distribución y el mapeo entre ellas para que sea tan fácil como un pedazo de pastel:
let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45
Esta es una nueva característica en ES6 / Harmony. Se llama el Operador de propagación. Le permite separar las partes constituyentes de una matriz / objeto, o tomar múltiples elementos / parámetros y pegarlos. Aquí hay un ejemplo:
let array = [1,2,3]
let array2 = [...array]
// array2 is now filled with the items from array
Y con un objeto / claves:
// 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 />
Lo que es realmente genial es que puedes usarlo para significar "el resto de los valores".
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
Generalmente se llama operador de propagación, se usa para expandir donde sea necesario
ejemplo
const SomeStyle = {
margin:10,
background:#somehexa
}
puede usar esto siempre que lo necesite más sobre la sintaxis Spread del operador de propagación .
Los tres puntos
(...)
se denominan operador de propagación, y esto es conceptualmente similar al operador de propagación de matriz ES6, JSX aprovecha estos estándares compatibles y en desarrollo para proporcionar una sintaxis más limpia en JSX
Las propiedades extendidas en los inicializadores de objetos copian propiedades enumerables propias de un objeto proporcionado en el objeto recién creado.
let n = { x, y, ...z }; n; // { x: 1, y: 2, a: 3, b: 4 }
Referencia:
1) https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties
Los tres puntos en JavaScript son operador spread / rest .
Operador extendido
La sintaxis de propagación permite que una expresión se expanda en lugares donde se esperan múltiples argumentos.
myFunction(...iterableObj);
[...iterableObj, 4, 5, 6]
[...Array(10)]
Parámetros de descanso
La sintaxis del parámetro rest se usa para funciones con un número variable de argumentos.
function(a, b, ...theArgs) {
// ...
}
El operador de extensión / descanso para matrices se introdujo en ES6. Hay una proposal de Estado 2 para propiedades de propagación / descanso de objetos.
TypeScript también admite la sintaxis extendida y puede trasladarla a versiones anteriores de ECMAScript con issues menores.
Los tres puntos representan el operador Spread en ES6. Nos permite hacer bastantes cosas en Javascript:
-
Concatenar matrices
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''] -
Desestructurando una matriz
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''] -
Argumentos de función como matriz
function fun1(...params) { }
Lo anterior se conoce como parámetros de reposo y no restringe el número de valores pasados a una función. Sin embargo, los argumentos deben ser del mismo tipo.
-
Peinando dos objetos
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''}
Para aquellos que vienen del mundo de Python, los atributos de propagación JSX son equivalentes a
desempaquetar listas de argumentos
(el operador Python
**
).
Soy consciente de que esta es una pregunta de JSX, pero trabajar con analogías a veces ayuda a hacerlo más rápido.
Se llama operador de propagación. Por ejemplo, let hello = {name: '''', msg: ''''} let hello1 = {... hello} Ahora las propiedades del objeto hello se copian en hello1.
Se llama sintaxis de spreads en javascript.
Se utiliza para desestructurar una matriz u objeto en javascript.
ejemplo:
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)
Puede hacerlo con la función
Object.assign()
en javascript.
Referencia: sintaxis extendida
Tres puntos
...
representa
operadores de dispersión
o
parámetros de descanso
,
Permite que una expresión de matriz o cadena o cualquier cosa que pueda iterarse se expanda en lugares donde se esperan cero o más argumentos para llamadas a funciones o elementos para matriz.
- Fusionar dos matrices
var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1 = [...arr1, ...arr2];
console.log(arr1); //[1, 2, 3, 4, 5, 6]
- Matriz de copia:
var arr = [1, 2, 3];
var arr2 = [...arr];
console.log(arr); //[1, 2, 3]
Nota: La sintaxis extendida efectivamente va un nivel más profundo al copiar una matriz. Por lo tanto, puede no ser adecuado para copiar matrices multidimensionales como se muestra en el siguiente ejemplo (es lo mismo con Object.assign () y sintaxis extendida).
- Agregue valores de una matriz a otra en un índice específico, por ejemplo, 3:
var arr1 = [4,5]
var arr2 = [1,2,3,...arr1,6]
console.log(arr2); // [1, 2, 3, 4, 5, 6]
- Al llamar a un constructor con nuevo:
var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);
console.log(d);
- Difundir en literales de objeto:
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}
Tenga en cuenta que la propiedad
foo
de obj1 ha sido sobrescrita por la propiedad obj2
foo
- Como una sintaxis de parámetro de reposo que nos permite representar un número indefinido de argumentos como una matriz:
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
Nota: La sintaxis de propagación (que no sea en el caso de las propiedades de propagación) solo se puede aplicar a objetos iterables: por lo tanto, se generará un error
var obj = {''key1'': ''value1''};
var array = [...obj]; // TypeError: obj is not iterable