Dominando a API React Context: um guia abrangente

React JS é uma estrutura de desenvolvimento web frontend amplamente usada, escrita em Javascript. Foi desenvolvido no Facebook e lançado em 2013 para todos os desenvolvedores como uma estrutura de código aberto para a construção de UIs web dinâmicas e reativas.

Uma IU da web reativa é uma visualização de aplicativo da web que é atualizada automaticamente em resposta a quaisquer dados ou alterações de entrada do usuário, sem exigir uma atualização da página.

ReactJS usa um DOM virtual para atualizar a UI com eficiência quando os dados são alterados, resultando em uma experiência de usuário rápida e responsiva.

O exemplo abaixo é um pequeno aplicativo reativo que atualiza o rótulo de contagem sempre que o botão de incremento é clicado, sem atualizar a página.

import React, { useState } from 'react';

function Counter  {
const (count, setCount) = useState(0);

function increment  {
setCount(count + 1);
}

return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}

Você pode testar o exemplo acima em

Componentes ReactJS e DOM Virtual

O que são componentes do React?

Um componente ReactJS é um pedaço de código Javascript que pode ser usado como um bloco de construção independente para construir aplicativos da web front-end.

No ReactJS, você cria componentes da web reutilizáveis ​​​​que podem ser renderizados inúmeras vezes em uma página da web e, em seguida, renderizados novamente de forma reativa em qualquer atualização de dados ou entrada do usuário.

O ReactJS atualiza esses componentes sem exigir uma atualização completa da página, aproveitando seu conceito de DOM virtual.

O que é um Dom Virtual?

DOM virtual é um conceito onde uma representação “virtual” da interface do usuário (documento HTML) é armazenada na memória e mantida sincronizada com a representação “real”. DOM usando uma biblioteca como ReactDOM.

Um exemplo de componente Reactjs usando adereços

No exemplo abaixo, há um componente ReactJS simples que renderiza um botão: –

import React from "react";

export default function Button(props) {
return <button onClick={props.onClick}>{props.label}</button>;
}

O componente ReactJS acima é uma função JS que recebe um único argumento chamado props e retorna uma tag HTML com a propriedade onClick e algum texto.

O rótulo do botão é exibido como o texto do botão e, quando o botão é clicado, a função onClick é chamada.

Para usar este componente em seu aplicativo ReactJS, você pode simplesmente importá-lo e renderizá-lo assim: –

import React from 'react';

import Button from './Button';export default function App  {

function handleClick  {

console.log('Button clicked!');

}

return (
<div>
<Button onClick={handleClick} label="Click me!" />      <br />      <Button onClick={handleClick} label="Click me AGAIN!" />
</div>
);
}

Estou renderizando o mesmo componente duas vezes, mas com acessórios (rótulo) diferentes.

Você pode testar o exemplo acima em

Na captura de tela acima você também pode ver o Virtual DOM no canto inferior direito (destacado em SkyBlue).

Como passar dados de um componente Reactjs para outro?

Nos exemplos acima, criamos nossos aplicativos ReactJS com apenas um único componente, seja o aplicativo de contador ou o aplicativo click me.

No entanto, em um aplicativo da web ReactJS do mundo real, geralmente temos vários componentes interagindo entre si por meio de uma metodologia de passagem de dados chamada 'perfuração de suporte'.

O que são adereços?

Assim como podemos passar dados para uma função JS usando um recurso chamado 'argumentos', da mesma forma, podemos passar dados para um componente ReactJS usando um recurso chamado props, que é uma abreviação de propriedades para fazer algumas operações sobre elas e depois nos retornar uma IU reativa.

Veja o exemplo do aplicativo click me acima, onde estamos passando o texto do rótulo e os dados do evento onClick como adereços ao nosso componente

.

O que é perfuração auxiliar?

Quando você passa acessórios por vários níveis de componentes profundamente aninhados em um aplicativo da web ReactJS, isso é conhecido como perfuração de suporte.

Por exemplo:-

import React from 'react';

function App  {
const (isLoggedIn, setIsLoggedIn) = React.useState(false);

return (
<div>
<Header isLoggedIn={isLoggedIn} />
<Main isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />
<Footer />
</div>
);
}

function Header({ isLoggedIn }) {
return (
<header>
<nav>
{isLoggedIn ? <LogoutButton /> : <LoginButton />}
</nav>
</header>
);
}

function Main({ isLoggedIn, setIsLoggedIn }) {
return (
<main>
<Profile isLoggedIn={isLoggedIn} />
<Settings isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} />
</main>
);
}

function Profile({ isLoggedIn }) {
return (
<div>
<h2>Profile</h2>
{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
</div>
);
}

function Settings({ isLoggedIn, setIsLoggedIn }) {
return (
<div>
<h2>Settings</h2>
{isLoggedIn ? (
<button onClick={  => setIsLoggedIn(false)}>Log out</button>
) : (
<p>Please log in to change your settings.</p>
)}
</div>
);
}

function Footer  {
return <footer>&copy; 2023 My App</footer>;
}

No exemplo acima temos um aplicativo ReactJS onde os dados const isLoggedIn são passados ​​​​para os componentes Header e Main, e também para os componentes de 3º nível Profile e Settings através de um componente intermediário Main usando props e metodologia de perfuração de prop.

O que é uma árvore de componentes?

Uma árvore de componentes em um aplicativo ReactJS é uma representação de componentes organizados em uma hierarquia.

Essa estrutura hierárquica é construída aninhando componentes uns dentro dos outros, com o componente de nível superior sendo a raiz e os componentes filhos localizados abaixo dele.

A imagem acima representa uma árvore de componentes do exemplo de perfuração vertical mencionado na seção anterior.

Desvantagens de passar dados usando perfuração de suporte em uma árvore de componentes

Há momentos em que é melhor evitar a perfuração com hélice, pois ela tem suas desvantagens:

Fluxo de passagem de dados: Ao usar adereços, você precisa passar adereços em cada nível de uma árvore de componentes.

Complexidade: A complexidade da perfuração pode aumentar com o crescimento e a complexidade do seu aplicativo da web ReactJS, tornando mais difícil mantê-lo e depurá-lo.

Código padrão: a perfuração Prop exige que você escreva mais código durante o desenvolvimento do aplicativo React para transmitir os mesmos dados por meio de vários níveis de componente, levando a um aumento no código padrão e a uma base de código menos eficiente para seu aplicativo ReactJS.

Acoplamento: pode criar um acoplamento forte entre componentes, o que significa que alterações em um componente podem afetar outros componentes, tornando a base de código do seu aplicativo mais frágil.

Problemas de desempenho: transmitir dados grandes ou complexos por meio de vários níveis de componentes usando props pode impactar negativamente o desempenho do seu aplicativo ReactJS.

API de contexto de reação

Para desenvolver aplicativos da web ReactJS com mais eficiência, ajudando os desenvolvedores a resolver as desvantagens acima, a equipe principal do ReactJS introduziu, na versão 16.3, uma API chamada Context API, com a qual você pode transmitir dados em uma árvore de componentes sem acessórios.

Com esta API no ReactJS, você pode compartilhar dados entre componentes, em uma árvore de componentes, que não estão diretamente relacionados entre si, eliminando a necessidade de passar manualmente props em cada nível.

Quais são os benefícios do uso da API Context em vez do Perfuração Prop?

Usar a API React Context em vez de perfuração de suporte nos oferece benefícios que são: –

	API de contexto	Perfuração de hélice
Fluxo de passagem de dados	Usa um modelo fornecedor-consumidor para transmitir dados pela árvore de componentes	Passa dados pela árvore de componentes como acessórios
Complexidade	Reduz a complexidade, eliminando a necessidade de adereços serem transmitidos por meio de componentes intermediários	Pode resultar em maior complexidade, pois os componentes precisam estar cientes dos adereços que não usam e podem ter que transmiti-los aos componentes filhos
Código padrão	Reduz o código padrão, fornecendo um armazenamento centralizado de dados	Pode resultar no aumento do código padrão, pois os componentes precisam passar acessórios para componentes filhos
Acoplamento	Reduz o acoplamento entre componentes, pois os componentes não dependem mais uns dos outros para o fluxo de dados	Pode resultar em maior acoplamento, pois os componentes precisam estar cientes dos dados que precisam receber e podem ter que transmiti-los aos componentes filhos
Problemas de desempenho	Fornece uma maneira mais rápida e eficiente de passar dados, pois elimina a necessidade de passar adereços por componentes intermediários	Pode resultar em problemas de desempenho à medida que os adereços são transmitidos através de vários níveis, levando a maiores tempos de renderização e possíveis vazamentos de memória

Exemplo

Por exemploem nossa árvore de componentes, mostrada na seção anterior, usando a API ReactJS Context podemos transmitir dados diretamente do componente App para os componentes Profile e Settings sem passar dados através do componente Main.

Vejamos, a seguir, o mesmo perfuração de suporte exemplo reescrito usando a API de contexto ReactJS: –

import React, { createContext, useState } from 'react';

const AppContext = createContext ;

function App  {
const (isLoggedIn, setIsLoggedIn) = useState(false);

return (
<AppContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
<div>
<Header />
<Main />
<Footer />
</div>
</AppContext.Provider>
);
}

function Header  {
const { isLoggedIn } = useContext(AppContext);

return (
<header>
<nav>
{isLoggedIn ? <LogoutButton /> : <LoginButton />}
</nav>
</header>
);
}

function Main  {
return (
<main>
<Profile />
<Settings />
</main>
);
}

function Profile  {
const { isLoggedIn } = useContext(AppContext);

return (
<div>
<h2>Profile</h2>
{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
</div>
);
}

function Settings  {
const { isLoggedIn, setIsLoggedIn } = useContext(AppContext);

return (
<div>
<h2>Settings</h2>
{isLoggedIn ? (
<button onClick={  => setIsLoggedIn(false)}>Log out</button>
) : (
<p>Please log in to change your settings.</p>
)}
</div>
);
}

function Footer  {
return <footer>&copy; 2023 My App</footer>;
}

No código acima, criei primeiro um contexto chamado AppContext usando um método createContext fornecido pela API React Context.

Em seguida, forneci esse contexto, retornando o componente AppContext.Provider com a propriedade 'value', do meu componente pai App, para os componentes filhos com os quais desejo compartilhar meus dados.

E, finalmente, consumi dados, usando o gancho useContext(AppContext), em meus componentes filhos Cabeçalho, Perfil e Configurações.

Como você pode ver, eliminamos totalmente a necessidade de passar dados para o componente intermediário Main, tornando nosso código ReactJS mais fácil de manter.

Como usar a API React Context em seu aplicativo React?

Existem 5 etapas necessárias para usar a API React Context ao desenvolver seu aplicativo Reactjs: –

1. Crie seu objeto de contexto usando o método createContext

Você precisa criar um contexto, usando o método createContext , que atuará como um armazenamento de dados. Observação:- Você pode criar qualquer número de contextos em seu aplicativo React.

const AppContext = createContext ;

2. Componentes do Provedor e do Consumidor

O objeto AppContext que criamos usando o método createContext acima basicamente retorna dois componentes; o Provedor para passar os dados pela árvore de componentes usando a propriedade 'value' e o Consumidor para ler esses dados passados.

3. Envolva sua árvore de componentes no componente Provedor

Envolva sua árvore de componentes com o componente Provider. Isto deve ser feito no nível mais alto da árvore de componentes que precisa de acesso aos dados de contexto.

  return (

<AppContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>

<div>

<Header />

<Main />

<Footer />

</div>

</AppContext.Provider>

);

4. Passe dados de contexto para seu componente Provider React

Você pode adicionar qualquer valor que desejar ao componente Provider usando a proposta de valor. Este valor pode ser uma string, objeto ou função e estará disponível para todos os componentes consumidores.

<AppContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>

5. Ler dados de contexto usando o componente Consumer

Leia o valor do contexto em qualquer componente que precise dele usando o componente Consumidor. O componente Consumer assume uma função como filha e passa o valor atual do contexto como argumento para essa função. Em nosso exemplo acima, entretanto, estamos usando o gancho useContext para obter dados.

const { isLoggedIn } = useContext(AppContext);

Qual é o valor do contexto?

Conforme mencionado acima na etapa 4, o componente Provider na API React Context aceita um argumento, a propriedade 'value', que é basicamente um armazenamento de dados global também chamado de valor de contexto.

Esse valor de contexto é então compartilhado entre todos os componentes de consumo, que descendem do componente Provider React, e eles podem acessá-lo usando o componente Component ou usando o gancho useContext .

<AppContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>

<div>

<Header />

<Main />

<Footer />

</div>

</AppContext.Provider>

É importante usar o valor do contexto criteriosamente, pois pode levar a um código complexo e difícil de depurar. Portanto, você não deve usar um valor de contexto como armazenamento global para todo o seu aplicativo React.

Restauradoconforme explicado na seção abaixo, seria a melhor solução para gerenciar um armazenamento de dados global com estado para todo o seu aplicativo React.

Qual é a diferença entre o componente Consumer e o gancho Usecontext?

Tanto o componente Consumer quanto o gancho useContext são formas de consumir dados de um contexto React que você cria em seu aplicativo ReactJS usando a API Context, no entanto, eles diferem em sintaxe e uso.

O componente Consumer é fornecido pelo método createContext , portanto, é uma forma tradicional de consumir dados, enquanto useContext é uma maneira mais nova e simples de consumir dados do contexto.

Abaixo está uma tabela de comparação explicando ambos: –

	Componente do Consumidor	UseContext Gancho
Versão Reagir	>= 16,3	>= 16,8
Uso	Componentes de classe	Componentes funcionais
Sintaxe	Adereço de renderização	Gancho
Chapa de ebulição	Mais	Menos
Acoplamento	Alto	Baixo
Desempenho	Um pouco mais baixo	Um pouco mais alto
Simplicidade	Menos simples	Mais simples

Quais são os casos de uso da API de contexto Reactjs?

Esta API pode ser útil em vários cenários para o desenvolvimento de seu aplicativo Web React. No entanto, os casos de uso comuns são: –

Tema

Um dos casos de uso mais comuns da API React Context é gerenciar diferentes temas para sua aplicação web.

Por exemplo – fornecer e consumir dados de cores do tema, como claro e escuro. Os usuários do seu aplicativo da web podem alternar entre temas claros e escuros sem recarregar a página.

Autenticação

Muitos desenvolvedores web ReactJS usam API Context para gerenciar autenticação.

Ao armazenar dados de autenticação em um contexto, você pode acessá-los facilmente a partir de qualquer componente do seu aplicativo Web React.

Por exemplo:-

import React, { createContext, useContext, useState } from "react";

const AuthContext = createContext ;

export default function App  {
const (isLoggedIn, setIsLoggedIn) = useState(false);

const login =   => {
setIsLoggedIn(true);
};

const logout =   => {
setIsLoggedIn(false);
};

return (
<AuthContext.Provider value={{ isLoggedIn, login, logout }}>
{isLoggedIn ? <LogoutComponent /> : <LoginComponent />}
</AuthContext.Provider>
);
}

function LoginComponent  {
const { login } = useContext(AuthContext);

return (
<div>
<h1>Login Page</h1>
<button onClick={login}>Login</button>
</div>
);
}

function LogoutComponent  {
const { logout } = useContext(AuthContext);

return (
<div>
<h1>Logout Page</h1>
<button onClick={logout}>Logout</button>
</div>
);
}

Localização

Você pode usar a API React Context para gerenciar a localização em seu aplicativo da web. Ao armazenar dados de idioma no contexto, você pode alternar facilmente entre diferentes idiomas e atualizar o texto em seu aplicativo sem precisar recarregar a página.

Gerenciando o Estado

Você pode usar a API React Context para gerenciar um estado criando um Context e fornecendo a ele os componentes filhos em seu aplicativo da web.

Por exemplo, vamos converter nosso exemplo de 'contador'criado no início deste artigo, usando a API:-

import React, { createContext, useContext, useState } from "react";

const CountContext = createContext ;

function Counter  {
const (count, setCount) = useState(0);

return (
<CountContext.Provider value={{ count, setCount }}>
<CountDisplay />
<CountButton />
</CountContext.Provider>
);
}

function CountDisplay  {
const { count } = useContext(CountContext);

return <p>Count: {count}</p>;
}

function CountButton  {
const { setCount } = useContext(CountContext);

function increment  {
setCount((prevCount) => prevCount + 1);
}

return <button onClick={increment}>Increment</button>;
}

Uma alternativa popular à API Context para gerenciar o estado dos dados em seu aplicativo React é o Redux.

Redux é uma biblioteca que oferece uma forma mais robusta e complexa de gerenciar o estado da sua aplicação.

Embora a Context API seja uma solução mais simples e leve, o Redux pode oferecer recursos mais avançados, como depuração de viagem no tempo e middleware.

API de contexto vs Redux para gerenciamento de estado

	API de contexto de reação	Restaurado
Gestão estadual	Bom para aplicações de pequeno e médio porte	Bom para aplicações grandes e complexas
Desempenho	Rápido e leve	Pode haver problemas de desempenho com estados grandes
Escalabilidade	Não tão escalável quanto Redux	Altamente escalável
Código padrão	Mínimo	Requer mais código padrão
Suporte de ferramentas	Bom	Excelente
Curva de aprendizado	Fácil de aprender	Curva de aprendizado íngreme

Quais são as desvantagens de usar a API React Context?

Embora o uso da API React Context nos ofereça muitas vantagens ao compartilhar dados e gerenciar o estado dos componentes, ele ainda tem algumas desvantagens.

A tabela abaixo lista as desvantagens mais comuns da API React Context, além de sugerir uma solução para cada uma: –

Desvantagem	Solução
Difícil de testar	Use injeção de dependência ou crie um gancho personalizado que consuma o contexto
Imprevisível	Use componentes React controlados e torne as mudanças de estado explícitas
Pode levar ao acoplamento	Use uma ferramenta de gerenciamento de estado global como Redux ou o padrão Context/Reducer
Pode levar a problemas de desempenho devido à nova renderização	Use técnicas de memorização ou evite compartilhar estado quando possível
Difícil raciocinar sobre	Use convenções de nomenclatura claras e limite o escopo do uso do contexto

Conclusão

Neste artigo, expliquei como transmitir dados em uma árvore de componentes em um aplicativo da web ReactJS usando um método chamado 'perfuração prop' que tem algumas desvantagens, como código padrão, acoplamento de código, problemas de desempenho, etc.

Essas desvantagens podem ser superadas usando a API React Context, que usa a estrutura Provider-Consumer para transmitir dados em uma árvore de componentes junto com o gerenciamento do estado.

Além disso, mencionei alguns casos de uso comuns em que o uso da API React Context prova ser mais benéfico do que o uso de adereços.

No entanto, o uso da API de Contexto também tem algumas desvantagens, como nova renderização, etc., que podem ser superadas usando soluções discutidas neste artigo.

Se você gostou disso, não deixe de conferir nossos outros artigos sobre React.

• As 13 principais bibliotecas de gráficos e tabelas do React
• Os 6 melhores IDEs e editores do React
• Práticas recomendadas do React para melhores aplicativos ReactJS
• Renderização do React Force: tutorial completo
• Ciclo de vida do React: métodos e ganchos em detalhes