React - Ciclo de vida e context API

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.

Métodos de ciclo de vida

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.

Context API

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class App extends Component {
state = {
ttile: 'Esse é um título'
}

render() {
const { title } = this.state;
return (
{tenant &&
<div className="container">
<Title />
</div>
}
);
}
}

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.

1
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:

1
2
3
4
5
6
7
8
9
10
11
12
render() {
const { title } = this.state;
return (
<ExampleContext.Provider value={title}>
{title &&
<div className="container">
<Title />
</div>
}
</ExampleContext.Provider>
);
}

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:

1
2
3
4
5
6
7
8
9
function Title() {
return (
<ExampleContext.Consumer>
{title => (
<h1>{title}</h1>
)}
</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.

1
2
3
4
5
6
7
8
9
10
render() {
const { title } = this.state;
return (
<div className="container">
<Title />
</div>
);
}

// Saída: example

Mais pode ser visto na documentação oficial.

Considerações finais

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.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.