Hvordan bruges React Component Lifecycle?

Forstå, hvordan du bruger React Lifecycle Methods.

Undertiden kan React-livscyklusmetoder være lidt vanskelige. Her er en kort forklaring, der hjælper dig med at bruge dem i dine applikationer.

componentDidMount ()

Når komponenten er monteret, kan du nu bruge componentDidMount (). Det er et godt sted at indlede en netværksanmodning, hvis du har brug for det. En importerende ting at vide, er, at hvis du bruger setState () i componentDidMount (), vil det forårsage en gendannelse af komponenten. Dette vil ske, før browseren opdaterer skærmen, så brugeren ikke kan se mellemstatus. Da brug af setState () i componentDidMount () forårsager en dobbelt gengivelse af komponenten, forårsager det ofte ydelsesproblemer.

shouldComponentUpdate ()

I React, når komponenttilstand ændres, er standardopførelsen at gengive den igen. Generelt vil du være villig til at udføre denne opførsel, men hvis du vil optimere ydeevnen for din applikation, burdeComponentUpdate () kunne være nyttig.

Denne livscyklusmetode aktiveres, hver gang nye rekvisitter eller tilstand modtages af komponenten. Hvis du vil bekræfte, at disse nye rekvisitter eller tilstand ikke har brug for gengivelse af komponenten, kan du returnere falsk. Ellers, hvis komponenten skal gendannes igen, vender du sandt tilbage.

componentDidUpdate ()

Når en komponent er udateret, udløses componentDidUpdate (). Denne metode kaldes ikke til den indledende gengivelse. Det giver dig mulighed for at interagere med DOM, når komponenten er blevet opdateret. Det giver dig også mulighed for at initialisere en ny netværksanmodningsbase på dit nyligt ændrede brugergrænseflade.

componentWillUnmount ()

Lige inden en komponent fjernes og ødelægges, udløses componentWillUnmount (). Du må kun bruge denne livscyklusmetode til at rense alt, der er forbundet med komponenten, før det ødelægges (ryd timere, annullere netværksanmodninger osv.).

statisk getDerivedStateFromProps ()

getDerivedStateFromProps () kaldes på hver render, lige inden render-metoden kaldes. Denne metode skal returnere nul, hvis intet behøver at blive opdateret eller et objekt til at opdatere staten.

Hans eneste formål er at gøre det muligt for en komponent at opdatere dens tilstand afhængigt af ændringer i hans rekvisitter. Afledt tilstand skal bruges delikat, så du i stedet kan bruge et enklere alternativ.

getSnapshotBeforeUpdate ()

Denne livscyklusmetode kaldes lige inden den nyeste gengivelse er knyttet til DOM. getSnapshotBeforeUpdate () giver dig mulighed for at få oplysninger fra DOM, før det muligvis ændres. Det returnerer en snapshot-værdi eller null, og denne returnerede værdi overføres altid som en parameter til componentDidUpdate (). Du bruger ikke dette meget ofte, men for eksempel kan det være nyttigt, når dit UI skal ændres afhængigt af en rulleposition.

UNSAFE_componentWillMount ()

Før komponenten monteres, kaldes UNSAFE_componentWillMount (). Hvis du har brug for at indstille den oprindelige tilstand for en komponent, anbefales det at bruge konstruktør () i stedet. Hvis du planlægger at bruge nogen funktioner, der opretter bivirkninger eller abonnementer, skal du bruge componentDidMount () i stedet.

UNSAFE_componentWillReceiveProps ()

UNSAFE_componentWillReceiveProps () udskrives i fremtiden, fordi det skaber fejl og uoverensstemmelser. Hvis du har brug for at hente data eller oprette en animation, skal du hellere bruge componentDidMount (). Du skal følge disse henstillinger til andre brugssager, og du bør kun bruge getDerivedStateFromProps () som en sidste udvej.

UNSAFE_componentWillUpdate ()

Medmindre shouldComponentUpdate () returnerer falske, udløses denne metode, når der modtages nye rekvisitter eller tilstand. Du kan bruge UNSAFE_componentWillUpdate () til at udføre forberedelse før en opdatering. Denne metode kaldes ikke på den oprindelige gengivelse, og du bør ikke bruge this.setState () inde i den. Almindeligvis kan du erstatte denne metode med componentDidMount (). Du kan også bruge getSnapshotBeforeUpdate (), hvis du f.eks. Vil læse DOM for at gemme en rulleposition.

Godt arbejde

Du skal nu have en bedre forståelse af, hvordan React Lifecycle Methods fungerer. Med denne forbedrede viden vil du være i stand til at opbygge endnu mere fantastiske apps!

Tak for at have læst, og hvis du kunne lide denne artikel og ønsker mere læsning om React and Machine Learning, følg mig på Medium!