Reagera komponenter - Rekvisita och tillstånd i ReactJS med exempel

'I React är allt en komponent'

Om du känner till React måste du ha hört eller läst den här frasen många gånger. Men vet du vad det betyder exakt och hur det används? Om du inte gör det, läs den här bloggen för att lära dig mer om React-komponenter och de olika faserna i livscykeln. Jag är säker på när du är klar läser denna blogg kommer du att ha en fullständig förståelse för React komponenter och koncepten kring den. Men innan du fortsätter, ta en snabb titt på de ämnen jag kommer att diskutera:

• Vad är reaktionskomponenter?
• Fördelar med reaktionskomponenter
• Rekvisita
• stater
• Stater vs rekvisita
• Reagera komponentens livscykel

Vad är reaktionskomponenter?

Tidigare var utvecklarna tvungna att skriva 1000 rader kod för att utveckla en enkel applikation med en enda sida. De flesta av dessa applikationer följde den traditionella DOM-strukturen och att göra ändringar i dem var mycket utmanande och en tråkig uppgift för utvecklarna.De var tvungna att söka efter det element som behövde ändringen och uppdatera det därefter. Även ett litet misstag skulle leda till att programmet misslyckades. Dessutom var det mycket dyrt att uppdatera DOM. Således introducerades den komponentbaserade metoden. I detta tillvägagångssätt är hela applikationen uppdelad i logiska bitar som kallas komponenterna. React var en av ramarna som valde detta tillvägagångssätt.Om du planerar att bygga upp din karriär inom webbutveckling skulle tidig start öppna många möjligheter för dig.

Låt oss nu förstå vad dessa komponenter är.

Reagera komponenter betraktas som byggstenarna i användargränssnittet. Var och en av dessa komponenter finns inom samma utrymme men körs oberoende av varandra. React-komponenter har sin egen struktur, metoder såväl som API: er. De är återanvändbara och kan injiceras i gränssnitt enligt behov. För att få en bättre förståelse, betrakta hela användargränssnittet som ett träd.Här blir startkomponenten roten och var och en av de oberoende bitarna blir grenar, som ytterligare delas in i undergrenar.

Detta håller vårt användargränssnitt organiserat och låter data- och tillståndsändringar logiskt flöda från roten till grenar och sedan till undergrenar. Komponenter ringer till servern direkt från klientsidan vilket gör att DOM kan uppdateras dynamiskt utan att uppdatera sidan. Detta beror på att reagera komponenter bygger på konceptet med AJAX-förfrågningar. Varje komponent har sitt eget gränssnitt som kan ringa till servern och uppdatera dem. Eftersom dessa komponenter är oberoende av varandra kan var och en uppdateras utan att påverka andra eller gränssnittet som helhet.

Vi använder React.createClass () metod för att skapa en komponent. Denna metod måste skickas till ett objektargument som definierar React-komponenten. Varje komponent måste innehålla exakt en framställa() metod. Det är den viktigaste egenskapen hos en komponent som ansvarar för att analysera HTML i JavaScript, JSX. Detta framställa() returnerar HTML-representationen av komponenten som en DOM-nod. Därför måste alla HTML-taggar bifogas i en bifogad tagg inuti framställa() .

Följande är en exempelkod för att skapa en komponent.

importera React från 'react' importera ReactDOM från 'react-dom' klass MyComponent utökar React.Component {render () {return (
Din id är {this.state.id}
)}} ReactDOM.render (, document.getElementById ('content'))

Stater vs rekvisita

Reagera komponentens livscykel

React tillhandahåller olika metoder som meddelar när ett visst steg i en komponents livscykel inträffar. Dessa metoder kallas livscykelmetoderna. Dessa livscykelmetoder är inte särskilt komplicerade. Du kan tänka på dessa metoder som specialiserade evenemangshanterare som anropas vid olika punkter under en komponentliv. Du kan till och med lägga till din egen kod i dessa metoder för att utföra olika uppgifter. När man talar om komponentens livscykel är livscykeln uppdelad i fyra faser. Dom är:

1. Inledande fas
2. Uppdaterar fas
3. Rekvisita byter fas
4. Avmonteringsfas

Var och en av dessa faser innehåller några livscykelmetoder som endast är specifika för dem. Så låt oss nu ta reda på vad som händer under var och en av dessa faser.

a. Inledande fas - Den första fasen av livscykeln för en React-komponent är den inledande fasen eller den första återgivningsfasen. I denna fas,komponenten är på väg att börja sin resa och ta sig till DOM. Denna fas består av följande metoder som åberopas i en fördefinierad ordning.

1. getDefaultProps (): Denna metod används för att ange standardvärdet för this.props . Det kallas innan din komponent ens skapas eller några rekvisita från föräldern skickas till den.
2. getInitialState (): Denna metod används för attspecificera standardvärdet för denna. stat innan din komponent skapas.
3. componentWillMount (): Detta är den sista metoden som du kan ringa innan din komponent återges till DOM. Men om du ringer setState () inuti den här metoden återges inte din komponent.
4. framställa(): Th metoden är ansvarig för att returnera en enda HTML-nod och måste definieras i varje komponent. Du kan återvända null eller falsk om du inte vill göra något.
5. componentDidMount (): När komponenten har renderats och placerats på DOM, detta metod kallas. Här kan du utföra alla DOM-frågor.

b. Uppdaterar fas - När komponenten har lagts till i DOM kan de uppdateras och återges endast när en tillståndsändring inträffar. Varje gång tillståndet ändras ringer komponenten till sitt framställa() på nytt. Varje komponent som förlitar sig på utdata från den här komponenten kommer också att kalla dess framställa() på nytt. Detta görs för att säkerställa att vår komponent visar den senaste versionen av sig själv. Således för att framgångsrikt uppdatera komponenterna anges följande metoder i den angivna ordningen:

1. shouldComponentUpdate (): Med den här metoden kan du kontrollera din komponents beteende för att uppdatera sig själv. Om du returnerar en sant från den här metoden,komponenten uppdateras. Annars om den här metoden returnerar afalskkommer komponenten att hoppa över uppdateringen.
2. componentWillUpdate (): Thans metod kallas jinnan din komponent håller på att uppdateras. I den här metoden kan du inte ändra ditt komponenttillstånd genom att ringa this.setState .
3. framställa(): Om du returnerar falsk via shouldComponentUpdate () , koden inuti framställa() kommer att anropas igen för att säkerställa att din komponent visar sig korrekt.
4. componentDidUpdate (): När komponenten har uppdaterats och renderats åberopas denna metod. Du kan placera valfri kod i den här metoden som du vill utföra när komponenten har uppdaterats.

c. Rekvisita byta fas - Efter komponenten har gjorts i DOM, den enda andra gången komponenten kommer att uppdateras, förutom tillståndsändringen är när dess prop-värde ändras. Praktiskt taget fungerar denna fas liknande den föregående fasen, men istället för staten handlar den om rekvisita. Således har denna fas endast en ytterligare metod från uppdateringsfasen.

java ändra dubbel till int

1. componentWillReceiveProps (): Den här metoden returnerar ett argument som innehåller det nya prop-värdet som håller på att tilldelas komponenten.
   Resten av livscykelmetoderna beter sig identiskt med de metoder som vi såg i föregående fas.
   
2. shouldComponentUpdate ()
3. componentWillUpdate ()
4. framställa()
5. componentDidUpdate ()

d.Avmonteringsfasen -Detta är den sista fasen av komponenternas livscykel där komponenten förstörs och tas bort från DOM helt. Den innehåller bara en metod:

1. componentWillUnmount (): När denna metod har anropats tas din komponent bort från DOM permanent.I denna metod YDu kan utföra alla saneringsrelaterade uppgifter som att ta bort händelselyssnare, stoppa timers etc.

Följande är hela livscykeldiagrammet:

Detta leder oss till slutet av bloggen om React Components. Jag hoppas att jag i den här bloggen tydligt kunde förklara vad som är React Components, hur de används. Du kan hänvisa till min blogg på , om du vill lära dig mer om ReactJS.

Om du vill bli utbildad i React och vill utveckla intressanta gränssnitt på egen hand, kolla in av Edureka, ett pålitligt inlärningsföretag online med ett nätverk av mer än 250 000 nöjda elever spridda över hela världen.

Har du en fråga till oss? Vänligen nämna det i kommentarfältet så återkommer vi till dig.