Olá👋🏻,  Este artigo foi criado especificamente para iniciantes que desejam aprender métodos mais eficazes para gerenciar o estado entre vários componentes. Ele também visa resolver o problema comum de perfuração de suporte, que pode tornar seu código mais difícil de manter e entender. Vamos começar explicando que tipo de problema a API de contexto resolve.  Se preferir o formato de vídeo, aqui está o tutorial que você pode assistir no meu canal no YouTube.👇🏻   https://youtu.be/4p_VWn1AEvg?embedable=true  O que é perfuração auxiliar?  Você sabe como às vezes você precisa passar dados de um componente pai para um componente filho e acaba passando adereços por meio de vários componentes intermediários? Isso é chamado de   e pode ficar confuso rapidamente. Vejamos um exemplo para esclarecer isso. perfuração de hélice    Conforme mostrado no diagrama, imagine que você buscou alguns dados no componente   , que fica na raiz do seu aplicativo. Agora, se um componente profundamente aninhado, digamos o componente   , precisar acessar esses dados, você normalmente os transmitiria através dos componentes   e   como adereços antes de chegar   . Isso pode ficar feio à medida que seu aplicativo cresce. App Grandchild Parent Child Grandchild  Aqui está outra representação visual:    No exemplo acima, o componente   precisa de dados do usuário, mas esses dados precisam passar primeiro pelos componentes   e   , mesmo que esses componentes intermediários não usem os dados em si. Então, como podemos limpar isso? É aí que a API Context se torna útil. Profile App Navigation  Perfuração de adereços:  Aumenta a nova renderização de componentes  Aumenta o código padrão  Cria dependência de componente  Diminui o desempenho  API de contexto de reação  A API de contexto em React.js permite passar dados entre componentes sem a necessidade de passá-los como acessórios em cada nível da árvore de componentes. Funciona como um sistema de gerenciamento de estado global onde você define seu estado em um objeto de contexto e pode acessá-lo facilmente em qualquer lugar na árvore de componentes. Vamos entender isso com um exemplo.    Como você pode ver no diagrama, temos um objeto de contexto que armazena dados que serão acessados por múltiplos componentes. Esses dados são obtidos de APIs ou serviços de terceiros. Antes de acessar esses dados de contexto em qualquer componente, precisamos agrupar todos os componentes que requerem esses dados em um componente provedor de contexto.  Se precisarmos apenas acessar dados nos componentes de navegação e perfil, não precisaremos finalizar o componente app. Depois de agrupar os componentes relevantes com   , você poderá acessar diretamente os dados de contexto em qualquer componente que os consuma. Não se preocupe se ainda não entendeu; vamos mergulhar no código e vê-lo em ação. ContextProvider  Como usar a API de contexto?  Primeiro, vamos criar um aplicativo React usando   Basta copiar os seguintes comandos para configurar o projeto. Vite.js.   npm create vite@latest  Adicione o nome do seu projeto  Selecione Reagir  Selecione texto datilografado nas opções   cd project_name // to change to project directory npm install npm run dev  Então você pode abrir seu servidor de desenvolvimento   em seu navegador. http://localhost:5173  Primeiro, vamos criar as pastas necessárias. Aqui está a estrutura de pastas do nosso projeto.   src | components | context  Na pasta de componentes vamos criar o arquivo   e adicionar o seguinte código. Profile.jsx   import React from 'react' const Profile = () => { return ( <div>Profile</div> ) } export default Profile  Crie mais um componente chamado   na pasta de componentes. Navbar.jsx   import Profile from './Profile' const Navbar = () => { return ( <nav style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "90%", height: "10vh", backgroundColor: theme === "light" ? "#fff" : "#1b1b1b", color: theme === "light" ? "#1b1b1b" : "#fff", border: "1px solid #fff", borderRadius: "5px", padding: "0 20px", marginTop: "40px", }}> <h1>LOGO</h1> <Profile /> </nav> ) } export default Navbar  Vamos importar este componente   no arquivo   . <Navbar /> App.jsx   import Navbar from "./components/Navbar"; function App() { return ( <main style={{ display: "flex", flexDirection: "column", justifyContent: "start", alignItems: "center", height: "100vh", width: "100vw", }} > <Navbar /> </main> ); } export default App;  Então, basicamente, o componente   é filho de   e   é filho do componente   . <Profile /> <Navbar /> <Navbar /> <App />  Adicionando API de Contexto  Vamos criar o arquivo   na pasta   . Adicione o seguinte código ao arquivo. UserContext.jsx context   import { createContext, useEffect, useState } from "react"; export const UserContext = createContext(); export const UserProvider = ({ children }) => { const [user, setUser] = useState(null); const fetchUserData = async (id) => { const response = await fetch( `https://jsonplaceholder.typicode.com/users/${id}` ).then((response) => response.json()); console.log(response); setUser(response); }; useEffect(() => { fetchUserData(1); }, []); return ( <UserContext.Provider value={{ user, fetchUserData }} > {children} </UserContext.Provider> ); };  Primeiro, criamos um objeto   vazio usando   . Certificamo-nos de importá-lo de   . Podemos adicionar valores padrão dentro do objeto de contexto, mas o mantemos nulo por enquanto. UserContext createContext react  A seguir, criamos   , que retorna um provedor usando   , como   . Ele envolve os componentes filhos e, no valor, podemos passar qualquer coisa que quisermos usar nos componentes filhos. UserProvider UserContext UserContext.Provider  No momento, estamos usando   para buscar os dados do usuário. O   fornece endpoints de API falsos para fins de teste. A função   aceita   e usa esse ID para buscar os dados do usuário. Em seguida, armazenamos a resposta no estado   . a API jsonplaceholder jsonplaceholder fetchUserData id user  Estamos chamando a função   no   , portanto, no carregamento da página, ele chama a função e injeta os dados no estado   . fetchUserData useEffect user  Agora, vamos usar esse contexto no componente   . Envolva o componente   usando   ; o mesmo que o seguinte código: <App /> <NavBar /> <UserProvider />   <UserProvider> <Navbar /> </UserProvider>  Vamos usar o estado   no componente   . Para isso, usaremos o gancho   . Isso pega   e fornece os valores que passamos no   como estado   e função   . Lembre-se, não precisamos agrupar o componente   pois ele já está no componente   que já está agrupado com o provedor. user <Profile /> useContext UserContext UserProvider user fetchUserData <Profile /> <Navbar />  Abra o   e adicione o código a seguir. Profile.jsx  const { user } = useContext(UserContext); if (user) { return ( <span style={{ fontWeight: "bold", }} > {user.name} </span> ); } else { return <span>Login</span>; }  Aqui, estamos usando o estado   do   . Exibiremos o nome de usuário se houver   , caso contrário, exibiremos apenas uma mensagem de login. Agora, se você vir a saída, deverá haver um nome de usuário no componente da barra de navegação. É assim que podemos usar diretamente qualquer estado que esteja no contexto de qualquer componente. O componente que usa esse estado deve ser agrupado em   . user UserContext user <Provider />  Você também pode usar vários contextos. Você só precisa agrupar os componentes do provedor em outro componente do provedor, conforme mostrado no exemplo a seguir.   <ThemeProvider> <UserProvider> <Navbar /> </UserProvider> </ThemeProvider>  No exemplo acima, estamos usando   que gerencia o estado do tema. <ThemeProvider />  Você pode assistir ao vídeo do YouTube acima para ver o exemplo completo do uso de vários provedores de contexto.  Otimizando a nova renderização na API React Context  Há um problema que ocorre quando você usa a API Context em vários componentes. Sempre que o estado ou valor muda na API de contexto, ela renderiza novamente todos os componentes inscritos naquele contexto específico, mesmo que nem todos os componentes estejam usando o estado alterado. Para entender esse problema de nova renderização, vamos criar um componente   que usa contexto para armazenar e exibir valores de contagem. <Counter />  Confira o exemplo a seguir. Você pode criar um arquivo   na pasta de componentes e colar o código a seguir. Counter.jsx   import { createContext, memo, useContext, useState } from "react"; const CountContext = createContext(); const CountProvider = ({ children }) => { const [count, setCount] = useState(0); return ( <CountContext.Provider value={{ count, setCount }}> {children} </CountContext.Provider> ); }; function CountTitle() { console.log("This is Count Title component"); return <h1>Counter Title</h1>; } function CountDisplay() { console.log("This is CountDisplay component"); const { count } = useContext(CountContext); return <div>Count: {count}</div>; } function CounterButton() { console.log("This is CounterButton component"); const { count, setCount } = useContext(CountContext); return ( <> <CountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </> ); } export default function Counter() { return ( <CountProvider> <CounterButton /> </CountProvider> ); }  No código acima:  Primeiro, criamos um objeto   usando  CountContext createContext.  No   temos um estado para armazenar valores de contagem. Estamos enviando   e o método   para os componentes filhos por meio da proposta de valor. CountProvider, count setCount  Criamos componentes separadamente para ver quantas vezes os componentes individuais são renderizados novamente.    : Este componente exibe apenas o título e nem mesmo usa nenhum valor do contexto. <CountTitle />    : Este componente exibe valores de contagem e usa o estado   do contexto. <CountDisplay /> count    : Este componente renderiza o componente acima e um botão que aumenta os valores de contagem usando   . <CounterButton /> setCount  Ao final, estamos agrupando o componente   dentro do componente   para que os demais componentes possam acessar os valores de contagem. <CounterButton /> CountProvider  Agora, se você executar o código e clicar no botão   , verá nos logs que cada componente é renderizado novamente cada vez que o estado muda. O   nem mesmo está usando valores de contagem, mas está sendo renderizado novamente. Isso está acontecendo porque o componente pai de   que é   está usando e atualizando o valor de count e é por isso que está sendo renderizado novamente. Increase <CountTitle /> <CountTitle /> <CounterButton />  Como podemos otimizar esse comportamento? A resposta é   . O   React permite pular a nova renderização de um componente quando seus adereços permanecem inalterados. Após o componente   , vamos adicionar a seguinte linha. memo memo <CountTitle />   const MemoizedCountTitle = React.memo(CountTitle)  Agora, no componente   , onde estamos renderizando o componente   , substitua   por   como no código a seguir: <CounterButton /> <CountTitle /> <CountTitle /> <MemoizedCountTitle />   <> <MemoizedCountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </>  Agora, se você aumentar a contagem e verificar os logs, poderá ver que ele não está mais renderizando o componente   . <CountTitle />  API Redux vs Contexto  O   é uma biblioteca de gerenciamento de estado para gerenciamento de estado complexo com transições de estado mais previsíveis. Enquanto a API Context foi projetada para gerenciamento simples de estado e passagem de dados pela árvore de componentes sem perfuração de suporte. Então, quando escolher qual? Redux  Use   para gerenciamento de estado simples e localizado onde o estado não muda com frequência. a API React Context  Use   para necessidades complexas de gerenciamento de estado, especialmente em aplicações maiores, onde os benefícios de seu gerenciamento de estado estruturado superam a configuração extra. o Redux  Há também mais uma biblioteca que também é uma opção popular para gestão estadual. O   . recuo da reação  O   é uma biblioteca de gerenciamento de estado para React que visa fornecer a simplicidade da API Context com o poder e desempenho do Redux. React Recoil  Se você estiver interessado em aprender mais sobre   , deixe-me saber nos comentários e criarei tutoriais detalhados sobre este tópico com base no seu feedback. o React Recoil  Conclusão  A API de contexto   oferece uma maneira poderosa e eficiente de gerenciar estados em vários componentes, abordando efetivamente o problema de perfuração de suporte. Ao usar a API Context, você pode simplificar seu código, reduzir novas renderizações desnecessárias e melhorar o desempenho geral do aplicativo. React.js  Embora a API Context seja ideal para gerenciamento simples de estado, aplicativos mais complexos podem se beneficiar do uso   ou de outras bibliotecas de gerenciamento de estado, como   . Compreender quando e como usar essas ferramentas permitirá que você crie aplicativos React mais sustentáveis e escaláveis. Redux React Recoil  Obrigado por ler este artigo, espero que você tenha achado útil. Se você estiver interessado em aprender e construir projetos usando React, Redux e Next.js, pode visitar meu canal no YouTube aqui:  CodeBucks  Aqui estão meus outros artigos que você pode gostar de ler:   Como implementar rolagem suave em Next.js com Lenis e GSAP   Como obter a localização do usuário em React.js   Os 10 temas mais populares do VS Code que você deve experimentar  Visite meu blog pessoal:  DevDreaming

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

2021 - HackerNoon Contributor of the Year - CSS3

Checkout my new website🤩

Portfolio

Hire Me

Buy Me a Coffee

2021 - HackerNoon Contributor of the Year - REDUX

Este áudio é produzido no idioma original da história!

Como simplificar o gerenciamento de estado com a API de contexto React.js – um tutorial

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Telegram: a ponte da Crypto Island para o continente

Modelo Bitcoin UTXO, alimentando um ecossistema único

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Telegram: a ponte da Crypto Island para o continente

Modelo Bitcoin UTXO, alimentando um ecossistema único

Digital Nomads Ouçam: O que você precisa saber sobre o novo visto DTV da Tailândia

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps