React - Ciclo De Vida E Context API | Hemerson Vianna | Nerd Calistênico
react ciclo de vida e context api
React - Ciclo de vida e context API
Publicado em 03 . Junho . 2019
Na versão 16.3.0, que foi lançada em 29 de março de 2018, teve a adição de novos métodos para o ciclo de vida dos componentes e nova API.
No ciclo de vida dos componentes existem métodos para controlarmos o fluxo de montar, atualizar e desmontar cada elemento. E com essa versão do React, três métodos estão sendo depreciados: componentWillMount, componentWillReceiveProps, e componentWillUpdate. E foram adicionados dois novos métodos:
getDerivedStateFromProps – adicionado como uma alternativa mais segura do método componentWillReceiveProps. Executado tanto na inicialização do componente quanto na sua atualização de propriedades e deve retornar as alterações no estado do componente baseada nas propriedades ou nulo.
getSnapshotBeforeUpdate – adicionado para oferecer suporte à leitura segura de propriedades. Todo valor retornado por esse método é enviado ao componentDidUpdate que é o ciclo executado posteriormente.
Sempre existiu uma Context API, mas era instável e com diversos problemas relacionados à performance. Eu particularmente já usava para uma questão de tema e gostei muito da estabilide que veio nessa versão.
Ao compartilhar informações entre componentes totalmente desconexos você terá que utilizar a arquitetura flux com Redux. Com a nova Context API conseguimos facilmente repassar informações de qualquer tipo entre diversos componentes do React.
Precisaremos ver 3 coisas: React.createContext, Provider e Consumer.
Abaixo, temos o componente filho Title e ainda não estamos usando a nova API de contexto.
ttile: 'Esse é um título'
{tenant &&
Vamos começar criando uma variável de contexto com o comando React.createContext passando como parâmetro o valor padrão quando nenhum valor existir nessa variável.
const ExampleContext = React.createContext('example');
A variável ExampleContext já pode ser considerada uma variável de contexto. Para alterar o seu valor, precisamos utilizar um componente chamado Provider que pertence à essa variável:
<ExampleContext.Provider value={title}>
{title &&
Assim, criamos um ExampleContext.Provider com uma única propriedade chamada value que é responsável por prover o valor da variável de contexto.
Agora o componente Title, consome o ExampleContext:
<ExampleContext.Consumer>
{title => (
</ExampleContext.Consumer>
Com o ThemeContext.Consumer podemos utilizar esses dados e trabalhar com uma técnica chamada render props.
Sendo assim, você não vai mais precisar utilizar o Redux sempre que precisar compartilhar informações entre componentes, mas vale lembrar que a arquitetura Flux é muito mais do que simplesmente compartilhamento de dados, tem a ver com estrutura, com fluxo de informações e arquitetura dos dados da aplicação.
Para retornar o valor padrão que informamos na criação da variável ExampleContext, o componente não deverá possuir um Provedor correspondente acima dele na árvore. Isso pode ser útil para testar componentes isoladamente sem envolvê-los.
// Saída: example
Mais pode ser visto na documentação oficial.
Então vamos continuar precisando de um gerenciamento de estado mais complexo como o Redux e temos a API de contexto quando for necessário compartilhar algumas informações entre componentes.
Agora é ficar ligado nos novos métodos e prestar atenção nos que foram depreciados. A biblioteca está evoluindo muito bem e vamos botar a mão na massa.