Entender el estado y los apoyos en reaccionar

He estado jugando con React y Redux recientemente y pensé que comenzaría a escribir artículos sobre conceptos con los que me he tenido que enfrentar.

Así que, a menos que hayas vivido en una cueva durante los últimos años, sabrás que React es una increíble biblioteca de front-end desarrollada por los buenos amigos de Facebook para facilitar la vida de los desarrolladores.

Es diferente de Angular u otros marcos, ya que es puramente front-end (aunque vea los comentarios a continuación para una gran aclaración sobre esto). Dicho esto, es extremadamente poderoso.

Uno de los conceptos que luché por comprender durante mi aprendizaje sobre React fue la interacción entre State y Props. Pensé que otros podrían haber tenido el mismo problema, así que aquí está mi opinión.

ACCESORIOS

Comencemos con los accesorios. Esto simplemente es una abreviatura de propiedades . Los accesorios son cómo los componentes se comunican entre sí. Si está familiarizado con React, debe saber que los apoyos fluyen hacia abajo desde el componente principal.

También existe el caso de que puede tener apoyos por defecto para que los accesorios se establezcan incluso si un componente principal no pasa los apoyos hacia abajo.

Esta es la razón por la cual las personas se refieren a React como que tienen un flujo de datos unidireccional . Esto requiere un poco de atención y probablemente lo publicaré más tarde, pero por ahora solo recuerde: los datos fluyen de padres a hijos. Los accesorios son inmutables (palabra elegante para que no cambien)

Entonces estamos felices Los componentes reciben datos del padre. Todo ordenado, ¿verdad?

Bueno, no del todo. ¿Qué sucede cuando un componente recibe datos de alguien que no sea el padre? ¿Qué sucede si el usuario ingresa datos directamente al componente?

Bueno, esta es la razón por la que tenemos estado.

ESTADO

Los apoyos no deberían cambiar, así que el estado aumenta. Normalmente, los componentes no tienen estado, por lo que se los denomina sin estado . Un componente que usa estado se conoce como stateful . Siéntase libre de dejar caer ese pequeño bocado en las fiestas y ver a la gente alejarse de usted.

Por lo tanto, el estado se usa para que un componente pueda realizar un seguimiento de la información entre todos los renders que lo hace. Cuando establece setstate , actualiza el objeto de estado y luego vuelve a renderizar el componente. Esto es súper genial porque eso significa que React se ocupa del trabajo duro y es increíblemente rápido.

Como un pequeño ejemplo de estado, aquí hay un fragmento de una barra de búsqueda (vale la pena revisar este curso si desea obtener más información sobre Reaccionar)

 Class SearchBar extends Componente { 
constructor (accesorios) {
super (apoyos);
 this.state = {term: ''}; 
}
 render () { 
regreso (
<div className = "barra de búsqueda">
<entrada
value = {this.state.term}
onChange = {event => this.onInputChange (event.target.value)} />
</ div>
);
}
 onInputChange (term) { 
this.setState ({term});
this.props.onSearchTermChange (term);
}
}

RESUMEN

Props y State hacen cosas similares pero se usan de diferentes maneras. La mayoría de sus componentes probablemente serán apátridas.

Los apoyos se utilizan para pasar datos de padres a hijos o por el componente en sí. Ellos son inmutables y por lo tanto no serán cambiados.

El estado se usa para mutable datos o datos que cambiarán Esto es particularmente útil para la entrada del usuario. Piense barras de búsqueda, por ejemplo. El usuario tecleará los datos y esto actualizará lo que ven.

Hacker Noon es cómo los hackers comienzan sus tardes. Somos parte de la familia @AMI . Ahora estamos aceptando presentaciones y estamos felices de conversar sobre oportunidades de publicidad y patrocinio .

Si disfrutaste esta historia, te recomendamos que leas nuestras últimas historias tecnológicas e historias tecnológicas de tendencia . Hasta la próxima, ¡no des por sentado las realidades del mundo!

Texto original en inglés.