javascript title - ¿Qué hacen estos tres puntos en Reaccionar?



html css (14)

¿Qué hace el ... hacer en este código de Reacción (usando JSX) y cómo se llama?

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

Answers

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

Esta forma está bien si tenemos un máximo de 3 parámetros, pero ¿qué pasa si necesitamos agregar, por ejemplo, 110 parámetros? ¿Deberíamos definirlas todas y agregarlas una por una? Por supuesto, hay una manera más fácil de hacer que se llama SPREAD. En lugar de pasar todos esos parámetros se escribe:

function (...numbers){} 

No tenemos idea de cuántos parámetros tenemos, pero sabemos que hay montones de ellos. Basándonos en es6 podemos reescribir la función anterior como se muestra a continuación y usar la distribución y el mapeo entre ellos 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


Es una práctica común pasar los apoyos en una aplicación React. Al hacer esto, podemos aplicar cambios de estado al componente secundario independientemente de si es Puro o Impuro (sin estado o con estado). Hay momentos en que el mejor enfoque, cuando se aprueban, es pasar propiedades singulares o un objeto completo de propiedades. Con el soporte para arreglos 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 props a un niño se observa con esta sintaxis:

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

Está bien usarlo cuando el número de apoyos es mínimo, pero se vuelve inmanejable cuando los números de apoyos son mucho más altos. 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 simplemente establecer esas propiedades y vincularlas al objeto más adelante. Esto causa problemas con la comprobación de propType y los errores de seguimiento de la pila críptica que no son útiles y causan retrasos en la depuración. El siguiente es un ejemplo de esta práctica, y lo que no debe hacer:

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

Este mismo resultado se puede lograr 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 usa JSX spread o JSX, así que para volver a la ecuación, podemos hacer algo como esto:

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

Las propiedades incluidas en "... props" son foo: x, bar: y. Esto se puede combinar con otros atributos para anular las propiedades de "... props" usando 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 fusione 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 de reacción / documentos de Facebook es:

Si ya tiene "accesorios" como un objeto, y desea pasarlo en JSX, puede usar "..." como un 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 de propagación pueden ser útiles cuando se crean contenedores genéricos. Sin embargo, también pueden hacer que su código sea desordenado facilitando el paso de muchos accesorios irrelevantes a componentes que no se preocupan por ellos. Esta sintaxis debe utilizarse con moderación.


Atributos de propagación utilizados para pasar las múltiples propiedades de una manera sencilla

{... this.props} es propiedad de this.props

Uso del operador de propagación {...} con los accesorios de abajo

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

Sin {...} Propagación

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

> 

Con {...} Spread

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

El Tweet de Dan Abramov acerca del operador de Spread (Creador de Redux) https://twitter.com/dan_abramov/status/694519379191545856?lang=en


Para aquellos que vienen del mundo de Python, los atributos de propagación de JSX son equivalentes a Desempaquetar listas de argumentos (el operador de Python ** ).

Soy consciente de que esta es una pregunta JSX, pero trabajar con analogías a veces ayuda a hacerlo más rápido.


En resumen, los tres puntos ... es un operador de propagación en ES6 (ES2015). operador de propagación obtendrá 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]


Como saben ... se denominan Atributos extendidos que el nombre representa y permite que una expresión se expanda.

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

Así que en resumen, es un atajo limpio , podemos decir .


Esos son llamados diferenciales. Así como su nombre lo indica. Significa que está poniendo cualquier valor que tenga en esa matriz u objetos.

Como :

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

Los tres puntos (...) se denominan operador de dispersión, y esto es conceptualmente similar al operador de dispersión de matriz ES6. JSX aprovecha estos estándares compatibles y de desarrollo para proporcionar una sintaxis más clara en JSX.

Las propiedades de propagación en los inicializadores de objetos copian las propiedades enumerables 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

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


Los tres puntos representan al operador de propagación en ES6. Nos permite hacer bastantes cosas en Javascript:

  1. Copiando una matriz

    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. Destructurando 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']
    
  3. Argumentos de la función como matriz

     function fun1(...params) { 
    
     }  
    

Lo anterior se conoce como parámetros de descanso y no restringe el número de valores pasados ​​a una función. Sin embargo, los argumentos deben ser del mismo tipo.

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

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 juntos. 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 / teclas:

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

El ... (operador de propagación) se utiliza para reaccionar a:

proporcione una forma clara de pasar props de los componentes padre a hijo. Por ejemplo, dado estos apoyos en un componente principal,

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

Se podrían pasar 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.


Los tres puntos en JavaScript son operador de reparto / reposo .

Operador de propagación

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 utiliza para funciones con número variable de argumentos.

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

El operador de propagación / reposo para matrices se introdujo en ES6. Hay una propuesta del Estado 2 para propiedades de reposo / reposo de objetos.

TypeScript también admite la sintaxis de propagación y puede transpilarlo en versiones anteriores de ECMAScript con issues menores.


Por amor a $ DEITY, por favor no haga una función de espera de espera ocupada. setTimeout y setInterval hacen todo lo que necesitas.





javascript reactjs