React.js es una de las bibliotecas de JavaScript más utilizadas que todo desarrollador de front-end debería conocer. Comprender qué son los accesorios y el estado y las diferencias entre ellos es un gran paso hacia el aprendizaje de React.
En esta publicación de blog, explicaré qué son los accesorios y el estado, y también aclararé algunas de las preguntas más frecuentes sobre ellos:
- ¿Qué son los accesorios?
- ¿Cómo se pasan datos con accesorios?
- ¿Qué es el estado?
- ¿Cómo se actualiza el estado de un componente?
- ¿Qué sucede cuando cambia de estado?
- ¿Puedo usar el estado en todos los componentes?
- ¿Cuáles son las diferencias entre utilería y estado?
¿Qué son los accesorios?
Props es la abreviatura de propiedades y se utilizan para pasar datos entre los componentes de React. El flujo de datos de React entre componentes es unidireccional (solo de padre a hijo).
¿Cómo se pasan datos con accesorios?
Aquí hay un ejemplo de cómo se pueden pasar datos mediante el uso de accesorios:
class ParentComponent extends Component { render() { return ( ); } } const ChildComponent = (props) => { return {props.name}
; };En primer lugar, necesitamos definir / obtener algunos datos del componente principal y asignarlos al atributo "prop" de un componente secundario.
"Nombre" es un accesorio definido aquí y contiene datos de texto. Entonces podemos pasar datos con accesorios como si estuviéramos dando un argumento a una función:
const ChildComponent = (props) => { // statements };Y finalmente, usamos la notación de puntos para acceder a los datos de la propiedad y representarlos:
return {props.name}
;También puedes ver mi video para ver cómo usar los accesorios:
¿Qué es el estado?
React tiene otro objeto incorporado especial llamado estado, que permite a los componentes crear y administrar sus propios datos. Entonces, a diferencia de los accesorios, los componentes no pueden transmitir datos con estado, pero pueden crearlos y administrarlos internamente.
Aquí hay un ejemplo que muestra cómo usar el estado:
class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( {this.state.id}
{this.state.name}
); } }¿Cómo se actualiza el estado de un componente?
El estado no debe modificarse directamente, pero puede modificarse con un método especial llamado setState( ).
this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });¿Qué sucede cuando cambia de estado?
OK, ¿por qué debemos usar setState( )? ¿Por qué incluso necesitamos el objeto estatal en sí? Si está haciendo estas preguntas, no se preocupe, comprenderá el estado pronto :) Déjeme responder.
Un cambio en el estado ocurre según la entrada del usuario, desencadenando un evento, etc. Además, los componentes de React (con estado) se procesan en función de los datos del estado. El estado tiene la información inicial.
Entonces, cuando el estado cambia, React se informa e inmediatamente vuelve a renderizar el DOM, no todo el DOM, sino solo el componente con el estado actualizado. Esta es una de las razones por las que React es rápido.
¿Y cómo se notifica React? Lo adivinaste: con setState( ). El setState( )método activa el proceso de reproducción de las piezas actualizadas. React se informa, sabe qué parte (s) cambiar y lo hace rápidamente sin volver a renderizar todo el DOM.
En resumen, hay 2 puntos importantes a los que debemos prestar atención al usar el estado:
- El estado no debe modificarse directamente,
setState( )debe usarse - El estado afecta el rendimiento de su aplicación y, por lo tanto, no debe usarse innecesariamente
¿Puedo usar el estado en todos los componentes?
Otra pregunta importante que podría hacer sobre el estado es dónde exactamente podemos usarlo. En los primeros días, el estado solo se podía usar en componentes de clase , no en componentes funcionales.
Es por eso que los componentes funcionales también se conocían como componentes sin estado. Sin embargo, después de la introducción de React Hooks , el estado ahora se puede usar tanto en la clase como en los componentes funcionales.
Si su proyecto no usa React Hooks, solo puede usar el estado en los componentes de la clase.
¿Cuáles son las diferencias entre utilería y estado?
Finalmente, recapitulemos y veamos las principales diferencias entre los accesorios y el estado:
- Los componentes reciben datos del exterior con accesorios, mientras que pueden crear y administrar sus propios datos con estado
- Los accesorios se utilizan para pasar datos, mientras que el estado es para administrar datos
- Los datos de los accesorios son de solo lectura y no pueden ser modificados por un componente que los recibe desde el exterior
- Los datos de estado pueden ser modificados por su propio componente, pero son privados (no se puede acceder desde afuera)
- Los accesorios solo se pueden pasar del componente principal al secundario (flujo unidireccional)
- La modificación del estado debería ocurrir con el
setState ( )método
React.js es una de las bibliotecas de JavaScript más utilizadas en la actualidad que todo desarrollador de front-end debe conocer.
Espero que este artículo te ayude a comprender los accesorios y el estado. También hay otras cosas importantes que cubrir sobre React, y seguiré escribiendo sobre ellas más adelante en mis siguientes artículos.
Si desea obtener más información sobre el desarrollo web, ¡no dude en seguirme en Youtube !
¡Gracias por leer!