A ‘componentWillReceiveProps’ helyett ‘getDerivedStateFromProps’

Amanshu Kataria
Amanshu Kataria

Follow

május 14, 2018 – 2 min read

Mivel a React 16.3 kiadásával néhány új életciklus metódus került bevezetésre, és a React 17 kiadásával néhány életciklus metódus elavulttá válik.

getDerivedStateFromProps az egyik ilyen újonnan bevezetett életciklus metódus, amely a componentWillReceiveProps helyébe lép, amely most UNSAFE_componentWillReceiveProps lett.

getDerivedStateFromProps egy statikus metódus, amelyet egy komponens példányosítása után, valamint akkor hívunk meg, amikor új kellékeket kap. Mivel statikus metódusról van szó, ezen a metóduson belül nem lehet hozzáférni a this-hoz, ahogyan más osztály metódushoz sem. A componentWillReceiveProps-tól eltérően ebben a metódusban nem lehet állapotot beállítani, így az állapot frissítésének egyetlen módja az objektum visszaadása. Ha nem akarunk állapotot frissíteni, egyszerűen csak visszaadjuk null.

Merüljünk bele néhány kódba

Így működik a componentWillReceiveProps.

Hasonlítjuk össze a nextProps.someValue-et a this.props.someValue-vel, és ha mindkettő különbözik, akkor végzünk valamilyen műveletet, setState és hívjuk a this.classMethod();-t.

Most nézzük meg, hogyan működik a getDerivedStateFromProps.

Ez két paramétert nextProps és prevState kap. Mint korábban említettük, ebben a metódusban nem férhetünk hozzá a this-hoz, így a kellékeket az állapotba kell tárolnunk, hogy a nextProps-t összehasonlíthassuk a korábbi kellékekkel. A fenti kódban a nextProps és a prevState összehasonlításra kerül, ha mindkettő különbözik, akkor egy objektumot kapunk vissza az állapot frissítéséhez, ellenkező esetben null kerül vissza, jelezve, hogy az állapot frissítése nem szükséges. Ha az állapot megváltozik, akkor a componentDidUpdate meghívásra kerül, ahol elvégezhetjük a kívánt műveleteket, ahogy azt a componentWillReceiveProps-ban tettük.

-ban tettük.

Leave a Reply