Context

Contexto (context) disponibiliza uma forma de passar dados entre a árvore de componentes sem precisar passar props manualmente em cada nível.

Em uma aplicação típica do React, os dados são passados de cima para baixo (de pai para filho) via props, mas esse uso pode ser complicado para certos tipos de props (como preferências locais ou tema de UI), que são utilizadas por muitos componentes dentro da aplicação. Contexto (context) fornece a forma de compartilhar dados como esses, entre todos componentes da mesma árvore de componentes, sem precisar passar explicitamente props entre cada nível.

• Quando Usar Contexto
• Antes de você usar Contexto

• API

  • React.createContext
  • Context.Provider
  • Class.contextType
  • Context.Consumer
  • Context.displayName

• Exemplos

  • Contexto Dinâmico
  • Atualizando o Contexto de um componente aninhado
  • Consumindo vários Contextos
• Ressalvas
• API Legada

Quando Usar Contexto

Contexto (context) é indicado para compartilhar dados que podem ser considerados “globais” para a árvore de componentes do React. Usuário autenticado ou o idioma preferido, são alguns casos comuns. No exemplo do código a seguir, nós passamos um tema a fim de estilizar o componente Button.

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  // O componente Toolbar deve receber uma prop extra chamada "theme"  // e repassar para o componente ThemedButton.  // Isso pode ser bem trabalhoso porque, se cada botão na aplicação  // precisar saber o tema, este (o tema) teria que ser repassado por  // todos os componentes.
  return (
    <div>
      <ThemedButton theme={props.theme} />    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }