Components de reacció: objectius i estats a ReactJS amb exemples

'A React, tot és un component'

Si esteu familiaritzat amb React, haureu escoltat o llegit aquesta frase moltes vegades. Però sabeu què significa exactament i com s’utilitza? Si no ho feu, llegiu aquest bloc per obtenir més informació sobre els components de React i les diferents fases del cicle de vida. Estic segur que quan acabis en llegir aquest bloc, podreu entendre completament els components de React i els conceptes que l’envolten. Però abans de continuar, doneu una ullada ràpida als temes que tractaré:

• Què són els components React?
• Avantatges dels components React
• Accessoris
• Estats
• Estats contra objectes
• Cicle de vida del component React

Què són els components React?

Anteriorment, els desenvolupadors havien d’escriure 1.000 línies de codi per desenvolupar una aplicació senzilla d’una sola pàgina. La majoria d’aquestes aplicacions seguien l’estructura tradicional de DOM i fer-hi canvis era molt difícil i feia tediós per als desenvolupadors.Han hagut de cercar manualment l'element que necessitava el canvi i actualitzar-lo en conseqüència. Fins i tot un petit error provocaria un error en l’aplicació. A més, actualitzar DOM era molt car. Així, es va introduir l'enfocament basat en components. En aquest enfocament, tota l’aplicació es divideix en trossos lògics que s’anomenen components. React va ser un dels marcs que va optar per aquest enfocament.Si teniu previst desenvolupar la vostra carrera professional en desenvolupament web, el començament primerenc us obriria moltes oportunitats.

Ara entenem quins són aquests components.

Els components React es consideren els components bàsics de la interfície d’usuari. Cadascun d'aquests components existeix dins del mateix espai però s'executa independentment l'un de l'altre. Els components React tenen la seva pròpia estructura, mètodes i API. Són reutilitzables i es poden injectar en interfícies segons la necessitat. Per tenir una millor comprensió, considereu tota la IU com un arbre.Aquí el component inicial es converteix en l'arrel i cadascuna de les peces independents es converteix en branques, que es divideixen en subrames.

Això fa que la nostra interfície d’usuari estigui organitzada i permeti que les dades i els canvis d’estat floguin lògicament des de l’arrel fins a les branques i després cap a les subrames. Els components fan trucades al servidor directament des del client, cosa que permet al DOM actualitzar-se dinàmicament sense actualitzar la pàgina. Això es deu al fet que els components react es basen en el concepte de sol·licituds AJAX. Cada component té la seva pròpia interfície que pot fer trucades al servidor i actualitzar-les. Com que aquests components són independents els uns dels altres, cadascun es pot actualitzar sense afectar els altres ni la UI en el seu conjunt.

Fem servir React.createClass () mètode per crear un component. Aquest mètode s'ha de passar un argument objecte que definirà el component React. Cada component ha de contenir exactament un render () mètode. És la propietat més important d'un component que s'encarrega d'analitzar l'HTML a JavaScript, JSX. Això render () retornarà la representació HTML del component com a node DOM. Per tant, totes les etiquetes HTML s'han d'incloure en una etiqueta adjunta dins del fitxer render () .

A continuació es mostra un codi de mostra per crear un component.

import React from 'react' import ReactDOM from 'react-dom' class MyComponent estén React.Component {render () {return (
El vostre identificador és {this.state.id}
)}} ReactDOM.render (, document.getElementById ('contingut'))

Estats contra objectes

Cicle de vida del component React

React proporciona diversos mètodes que notifiquen quan es produeix una determinada etapa del cicle de vida d’un component. Aquests mètodes s’anomenen mètodes del cicle de vida. Aquests mètodes de cicle de vida no són molt complicats. Podeu pensar en aquests mètodes com a gestors d'esdeveniments especialitzats que es diuen en diversos punts durant la vida dels components. Fins i tot podeu afegir el vostre propi codi a aquests mètodes per realitzar diverses tasques. Parlant del cicle de vida del component, el cicle de vida es divideix en 4 fases. Ells són:

1. Fase inicial
2. Fase d'actualització
3. Els accessoris canvien de fase
4. Fase de desmuntatge

Cadascuna d’aquestes fases conté alguns mètodes del cicle de vida que només són específics per a ells. Per tant, ara descobrim què passa durant cadascuna d’aquestes fases.

a. Fase inicial - La primera fase del cicle de vida d’un component React és la fase inicial o fase de representació inicial. En aquesta fase,el component està a punt d’iniciar el seu viatge i dirigir-se al DOM. Aquesta fase consisteix en els mètodes següents que s'invoquen en un ordre predefinit.

1. getDefaultProps (): Aquest mètode s'utilitza per especificar el valor per defecte de això.props . Es crida abans que es creï el component o fins que se li transmetin accessoris del pare.
2. getInitialState (): Aquest mètode s'utilitza perespecificar el valor per defecte de aquest.estat abans de crear el component.
3. componentWillMount (): Aquest és l'últim mètode al qual podeu trucar abans que el vostre component es renderitzi al DOM. Però si truques setState () dins d'aquest mètode, el component no es tornarà a representar.
4. render (): Th Aquest mètode és responsable de retornar un únic node HTML arrel i s'ha de definir en tots i cadascun dels components. Podeu tornar nul o bé fals per si no voleu representar res.
5. componentDidMount (): Una vegada que el component es representa i es col·loca al DOM, aquest es diu mètode. Aquí podeu realitzar qualsevol operació de consulta DOM.

b. Fase d'actualització: Un cop afegit el component al DOM, només es poden actualitzar i tornar a representar quan es produeix un canvi d'estat. Cada vegada que canvia l'estat, el component crida a la seva render () de nou. Qualsevol component que depengui de la sortida d’aquest component també anomenarà el seu render () de nou. Això es fa, per assegurar-nos que el nostre component mostra la versió més recent de si mateix. Per tant, per actualitzar correctament els components, s’invoca els mètodes següents en l’ordre indicat:

1. shouldComponentUpdate (): Mitjançant aquest mètode podeu controlar el comportament del vostre component en actualitzar-se. Si torneu un veritable d'aquest mètode,el component s’actualitzarà. Altrament, si aquest mètode torna afals, el component ometrà l'actualització.
2. componentWillUpdate (): Tes diu el seu mètode jabans que el vostre component estigui a punt d'actualitzar-se. En aquest mètode, no podeu canviar l'estat del component trucant this.setState .
3. render (): Si esteu tornant fals a través de shouldComponentUpdate () , el codi dins render () es tornarà a invocar per assegurar-vos que el vostre component es mostra correctament.
4. componentDidUpdate (): Un cop actualitzat i representat el component, s’invoca aquest mètode. Podeu posar qualsevol codi dins d'aquest mètode que vulgueu executar un cop s'hagi actualitzat el component.

c. Fase de canvi d’atrezzo: Després el component s'ha convertit al DOM, l'única altra vegada que el component s'actualitzarà, a part del canvi d'estat, quan canvia el seu valor propici. Pràcticament aquesta fase funciona de manera similar a la fase anterior, però en lloc de l'estat, tracta dels accessoris. Per tant, aquesta fase només té un mètode addicional des de la fase d’actualització.

còpia poc profunda i còpia profunda a Java

1. componentWillReceiveProps (): Aquest mètode retorna un argument que conté el nou valor prop que està a punt d'assignar-se al component.
   La resta de mètodes del cicle de vida es comporten de manera idèntica als mètodes que hem vist a la fase anterior.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. render ()
5. componentDidUpdate ()

d.La fase de desmuntatge -Aquesta és l'última fase del cicle de vida dels components en què el component es destrueix i s'elimina completament del DOM. Només conté un mètode:

1. componentWillUnmount (): Quan s’invoca aquest mètode, el component s’elimina permanentment del DOM.En aquest mètode, iPodeu realitzar qualsevol tasca relacionada amb la neteja, com ara eliminar oients d'esdeveniments, aturar temporitzadors, etc.

A continuació es mostra tot el diagrama del cicle de vida:

Això ens porta al final del bloc sobre React Components. Espero que en aquest bloc hagi pogut explicar clarament què són els components React, com s’utilitzen. Podeu consultar el meu bloc a , per si voleu obtenir més informació sobre ReactJS.

Si voleu formar-vos a React i voleu desenvolupar UI interessants pel vostre compte, consulteu per Edureka, una empresa d'aprenentatge en línia de confiança amb una xarxa de més de 250.000 estudiants satisfets repartits per tot el món.

Tens alguna pregunta? Esmenta’l a la secció de comentaris i et respondrem.