Context API
O que é?
É uma ferramenta nativa do React a partir da versão 16.3.0.
O que faz?
Tem como objetivo facilitar o controle e manipulação de estados dentro de uma aplicação, podendo ser classificada como um gerenciador de estados assim como o Redux. Porém, diferentemente do Redux, a Context API vem de forma nativa no React, além de possuir algumas peculiaridades.
Em projetos pequenos e médios pode ser uma alternativa ao Redux, porém em aplicações maiores a Context API pode gerar alguns problemas de organização, isso é devido a liberdade que ela nós da enquanto desenvolvedores. Projetos maiores, por vezes exigem uma estrutura mais robusta, rígida e "visual" para facilitar a escalabilidade.
Sintaxe
Criação de Contexto
Para criarmos um contexto devemos utilizar a função createContext(), atribuindo seu resultado a uma constante, essa que deverá ser exportada.
const SomeContext = createContext();
export default SomeContext;
Com o contexto criado e exportado, precisamos definir o componente que irá iniciar o contexto, tendo o componente definido tudo que precisamos fazer é encapsular os componentes filhos com o Provider, passando os estados e funções a serem compartilhados através de props. Essa prop se chama value e normalmente irá receber um objeto contendo os estados e funções a serem utilizados em outros componentes.
class SomeComponent extends Component {
render() {
return (
<SomeContext.Provider value={}>
<OtherComponent />
<AnotherComponent />
</SomeContext.Provider>
)
}
}
Consumindo Contexto
Para consumir o contexto utilizamos uma sintaxe similar a do Provider, com a diferença que iremos receber o value ao invés de passá-lo e no lugar de .Provider utilizamos .Consumer. Para consumir o value, devemos utilizar uma função anônima dentro do .Consumer, essa função irá receber o value como parâmetro.
class OtherComponent extends Component {
render() {
return (
<div>
<SomeContext.Consumer>
{(value) => {}}
</SomeContext.Consumer>
</div>
)
}
}
Context Provider
O que é?
É um componente React que deverá encapsular outros componentes, a fim de disponibilizar os estados do contexto a todos os componentes ali encapsulados.
Quais podem ser?
O único requisito para que um componente se torne Provider é possuir em seu render() o Context.Provider encapsulando outros componentes. Logo qualquer componente pode ser um Provider, com a exceção dos Consumers, os quais não são recomendados a se tornarem Providers.
Organização pessoal
Uma forma de se organizar é criar um componente exclusivo como Provider, dessa forma separamos toda a parte lógica, da parte visual. Todos os estados e funções devem ficar no Provider e toda a parte visual deve ficar nos Consumers.
const MyContext = createContext();
export default class MyContextComponent extends Component {
render() {
<MyContext.Provider value={}>
{this.props.children}
</MyContext.Provider>
}
}
Com o componente criado acima, podemos chamá-lo para encapsular o resto dos componentes que fazem sentido, sendo que os componentes filhos podem apenas chamar os estados e funções conforme for necessário, sem a necessidade de escrever lógica no componente filho.
Lembrando que não é “proibido” escrever a parte lógica nos componentes filhos (Consumers), porém para melhor organização, podemos centralizar tudo no componente Provider.
Observações
Todos os Links disponibilizados nesse artigo, levam ao seu respectivo conteúdo na documentação oficial do React.
Top comments (1)
Obrigado!