Contexto (context) disponibiliza uma forma de passar dados entre a árvore de componentes sem precisar passar props manualmente em cada nível.
\nEm uma aplicação típica do React, os dados são passados de cima para baixo (de pai para filho) via props. Mas isso pode dar um pouco de trabalho em 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.
\nContexto (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 para a fim de estilizar o componente Button.
\nclass App extends React.Component {\n render() {\n return <Toolbar theme=\"dark\" />;\n }\n}\n\nfunction Toolbar(props) {\n // 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.\n return (\n <div>\n <ThemedButton theme={props.theme} /> </div>\n );\n}\n\nclass ThemedButton extends React.Component {\n render() {\n return <Button theme={this.props.theme} />;\n }\n}Usando contexto, nós podemos evitar passar prop através de elementos intermediários.
\n// Context nos permite passar um valor a fundo da árvore de componente// sem explicitamente passa-la por cada componente.// Crie um Context para o tema atual (com \"light\" como padrão).const ThemeContext = React.createContext('light');\nclass App extends React.Component {\n render() {\n // Use um Provider para passar o tema atual para a árvore abaixo. // Qualquer componente pode acessa-la, não importa quão profundo esteja. // Neste exemplo, nós passamos \"dark\" como tema atual. return (\n <ThemeContext.Provider value=\"dark\"> <Toolbar />\n </ThemeContext.Provider>\n );\n }\n}\n\n// Um componente antecessor não precisa mais// passar o tema explicitamente.function Toolbar() {\n return (\n <div>\n <ThemedButton />\n </div>\n );\n}\n\nclass ThemedButton extends React.Component {\n // Atribua um contextType para ler o context do tema atual. // React vai encontrar o Provider acima mais próximo e vai usa-lo. // Neste exemplo, o tema atual é \"dark\". static contextType = ThemeContext;\n render() {\n return <Button theme={this.context} />; }\n}Contexto (context) é usado principalmente quando algum dado precisa ser acessado por muitos componentes em diferentes níveis. Use contexto moderadamente uma vez que isto pode dificultar a reutilização de componentes.
\nSe você apenas quer evitar passar algumas props por muitos níveis, composição de componente geralmente é uma solução mais simples que Contexto (context).
\nConsidere por exemplo o componente Page que passa as props user e avatarSize por vários níveis abaixo de modo que os componentes Link e Avatar profundamente aninhados, podem ler essas props.
<Page user={user} avatarSize={avatarSize} />\n// ... que renderiza ...\n<PageLayout user={user} avatarSize={avatarSize} />\n// ... que renderiza ...\n<NavigationBar user={user} avatarSize={avatarSize} />\n// ... que renderiza ...\n<Link href={user.permalink}>\n <Avatar user={user} size={avatarSize} />\n</Link>Pode parecer redundante passar para baixo as props user e avatarSize através de vários níveis se no final apenas o componente Avatar realmente precisa usa-las. Além disso, é incômodo sempre que o componente Avatar precisar de mais props do topo, você também precisar adicionar todas elas por todos os níveis intermediários.
Uma forma de resolver este problema sem contexto é atribuir o próprio componente Avatar a uma prop do componente Page, assim os componentes intermediários não precisam saber sobre a prop user ou o avatarSize:
function Page(props) {\n const user = props.user;\n const userLink = (\n <Link href={user.permalink}>\n <Avatar user={user} size={props.avatarSize} />\n </Link>\n );\n return <PageLayout userLink={userLink} />;\n}\n\n// Agora temos:\n<Page user={user} avatarSize={avatarSize} />\n// ... que renderiza ...\n<PageLayout userLink={...} />\n// ... que renderiza ...\n<NavigationBar userLink={...} />\n// ... que renderiza ...\n{props.userLink}Com esta mudança, apenas o componente Page do topo precisa saber sobre os componentes Link e Avatar e das props user e avatarSize.
Esta inversão de controle pode fazer seu código mais limpo em vários casos, reduzindo a quantidade de props que você precisa passar através da sua aplicação e dando mais controle para os componentes raíz. No entanto, esta não é a melhor escolha em todos casos. Mover mais complexibilidade para o topo da árvore, faz com que estes componentes fiquem mais complicados e forçando os componentes dos níveis mais abaixo ficarem mais flexíveis do que você gostaria.
\nVocê não está limitado a um único filho por componente, Você pode passar vários componentes filhos ou até mesmo ter vários slots de componentes filhos como documentado aqui:
\nfunction Page(props) {\n const user = props.user;\n const content = <Feed user={user} />;\n const topBar = (\n <NavigationBar>\n <Link href={user.permalink}>\n <Avatar user={user} size={props.avatarSize} />\n </Link>\n </NavigationBar>\n );\n return (\n <PageLayout\n topBar={topBar}\n content={content}\n />\n );\n}Este padrão é suficiente para vários casos onde você precisa separar um componente filho de seu pai imediato. Você pode ainda ir mais longe com render props se o filho precisa se comunicar com o pai antes de ser renderizado.
\nContudo, às vezes o mesmo dado precisa ser acessado por vários componentes na árvore e em diferentes níveis de aninhamento. Contexto (context) deixa você “transmitir” este dado e mudanças do mesmo para todos componentes abaixo. Exemplos comuns onde usar contexto pode ser mais simples que as alternativas incluem o gerenciamento de localização atual, tema, ou um dado em cache.
\nReact.createContext const MyContext = React.createContext(defaultValue);Cria um objeto Contexto (context). Quando o React renderiza um componente que assina este objeto Contexto (context), este vai ler o valor atual do Provider superior na árvore que estiver mais próximo.
O argumento defaultValue (valor padrão) é usado apenas quando o componente não corresponder com um Provider acima dele na árvore. Isso pode ser útil para testar componentes isolados sem envolve-los com outro componente. Observação: passando undefined como um valor de Provider não faz com que os componentes consumidores do Provider usem defaultValue.
Context.Provider <MyContext.Provider value={/* some value */}>Cada objeto Contexto (context) vem com um componente Provider que permite componentes consumidores a assinarem mudanças no contexto.
\nO componente Provider aceita uma prop value que pode ser passada para ser consumida por componentes que são descendentes deste Provider. Um Provider pode ser conectado a vários consumidores. Providers podem ser aninhados para substituir valores mais ao fundo da árvore.
Todos consumidores que são descendentes de um Provider serão renderizados novamente sempre que a prop value do Provider for alterada. A propagação do Provider aos seus descendentes (incluido .contextType e useContext), não está condicionada ao método shouldComponenteUpdate, logo, o consumidor é atualizado mesmo quando um componente antepassado ignora uma atualização.
Mudanças são determinadas comparando os valores novos com os anteriores usando o mesmo algoritimo de Object.is.
\n\nNota
\nA forma como as mudanças são determinadas, podem causar alguns problemas quando se atribui objetos como
\nvalue: veja Ressalvas
Class.contextType class MyClass extends React.Component {\n componentDidMount() {\n let value = this.context;\n /* faz um side-effect na montagem utilizando o valor de MyContext */\n }\n componentDidUpdate() {\n let value = this.context;\n /* ... */\n }\n componentWillUnmount() {\n let value = this.context;\n /* ... */\n }\n render() {\n let value = this.context;\n /* renderiza algo com base no valor de MyContext */\n }\n}\nMyClass.contextType = MyContext;A propriedade contextType pode ser atribuída a um objeto Contexto (Context) criado por React.createContext(). Isso permite você consumir o valor atual mais próximo deste tipo de contexto usando this.context. Você pode referencia-lo em qualquer momento nos métodos de ciclo-de-vida, incluindo a função render.
\n\nNota:
\nVocê pode assinar apenas um contexto usando esta API. Se você precisa ler mais de um contexto, veja Consumindo vários Contextos.
\nSe você está usando o recurso experimental public class fields syntax, você pode usar um campo estático da classe para inicializar o seu
\ncontextType.
class MyClass extends React.Component {\n static contextType = MyContext;\n render() {\n let value = this.context;\n /* renderiza algo baseado no valor */\n }\n}Context.Consumer <MyContext.Consumer>\n {value => /* renderiza algo baseado no valor do context */}\n</MyContext.Consumer>Um componente React que assina mudanças de contexto. Este permite você assinar a um contexto por um function component.
\nRequer uma function as a child. A função recebe o valor atual do contexto e retorna um nó React. O argumento value passado para a função será igual ao value da prop do Provider do contexto mais próximo acíma na árvore. Se não houver um Provider para este contexto acima, o argumento value será igual a defaultValue que foi passado ao criar o contexto com createContext().
\n\nNota
\nPara mais informações sobre o padrão “function as a child” veja, render props.
\n
Context.displayName O objeto Context aceita uma propriedade string displayName. React DevTools usa essa string para determinar o que exibir para o contexto.
Por exemplo, o seguinte componente aparecerá como MyDisplayName no DevTools:
\nconst MyContext = React.createContext(/* some value */);\nMyContext.displayName = 'MyDisplayName';\n<MyContext.Provider> // \"MyDisplayName.Provider\" in DevTools\n<MyContext.Consumer> // \"MyDisplayName.Consumer\" in DevToolsUm exemplo mais complexo com valores dinâmicos para o tema:
\ntheme-context.js\n
export const themes = {\n light: {\n foreground: '#000000',\n background: '#eeeeee',\n },\n dark: {\n foreground: '#ffffff',\n background: '#222222',\n },\n};\n\nexport const ThemeContext = React.createContext( themes.dark // default value);themed-button.js\n
import {ThemeContext} from './theme-context';\n\nclass ThemedButton extends React.Component {\n render() {\n let props = this.props;\n let theme = this.context; return (\n <button\n {...props}\n style={{backgroundColor: theme.background}}\n />\n );\n }\n}\nThemedButton.contextType = ThemeContext;\nexport default ThemedButton;app.js\n
import {ThemeContext, themes} from './theme-context';\nimport ThemedButton from './themed-button';\n\n// Um componente intermediário que usa componente ThemedButton\nfunction Toolbar(props) {\n return (\n <ThemedButton onClick={props.changeTheme}>\n Change Theme\n </ThemedButton>\n );\n}\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n theme: themes.light,\n };\n\n this.toggleTheme = () => {\n this.setState(state => ({\n theme:\n state.theme === themes.dark\n ? themes.light\n : themes.dark,\n }));\n };\n }\n\n render() {\n // O ThemedButton button dentro de ThemeProvider // usa o tema do estado enquanto os demais usam // o tema padrão dark return (\n <Page>\n <ThemeContext.Provider value={this.state.theme}> <Toolbar changeTheme={this.toggleTheme} /> </ThemeContext.Provider> <Section>\n <ThemedButton /> </Section>\n </Page>\n );\n }\n}\n\nReactDOM.render(<App />, document.root);Geralmente é necessário atualizar o contexto de um componente que está aninhado em algum lugar da árvore de componentes. Neste caso, você pode passar uma função para o contexto, permitindo assim que consumidores possam atualizar o contexto.
\ntheme-context.js\n
// Make sure the shape of the default value passed to\n// createContext matches the shape that the consumers expect!\nexport const ThemeContext = React.createContext({\n theme: themes.dark, toggleTheme: () => {},});theme-toggler-button.js\n
import {ThemeContext} from './theme-context';\n\nfunction ThemeTogglerButton() {\n // The Theme Toggler Button receives not only the theme // but also a toggleTheme function from the context return (\n <ThemeContext.Consumer>\n {({theme, toggleTheme}) => ( <button\n onClick={toggleTheme}\n style={{backgroundColor: theme.background}}>\n Toggle Theme\n </button>\n )}\n </ThemeContext.Consumer>\n );\n}\n\nexport default ThemeTogglerButton;app.js\n
import {ThemeContext, themes} from './theme-context';\nimport ThemeTogglerButton from './theme-toggler-button';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n\n this.toggleTheme = () => {\n this.setState(state => ({\n theme:\n state.theme === themes.dark\n ? themes.light\n : themes.dark,\n }));\n };\n\n // Estado também contém a função de atualização // Passando para o provedor de contexto this.state = {\n theme: themes.light,\n toggleTheme: this.toggleTheme, };\n }\n\n render() {\n // Todo o estado é passado para o provedor return (\n <ThemeContext.Provider value={this.state}> <Content />\n </ThemeContext.Provider>\n );\n }\n}\n\nfunction Content() {\n return (\n <div>\n <ThemeTogglerButton />\n </div>\n );\n}\n\nReactDOM.render(<App />, document.root);Para que o contexto possa continuar renderizando rapidamente, o React precisa manter cada consumidor de contexto separado em um nó da árvore.
\n// Theme context, default to light theme\nconst ThemeContext = React.createContext('light');\n\n// Signed-in user context\nconst UserContext = React.createContext({\n name: 'Guest',\n});\n\nclass App extends React.Component {\n render() {\n const {signedInUser, theme} = this.props;\n\n // Componente App fornece os valores inicias do context\n return (\n <ThemeContext.Provider value={theme}> <UserContext.Provider value={signedInUser}> <Layout />\n </UserContext.Provider> </ThemeContext.Provider> );\n }\n}\n\nfunction Layout() {\n return (\n <div>\n <Sidebar />\n <Content />\n </div>\n );\n}\n\n// Um componente pode consumir vários contexts.\nfunction Content() {\n return (\n <ThemeContext.Consumer> {theme => ( <UserContext.Consumer> {user => ( <ProfilePage user={user} theme={theme} /> )} </UserContext.Consumer> )} </ThemeContext.Consumer> );\n}Se dois ou mais valores de contexto são utilizados juntos com frequência, você pode considerar criar o seu próprio render prop.
\n\n\nNota
\nPara mais informações sobre render prop, veja render props.
\n
Contexto (context) usa referência de identidade para determinar quando renderizar novamente, por este motivo, existem alguns casos que podem desencadear renderizações não intencionais em consumidores quando algum componente que antecede um Provider é renderizados. Por exemplo, o código abaixo vai re-renderizar todos consumidores toda vez que o Provider re-renderizar porque um novo objeto é sempre criado para value:
class App extends React.Component {\n render() {\n return (\n <MyContext.Provider value={{something: 'something'}}> <Toolbar />\n </MyContext.Provider>\n );\n }\n}Para contornar isso, mova a prop value para o state do nível antecessor.
class App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: {something: 'something'}, };\n }\n\n render() {\n return (\n <Provider value={this.state.value}> <Toolbar />\n </Provider>\n );\n }\n}\n","frontmatter":{"title":"Context","next":null,"prev":null},"fields":{"path":"content/docs/context.md","slug":"docs/context.html"}}},"pageContext":{"slug":"docs/context.html"}},"staticQueryHashes":[]}Nota
\nVersões anteriores do React foram disponibilizadas com uma versão experimental do context API. Esta versão antiga da API será suportada em todas versões 16.x lançadas mas, aplicações utilizando esta API, devem migrar para a nova versão. Leia aqui em API Legada.
\n