Înlocuirea ‘componentWillReceiveProps’ cu ‘getDerivedStateFromProps’
Cu ocazia lansării React 16.3, au fost introduse câteva metode noi ale ciclului de viață, iar lansarea React 17 va deprecia unele metode ale ciclului de viață.
getDerivedStateFromProps
este una dintre aceste metode ale ciclului de viață nou introduse, înlocuind componentWillReceiveProps
, care a devenit acum UNSAFE_componentWillReceiveProps
.
getDerivedStateFromProps
este o metodă statică care este invocată după ce o componentă este instanțiată, precum și atunci când primește noi props. Deoarece este o metodă statică, nu puteți accesa this
în interiorul acestei metode și nici nu puteți accesa orice altă metodă a clasei. Spre deosebire de componentWillReceiveProps
, nu puteți seta starea în interiorul acestei metode, astfel încât singura modalitate de a actualiza starea este returnarea unui obiect. Dacă nu doriți să actualizați nici o stare, pur și simplu returnați null
.
Să ne scufundăm în ceva cod
Acesta este modul în care funcționează componentWillReceiveProps
.
Comparăm nextProps.someValue
cu this.props.someValue
și dacă ambele sunt diferite, atunci efectuăm o operație, setState
și apelăm this.classMethod();
.
Acum să vedem cum funcționează getDerivedStateFromProps
.
Recepe doi parametri nextProps
și prevState
. După cum am menționat anterior, nu puteți accesa this
în interiorul acestei metode, așa că va trebui să stocați props-urile în stare pentru a compara nextProps
cu props-urile anterioare. În codul de mai sus, nextProps
și prevState
sunt comparate, dacă ambele sunt diferite, atunci va fi returnat un obiect pentru a actualiza starea, în caz contrar null
va fi returnat indicând că nu este necesară actualizarea stării. În cazul în care starea se schimbă, se apelează componentDidUpdate
, unde putem efectua operațiile dorite, așa cum am făcut în componentWillReceiveProps
.
.
Leave a Reply