Înlocuirea ‘componentWillReceiveProps’ cu ‘getDerivedStateFromProps’

Amanshu Kataria
Amanshu Kataria

Follow

14 mai, 2018 – 2 min citește

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