Componentes de React - Props y estados en ReactJS con ejemplos

'En React, todo es un componente'

Si está familiarizado con React, debe haber escuchado o leído esta frase muchas veces. Pero, ¿sabe qué significa exactamente y cómo se usa? Si no es así, lea este blog para aprender todo sobre los componentes de React y las diferentes fases del ciclo de vida. Estoy seguro para cuando termines Al leer este blog, comprenderá completamente los componentes de React y los conceptos que lo rodean. Pero antes de continuar, eche un vistazo rápido a los temas que discutiré:

• ¿Qué son los componentes de React?
• Ventajas de los componentes React
• Accesorios
• Estados
• Estados vs apoyos
• Reaccionar el ciclo de vida de los componentes

¿Qué son los componentes de React?

Anteriormente, los desarrolladores tenían que escribir 1000 líneas de código para desarrollar una aplicación simple de una sola página. La mayoría de esas aplicaciones seguían la estructura DOM tradicional y realizar cambios en ellas fue muy desafiante y una tarea tediosa para los desarrolladores.Tuvieron que buscar manualmente el elemento que necesitaba el cambio y actualizarlo en consecuencia. Incluso un pequeño error provocaría fallas en la aplicación. Además, actualizar DOM era muy costoso. Por tanto, se introdujo el enfoque basado en componentes. En este enfoque, toda la aplicación se divide en fragmentos lógicos que se denominan Componentes. React fue uno de los frameworks que optó por este enfoque.Si está planeando desarrollar su carrera en el desarrollo web, el comienzo temprano le brindará muchas oportunidades.

Ahora entendamos cuáles son estos componentes.

Los componentes de React se consideran los componentes básicos de la interfaz de usuario. Cada uno de estos componentes existe dentro del mismo espacio, pero se ejecutan independientemente unos de otros. Los componentes de React tienen su propia estructura, métodos y API. Son reutilizables y se pueden inyectar en interfaces según sea necesario. Para tener una mejor comprensión, considere la interfaz de usuario completa como un árbol.Aquí, el componente inicial se convierte en la raíz y cada una de las piezas independientes se convierte en ramas, que se dividen a su vez en sub-ramas.

Esto mantiene nuestra interfaz de usuario organizada y permite que los datos y cambios de estado fluyan lógicamente desde la raíz a las ramas y luego a las sub-ramas. Los componentes realizan llamadas al servidor directamente desde el lado del cliente, lo que permite que el DOM se actualice dinámicamente sin actualizar la página. Esto se debe a que los componentes de reacción se basan en el concepto de solicitudes AJAX. Cada componente tiene su propia interfaz que puede realizar llamadas al servidor y actualizarlas. Como estos componentes son independientes entre sí, cada uno puede actualizarse sin afectar a los demás ni a la interfaz de usuario en su conjunto.

Usamos React.createClass () método para crear un componente. A este método se le debe pasar un argumento de objeto que definirá el componente React. Cada componente debe contener exactamente uno hacer() método. Es la propiedad más importante de un componente que se encarga de analizar el HTML en JavaScript, JSX. Esta hacer() devolverá la representación HTML del componente como un nodo DOM. Por lo tanto, todas las etiquetas HTML deben incluirse en una etiqueta adjunta dentro del hacer() .

A continuación se muestra un código de muestra para crear un componente.

clase mutable en java ejemplo

importar React de 'react' importar ReactDOM de la clase 'react-dom' MyComponent extiende React.Component {render () {return (
Su identificación es {this.state.id}
)}} ReactDOM.render (, document.getElementById ('contenido'))

Estados vs apoyos

Reaccionar el ciclo de vida de los componentes

React proporciona varios métodos que notifican cuándo se produce una determinada etapa en el ciclo de vida de un componente. Estos métodos se denominan métodos de ciclo de vida. Estos métodos de ciclo de vida no son muy complicados. Puede pensar en estos métodos como controladores de eventos especializados a los que se llama en varios puntos durante la vida de un componente. Incluso puede agregar su propio código a estos métodos para realizar varias tareas. Hablando del ciclo de vida del componente, el ciclo de vida se divide en 4 fases. Son:

1. Fase inicial
2. Fase de actualización
3. Fase de cambio de utilería
4. Fase de desmontaje

Cada una de estas fases contiene algunos métodos de ciclo de vida que son específicos solo para ellas. Entonces, descubramos ahora qué sucede durante cada una de estas fases.

a. Fase inicial - La primera fase del ciclo de vida de un componente de React es la fase inicial o la fase de renderización inicial. En esta fase,el componente está a punto de comenzar su viaje y llegar al DOM. Esta fase consta de los siguientes métodos que se invocan en un orden predefinido.

1. getDefaultProps (): Este método se utiliza para especificar el valor predeterminado de this.props . Se llama antes de que se cree su componente o se le pasan los accesorios del padre.
2. getInitialState (): Este método se utiliza paraespecificar el valor predeterminado de este estado antes de que se cree su componente.
3. componentWillMount(): Este es el último método al que puede llamar antes de que su componente se procese en el DOM. Pero si llamas setState () dentro de este método, su componente no se volverá a renderizar.
4. hacer(): Th Este método es responsable de devolver un único nodo HTML raíz y debe definirse en todos y cada uno de los componentes. Puedes regresar nulo o falso en caso de que no quieras renderizar nada.
5. componenteDidMount (): Una vez que el componente se procesa y se coloca en el DOM, este se llama al método. Aquí puede realizar cualquier operación de consulta DOM.

segundo. Fase de actualización - Una vez que el componente se agrega al DOM, pueden actualizarse y volver a renderizarse solo cuando ocurre un cambio de estado. Cada vez que cambia el estado, el componente llama a su hacer() de nuevo. Cualquier componente que se base en la salida de este componente también llamará a su hacer() de nuevo. Esto se hace para garantizar que nuestro componente muestre la última versión de sí mismo. Por lo tanto, para actualizar correctamente el estado de los componentes, se invocan los siguientes métodos en el orden indicado:

1. shouldComponentUpdate (): Con este método, puede controlar el comportamiento de actualización de su componente. Si devuelve un verdadero de este método,el componente se actualizará. De lo contrario, si este método devuelve unfalso, el componente omitirá la actualización.
2. componenteWillUpdate (): Tsu método se llama just antes de que su componente esté a punto de actualizarse. En este método, no puede cambiar el estado de su componente llamando this.setState .
3. hacer(): Si devuelve falso a través de shouldComponentUpdate () , el código dentro hacer() se invocará de nuevo para garantizar que su componente se muestre correctamente.
4. componentDidUpdate(): Una vez que el componente se actualiza y se procesa, se invoca este método. Puede poner cualquier código dentro de este método, que desee ejecutar una vez que se actualice el componente.

C. Fase de cambio de accesorios - Después el componente se ha procesado en el DOM, la única otra vez que el componente se actualizará, aparte del cambio de estado, es cuando cambia su valor de propiedad. Prácticamente esta fase funciona de forma similar a la fase anterior, pero en lugar del estado, se ocupa de los puntales. Por lo tanto, esta fase tiene solo un método adicional de la fase de actualización.

1. componenteWillReceiveProps (): Este método devuelve un argumento que contiene el nuevo valor de prop que está a punto de asignarse al componente.
   El resto de los métodos del ciclo de vida se comportan de manera idéntica a los métodos que vimos en la fase anterior.
   
2. shouldComponentUpdate ()
3. componenteWillUpdate ()
4. hacer()
5. componentDidUpdate()

re.La fase de desmontaje -Esta es la última fase del ciclo de vida de los componentes en la que el componente se destruye y se elimina del DOM por completo. Contiene solo un método:

1. componenteWillUnmount (): Una vez que se invoca este método, su componente se elimina del DOM de forma permanente.En este método, yPuede realizar cualquier tarea relacionada con la limpieza, como eliminar detectores de eventos, detener temporizadores, etc.

A continuación se muestra el diagrama del ciclo de vida completo:

Esto nos lleva al final del blog sobre React Components. Espero que en este blog haya podido explicar claramente qué son los componentes React, cómo se utilizan. Puedes consultar mi blog en , en caso de que desee obtener más información sobre ReactJS.

Si desea capacitarse en React y desea desarrollar interfaces de usuario interesantes por su cuenta, consulte la por Edureka, una empresa de aprendizaje en línea de confianza con una red de más de 250.000 alumnos satisfechos repartidos por todo el mundo.

Tienes una pregunta para nosotros? Menciónalo en la sección de comentarios y nos comunicaremos contigo.