React: Contexto e estado global

Última atualização: 2026-10-26

1. O que você vai aprender

• createContext e Provider
• useContext: contexto de consumo
• Exercícios de contexto versus exercícios de props
• Aninhamento em vários níveis e otimização de desempenho
• Combinando Context e useReducer (Gerenciamento leve de estado)

2. Uma história sobre a troca de temas

(1) Desafio: Passagem de props por 5 níveis de componentes

Alice quer adicionar um recurso de ativação/desativação do “modo escuro” ao aplicativo. O fluxo de dados deve passar por cinco camadas de componentes:

▶ Exemplo: Como usar o contexto

Saída:

Estado baseado em Context compartilhado entre os componentes

Saída:

Componente App com estado: 'light'. Renderiza uma interface interativa.

Pergunta da Alice:

• theme À medida que os dados são transmitidos do aplicativo, passando por cada camada até o botão, as três camadas intermediárias, na verdade, não precisam desses dados
• Se adicionarmos mais uma informação do usuário para ser transmitida, as propriedades ficarão extremamente pesadas.
• Este é o clássico treinamento com adereços

(2) Solução para “Contexto”

Benefícios: Os componentes intermediários (Page, MainLayout, Sidebar) não precisam mais passar os props theme; os dados são passados diretamente do Provider para o Consumer.

3. Conceitos fundamentais do contexto

(1) createContext + Provider + useContext

graph TB
    A[createContext<br/>Create a context container] --> B[Provider<br/>Wrapper Component tree<br/>Provide value]
    B --> C[Middle Component<br/>Don't care Context]
    C --> D[useContext<br/>Consumption Context Data]
    
    style A fill:#1890ff,color:#fff
    style B fill:#52c41a,color:#fff
    style D fill:#ff6b6b,color:#fff

graph TB
    A[createContext<br/>Create a context container] --> B[Provider<br/>Wrapper Component tree<br/>Provide value]
    B --> C[Middle Component<br/>Don't care Context]
    C --> D[useContext<br/>Consumption Context Data]
    
    style A fill:#1890ff,color:#fff
    style B fill:#52c41a,color:#fff
    style D fill:#ff6b6b,color:#fff

(2) Cenários em que o contexto é aplicável

Regra: Use Context apenas quando for necessário compartilhar dados entre “vários níveis e vários componentes”. Se você estiver simplesmente passando valores entre componentes pai e filho, os Props são suficientes.

4. Aninhamento de contextos e modularização de provedores

(1) Aninhamento de contextos em vários níveis

Os projetos do mundo real geralmente apresentam vários contextos:

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <I18nProvider>
          <NotificationProvider>
            <MainApp />
          </NotificationProvider>
        </I18nProvider>
      </ThemeProvider>
    </AuthProvider>
  )
}

Para evitar o caos do aninhamento, você pode criar um componente composto AppProviders:

function AppProviders({ children }) {
  return (
    <AuthProvider>
      <ThemeProvider>
        <I18nProvider>
          <NotificationProvider>
            {children}
          </NotificationProvider>
        </I18nProvider>
      </ThemeProvider>
    </AuthProvider>
  )
}

function App() {
  return (
    <AppProviders>
      <MainApp />
    </AppProviders>
  )
}

(2) Hook de provedor personalizado

5. Otimização do desempenho em contexto

Quando o valor de um Contexto muda, todos os componentes que utilizam esse Contexto são renderizados novamente. Essa é a maior armadilha de desempenho dos Contextos.

// ❌ Question：Every time App Rendering，value They're all new partners. → All Consumer All are heavily rendered
function App() {
  const [count, setCount] = useState(0)
  return (
    <ThemeContext.Provider value={{ theme: 'dark', setCount }}>
      <ExpensiveTree />
    </ThemeContext.Provider>
  )
}

// ✅ Fix 1：use  useMemo Stable value Quote
function App() {
  const [count, setCount] = useState(0)
  const themeValue = useMemo(
    () => ({ theme: 'dark', toggleTheme: () => setCount(c => c + 1) }),
    []
  )
  return (
    <ThemeContext.Provider value={themeValue}>
      <ExpensiveTree />
    </ThemeContext.Provider>
  )
}

// ✅ Fix 2：separate "unchanged" and "changed" data into different Context
const SettingsContext = createContext({ theme: 'light', language: 'zh' })
const CountContext = createContext(0)

function App() {
  const [count, setCount] = useState(0)
  return (
    <SettingsContext.Provider value={settingsValue}> {/* useMemo Stable */}
      <CountContext.Provider value={count}>
        <ExpensiveTree />
      </CountContext.Provider>
    </SettingsContext.Provider>
  )
}
// Only when used CountContext The component will be count Re-render on changes
// SettingsContext Consumers will not be affected

6. Context + useReducer: Criando um estado global leve

Ao combinar a “propagação entre níveis” do Context com o “gerenciamento complexo de estado” do useReducer, é possível criar uma solução leve para o estado global:

Saída:

Exibe: "Button". Estado: theme (setter: setTheme). Botão: Button

Resultado esperado: Um sistema de notificações completo. Um ícone de notificação (exibindo o número de notificações não lidas) aparece na parte superior; no meio, os usuários podem enviar três tipos de notificações: informação, sucesso e erro; e na parte inferior, é exibida uma lista de notificações, na qual cada notificação pode ser marcada como lida ou excluída.

▶ Exemplo 2: Gerenciamento do status de autenticação do usuário (Contexto + Hook personalizado)

Saída:

Formulário de login com e-mail/senha. Formato de e-mail inválido → borda vermelha + "The email address format is incorrect.". Senha com menos de 6 caracteres → "Password must be at least 6 chars". Envio → console.log({email, password})

Saída:

Subtítulo: "🔐 Log In". Exibe: "🔐 Log In". Estado: user (setter: setUser), loading (setter: setLoading), username (setter: setUsername). Botões: {loading ? 'Logging in......' : 'Log In'}, Log Out. Entrada: Username（Input admin Experience the Role of an Administrator）, Password. Formulário com tratamento de envio. useMemo otimiza o cálculo. useCallback memoiza a referência do handler. Context fornece estado global. Busca assíncrona de dados / estados de carregamento. Comportamento baseado em temporizador

▶ Exemplo 3: Combinação de várias camadas de provedores com a internacionalização (i18n)

Saída:

Internacionalização: o seletor de idioma altera todos os textos. Padrão Context + provider para suporte a vários idiomas

Saída:

Subtítulo: "{t('greeting')}". Exibe: "Chinese". Estado: locale (setter: setLocale). Menu suspenso: Chinese, English. useMemo otimiza o cálculo. useCallback memoiza a referência do handler. Context fornece estado global

▶ Exemplo 4: Divisão do contexto para otimizar o desempenho

Saída:

Componente SplitContextApp com estado: null, false. Renderiza uma interface interativa.

Saída:

Exibe: "Login". Estado: user (setter: setUser), loading (setter: setLoading). Botão: login('Alice')}>Login. useMemo otimiza o cálculo. Context fornece estado global. Busca assíncrona de dados / estados de carregamento. Comportamento baseado em temporizador

▶ Exemplo 5: Exemplo completo do uso de useContext como alternativa ao treinamento com adjetivos

Saída:

Componente SettingsApp com estado: {
    theme: 'light', fontSize: 14, sidebarCollapsed: false,
  }. Renderiza uma interface interativa.

❓ Perguntas Frequentes

📖 Resumo

• createContext → .Provider → useContext Três etapas para usar o Context
• O Context resolve o Props Drilling, mas não resolve o problema do “gerenciamento de estado”
• Armadilha de desempenho: Alterações no valor do contexto fazem com que todos os consumidores sejam renderizados novamente; otimize usando useMemo
• Personalizar o gancho useXxx + verificação de erros é uma prática recomendada
• Context + useReducer pode servir como uma solução leve para o estado global, mas, para cenários complexos, ainda é melhor usar o Zustand ou o Redux.

📝 Exercícios

1. Problema básico (Dificuldade ⭐): Crie um hook LocaleProvider + useLocale que forneça os métodos locale (zh/en) e toggleLocale() para permitir a alternância entre chinês e inglês.
2. Exercício avançado (Dificuldade ⭐⭐): Crie um hook AuthProvider + useAuth que forneça os métodos user, login(username, password) e logout() para gerenciar o status de autenticação do usuário.
3. Desafio (Dificuldade: ⭐⭐⭐): Crie um hook CartProvider + useCart e use Context + useReducer para implementar um carrinho de compras com funções para adicionar, remover, alterar quantidades e esvaziar o carrinho. Use useMemo para otimizar o código e evitar re-renderizações desnecessárias.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós