Substituir ‘componentWillReceiveProps’ por ‘getDerivedStateFromProps’

>Amanshu Kataria
Amanshu Kataria

Follow

14 de Maio, 2018 – 2 min. ler

Com o lançamento do React 16.3, alguns novos métodos de ciclo de vida foram introduzidos, e a liberação do React 17 irá depreciar algum método de ciclo de vida.

getDerivedStateFromProps é um desses métodos de ciclo de vida recentemente introduzidos substituindo componentWillReceiveProps, que agora se tornou UNSAFE_componentWillReceiveProps.

getDerivedStateFromProps é um método estático que é invocado depois que um componente é instanciado, bem como quando ele recebe novos adereços. Como é um método estático, você não pode acessar this dentro deste método nem pode acessar qualquer outro método de classe. Ao contrário de componentWillReceiveProps você não pode definir estado dentro deste método, então a única maneira de atualizar o estado é retornando um objeto. Se você não quiser atualizar nenhum estado, simplesmente retorne null.

Vamos mergulhar em algum código

Esta é a forma como componentWillReceiveProps funciona.

Comparamos nextProps.someValue com this.props.someValue e se ambos são diferentes então realizamos alguma operação, setState e chamamos this.classMethod();.

Agora vamos ver como getDerivedStateFromProps funciona.

Recebe dois params nextProps e prevState. Como mencionado anteriormente você não pode acessar this dentro deste método então você terá que armazenar os adereços no estado para comparar os nextProps com os adereços anteriores. No código acima nextProps e prevState são comparados, se ambos são diferentes então um objeto será retornado para atualizar o estado, caso contrário null será retornado indicando que a atualização do estado não é necessária. Se o estado mudar então componentDidUpdate é chamado onde podemos executar as operações desejadas como fizemos em componentWillReceiveProps.

.

Leave a Reply