Reaccionar – El cebo del Estado y los problemas de este punto

Una de las cosas que hacen que React sea bastante intimidante para los nuevos usuarios es que hay algunos conceptos que necesitan ser comprendidos antes de saltar al agua, es importante aprender ES6 de todos modos, pero por los patrones y estructuras utilizadas es especialmente √ļtil para nuestros frameworks favoritos. Dicho esto, todav√≠a se puede utilizar ES5 para conseguir que funcione, pero por el bien de la coherencia ES6 es la manera de ir! Crear sitios web con React.js! Deje de vivir en el pasado y moverse con los tiempos, hermano!!! :No Mutate el Estado, Mate! la mayor√≠a de las veces esto no es una buena idea de todos modos, pero es especialmente cierto para la construcci√≥n de proyectos frontales. Cambiar el estado iniciado original puede causar muchos problemas cuando las cosas van mal, puede hacer que sea dif√≠cil hacer un seguimiento de d√≥nde vienen los errores…Aqu√≠ tenemos una tienda, vamos a a√Īadir un elemento…

classAppextendsComponent{
    constructor(atrezzo) {
        super(accesorios);
            this.state = { tienda:[] };
    }
...//
onAdd = (elemento) => {
    esta.tienda.estatal.push(item);
Para el ojo no entrenado, as√≠ es como se podr√≠a pensar en hacerlo. Pero esta es una situaci√≥n com√ļn cl√°sica en la que estamos cambiando el estado original que es un enorme no-no en la programaci√≥n funcional.
onAdd = (item) => {
    let newList = esta.tienda.state.shop;
    newList = newList.concat(item);
    this.setState({ tienda: newList })
Concat es un método que combina dos matrices en una nueva. Aquí cogemos la matriz de la tienda (vacía por ahora) y la combinamos con el ítem en una nueva matriz. Luego usamos el setState de React para modificar el estado actual, en lugar de hacerlo directamente nosotros mismos.
onAdd = (item) => {
    let newList = esta.tienda.state.shop;
    newList = [...newList, item];
    this.setState({ shop: newList })

La mayoría de las veces usamos laversión ES6 de combinar los arrays con el operador de propagación. El .... permite que una matriz existente sea referenciada pero no modificada, lo que significa que no mutamos la matriz original, por lo que asegurarnos de que nunca mutamos directamente el estado es una buena práctica, y queremos entrar en la mentalidad de hacer eso todo el tiempo.

Encuadernación de su `esto Problemas con las funciones de flecha

Como usted puede o no haber notado, las funciones escritas arriba parecen estar en un formato extra√Īo. Note que no hay palabras clave de funci√≥n y que para los codificadores m√°s avanzados tampoco hay m√©todos de enlace. a medida que pasamos los datos en nuestros componentes, usamos el

esto.[función] 

para referirnos a funciones en otros lugares, pero debido al alcance léxico el

this

no se est√° refiriendo a donde queremos que se refiera.Las funciones de flecha son una forma diferente de escribir funciones, pero con la ventaja principal de que evita que la palabra clave

this

se limite a esa función.

classParentComponentextendsComponent{
    render() {
        retorno (
        )
    };
función parentFunction() {
        console.log ("Botón pulsado!")
    }
}
clase ChildComponent amplía Componente {
    render() {
        retorno (
                    Haga clic en mí!
        )
    };
    handleClick = () => {
        esta.función.props.parentFunction();
    }
Aquí en este componente hijo tenemos un botón que cuando se pulsa, utiliza los elementos de apoyo parentFunction que se ha transmitido desde el componente padre El hecho de que parentFunction se haya transmitido utilizando la palabra clave function hará que esta palabra clave no se refiera a lo que queremos si se ha escrito sin funciones de flecha.La forma ES5 de resolver este problema es usar el método bind, pero esto significa que cada función transmitida tendría que ser encuadernada, y con una gran cantidad de funciones no sería escalable, así que sólo tiene que usar[nombre] = () => {} para ahorrarse estos problemas de alcance.
 this.deleteRow(id, event)}>Botón Borrar Fila 
// Los eventos como parámetros son explícitos, por lo que pueden ser incluso más cortos.
 this.deleteRow(id)}>Borrar Fila
Uso de ES5 Bind
this.deleteRow.bind(this, id)}>Delete Row

Definitivamente parece más limpio y necesita menos mantenimiento. No tenemos que llevar un registro de todas nuestras ataduras y, por lo tanto, somos menos propensos a cometer errores. También es más legible y parece más limpio en general!

Consigue 2 Grips con ES6!

Si no conoc√≠as estos conceptos y te lanzaste a ellos, definitivamente puede ser todo un reto entenderlo. De cualquier manera, a medida que Javascript evoluciona y desaf√≠a todas las probabilidades y sigue sobreviviendo, es cada vez m√°s evidente que es importante mantenerse al d√≠a con todas las nuevas caracter√≠sticas que se a√Īaden.estos d√≠as trato de mantener las cosas consistentes usando tanta sintaxis ES6 como sea posible, y la pelusa de Air Bnb. El hecho de que usted puede hacer tantas cosas de diferentes maneras puede ser bastante desalentador para un aspirante a novato.de todos modos, espero que sea √ļtil, que tenga una gran semana!

Etiquetas

JavascriptReaccionarTecnologíaEs6CodificaciónÚltimas historias técnicasReaccionar Es6