{"componentChunkName":"component---src-templates-docs-js","path":"/docs/state-and-lifecycle.html","result":{"data":{"markdownRemark":{"html":"

Esta página apresenta o conceito de estado e ciclo de vida em um componente React. Você pode encontrar uma referência detalhada da API de componente aqui.

\n

Considere o exemplo do relógio de uma das seções anteriores. Em Elementos de Renderização, nós aprendemos apenas uma maneira de atualizar a UI. Nós chamamos ReactDOM.render() para mudar a saída renderizada.

\n
function tick() {\n  const element = (\n    <div>\n      <h1>Hello, world!</h1>\n      <h2>It is {new Date().toLocaleTimeString()}.</h2>\n    </div>\n  );\n  ReactDOM.render(    element,    document.getElementById('root')  );}\n\nsetInterval(tick, 1000);
\n

Experimente no CodePen

\n

Esta seção, aprenderemos como tornar o componente Clock verdadeiramente reutilizável e encapsulado. Ele irá configurar seu próprio temporizador e se atualizar a cada segundo.

\n

Podemos começar encapsulando como o relógio parece:

\n
function Clock(props) {\n  return (\n    <div>      <h1>Hello, world!</h1>      <h2>It is {props.date.toLocaleTimeString()}.</h2>    </div>  );\n}\n\nfunction tick() {\n  ReactDOM.render(\n    <Clock date={new Date()} />,    document.getElementById('root')\n  );\n}\n\nsetInterval(tick, 1000);
\n

Experimente no CodePen

\n

No entanto, falta um requisito crucial: o fato de que o Clock configura um temporizador e atualiza a UI a cada segundo deve ser um detalhe de implementação do Clock.

\n

Idealmente, queremos escrever isto uma vez e ter o Clock se atualizando:

\n
ReactDOM.render(\n  <Clock />,  document.getElementById('root')\n);
\n

Para implementá-lo, precisamos adicionar um “state” ao componente Clock.

\n

O state do componente é similar as props, mas é privado e totalmente controlado pelo componente.

\n

Convertendo uma Função para uma Classe

\n

Você pode converter um componente de função como Clock em uma classe em cinco etapas:

\n
    \n
  1. Criar uma classe ES6, com o mesmo nome, estendendo React.component.
    2. \n
  2. Adicionar um único método vazio chamado render().
    3. \n
  3. Mova o corpo da função para o método render().
    4. \n
  4. Substitua props por this.props no corpo de render().
    5. \n
  5. Exclua a declaração da função vazia restante.
    6. \n
\n
class Clock extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>Hello, world!</h1>\n        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>\n      </div>\n    );\n  }\n}
\n

Experimente no CodePen

\n

Clock agora é definido como uma classe em vez de uma função.

\n

O método render será chamado toda vez que uma atualização acontecer, mas enquanto renderizarmos <Clock> no mesmo nó DOM, apenas uma única instância da classe Clock será usada. Isso nos permite usar recursos adicionais, como o estado local e os métodos de ciclo de vida.

\n

Adicionando Estado Local a uma Classe

\n

Vamos mover a date da props para o state em três passos:

\n
    \n
  1. Substitua this.props.date por this.state.date no método render():
    2. \n
\n
class Clock extends React.Component {\n  render() {\n    return (\n      <div>\n        <h1>Hello, world!</h1>\n        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>      </div>\n    );\n  }\n}
\n
    \n
  1. Adicione um construtor na classe que atribui a data inicial no this.state:
    2. \n
\n
class Clock extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {date: new Date()};  }\n\n  render() {\n    return (\n      <div>\n        <h1>Hello, world!</h1>\n        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>\n      </div>\n    );\n  }\n}
\n

Note como nós passamos props para o construtor:

\n
  constructor(props) {\n    super(props);    this.state = {date: new Date()};\n  }
\n

Componentes de classes devem sempre chamar o construtor com props.

\n
    \n
  1. Remova a props date do elemento <Clock />:
    2. \n
\n
ReactDOM.render(\n  <Clock />,  document.getElementById('root')\n);
\n

Mais tarde, adicionaremos o código do temporizador de volta ao próprio componente.

\n

O Resultado se parece com:

\n
class Clock extends React.Component {\n  constructor(props) {    super(props);    this.state = {date: new Date()};  }\n  render() {\n    return (\n      <div>\n        <h1>Hello, world!</h1>\n        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>      </div>\n    );\n  }\n}\n\nReactDOM.render(\n  <Clock />,  document.getElementById('root')\n);
\n

Experimente no CodePen

\n

Em seguida, faremos a configuração do próprio temporizador e atualizaremos a cada segundo.

\n

Adicionando Métodos de Ciclo de Vida a Classe

\n

Em aplicações com muitos componentes, é muito importante limpar os recursos utilizados pelos componentes quando eles são destruídos.

\n

Queremos configurar um temporizador sempre que o Clock é renderizado para o DOM pela primeira vez. Isso é chamado de “mounting” no React.

\n

Nós também queremos limpar o temporizador sempre que o DOM produzido pelo Clock for removido. Isso é chamado de “unmounting” no React.

\n

Podemos declarar métodos especiais no componente de classe para executar algum código quando um componente é montado e desmontado:

\n
class Clock extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {date: new Date()};\n  }\n\n  componentDidMount() {  }\n  componentWillUnmount() {  }\n  render() {\n    return (\n      <div>\n        <h1>Hello, world!</h1>\n        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>\n      </div>\n    );\n  }\n}
\n

Estes métodos são chamados de “métodos de ciclo de vida”.

\n

O método componentDidMount() é executado depois que a saída do componente é renderizada no DOM. Este é um bom lugar para configurar um temporizador:

\n
  componentDidMount() {\n    this.timerID = setInterval(      () => this.tick(),      1000    );  }
\n

Note como nós salvamos o ID do temporizador em this (this.timerID).

\n

Enquanto this.props é configurado pelo próprio React e this.state tem um significado especial, você está livre para adicionar campos adicionais à classe manualmente se precisar armazenar algo que não participe do fluxo de dados (como um ID do temporizador)

\n

Vamos derrubar o temporizador no método do ciclo de vida componentWillUnmount():

\n
  componentWillUnmount() {\n    clearInterval(this.timerID);  }
\n

Finalmente, vamos implementar um método chamado tick() que o componente Clock executará a cada segundo.

\n

Ele usará this.setState() para agendar atualizações para o estado local do componente:

\n
class Clock extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {date: new Date()};\n  }\n\n  componentDidMount() {\n    this.timerID = setInterval(\n      () => this.tick(),\n      1000\n    );\n  }\n\n  componentWillUnmount() {\n    clearInterval(this.timerID);\n  }\n\n  tick() {    this.setState({      date: new Date()    });  }\n  render() {\n    return (\n      <div>\n        <h1>Hello, world!</h1>\n        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>\n      </div>\n    );\n  }\n}\n\nReactDOM.render(\n  <Clock />,\n  document.getElementById('root')\n);
\n

Experimente no CodePen

\n

Agora o relógio bate a cada segundo.

\n

Vamos recapitular rapidamente o que está acontencendo e a ordem na qual os métodos são chamados:

\n
    \n
  1. Quando <Clock /> é passado para ReactDOM.render(), o React chama o construtor do componente Clock. Como Clock precisa exibir a hora atual, ele inicializa this.state com um objeto incluindo a hora atual. Mais tarde, atualizaremos este state.
    2. \n
  2. React chama então o método render() do componente Clock. É assim que o React aprende o que deve ser exibido na tela. React em seguida, atualiza o DOM para coincidir com a saída de renderização do Clock.
    3. \n
  3. Quando a saída do Clock é inserida no DOM, o React chama o método do ciclo de vida componentDidMount(). Dentro dele, o componente Clock pede ao navegador para configurar um temporizador para chamar o método tick() do componente uma vez por segundo.
    4. \n
  4. A cada segundo o navegador chama o método tick(). Dentro dele, o componente Clock agenda uma atualização de UI chamando setState() com um objeto contendo a hora atual. Graças à chamada setState(), o método render() será diferente e, portanto, a saída de renderização incluirá a hora atualizada. React atualiza o DOM de acordo.
    5. \n
  5. Se o componente Clock for removido do DOM, o React chama o método do ciclo de vida componentWillUnmount() para que o temporizador seja interrompido.
    6. \n
\n

Usando o State Corretamente

\n

Existem três coisas que você deve saber sobre setState().

\n

Não Modifique o State Diretamente

\n

Por exemplo, isso não renderizará novamente o componente:

\n
// Errado\nthis.state.comment = 'Hello';
\n

Em vez disso, use setState():

\n
// Correto\nthis.setState({comment: 'Hello'});
\n

O único lugar onde você pode atribuir this.state é o construtor.

\n

Atualizações de State Podem Ser Assíncronas

\n

O React pode agrupar várias chamadas setState() em uma única atualização para desempenho.

\n

Como this.props e this.state podem ser atualizados de forma assíncrona, você não deve confiar em seus valores para calcular o próximo state.

\n

Por exemplo, esse código pode falhar ao atualizar o contador:

\n
// Errado\nthis.setState({\n  counter: this.state.counter + this.props.increment,\n});
\n

Para consertá-lo, use uma segunda forma de setState() que aceite uma função ao invés de um objeto. Essa função receberá o state anterior como o primeiro argumento e as props no momento em que a atualização for aplicada como o segundo argumento:

\n
// Correto\nthis.setState((state, props) => ({\n  counter: state.counter + props.increment\n}));
\n

Usamos uma arrow function acima, mas também funciona com funções regulares:

\n
// Correto\nthis.setState(function(state, props) {\n  return {\n    counter: state.counter + props.increment\n  };\n});
\n

Atualizações de State São Mescladas

\n

Quando você chama setState(), o React mescla o objeto que você fornece ao state atual.

\n

Por exemplo: seu state pode conter várias variáveis independentes:

\n
  constructor(props) {\n    super(props);\n    this.state = {\n      posts: [],      comments: []    };\n  }
\n

Então você pode atualizá-los independentemente com chamadas separadas do setState():

\n
  componentDidMount() {\n    fetchPosts().then(response => {\n      this.setState({\n        posts: response.posts      });\n    });\n\n    fetchComments().then(response => {\n      this.setState({\n        comments: response.comments      });\n    });\n  }
\n

O merge é superficial, então this.setState({comments}) deixa this.state.posts intacto, mas substitui completamente this.state.comments

\n

Os Dados Fluem para Baixo

\n

Nem componentes pai ou filho podem saber se um determinado componente é stateful ou stateless, e não devem se importar se ele é definido por uma função ou classe.

\n

É por isso que o state é geralmente chamado de local ou encapsulado. Não é acessível a nenhum componente que não seja o que o possui e o define.

\n

Um componente pode escolher passar seu state como props para seus componentes filhos:

\n
<FormattedDate date={this.state.date} />
\n

O componente FormattedDate receberia o date em seus objetos e não saberia se ele veio do state de Clock, das props do Clock, ou se foi digitado manualmente:

\n
function FormattedDate(props) {\n  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;\n}
\n

Experimente no CodePen

\n

Isso é comumente chamado de fluxo de dados “top-down” ou “unidirecional”. Qualquer state é sempre de propriedade de algum componente específico, e qualquer dado ou interface do usuário derivado desse state só pode afetar os componentes “abaixo” deles na árvore.

\n

Se você imaginar uma árvore de componentes como uma cascata de props, o state de cada componente é como uma fonte de água adicional que o une em um ponto arbitrário, mas também flui para baixo.

\n

Para mostrar que todos os componentes estão isolados, podemos criar um componente App que renderiza três <Clock>s:

\n
function App() {\n  return (\n    <div>\n      <Clock />      <Clock />      <Clock />    </div>\n  );\n}\n\nReactDOM.render(\n  <App />,\n  document.getElementById('root')\n);
\n

Experimente no CodePen

\n

Cada Clock configura seu próprio temporizador e atualiza de forma independente.

\n

Nos apps React, se um componente é stateful ou stateless é considerado um detalhe de implementação do componente que pode mudar com o tempo. Você pode usar componentes sem state dentro de componentes com state e vice-versa.

","frontmatter":{"title":"Estado e Ciclo de Vida","next":"handling-events.html","prev":"components-and-props.html"},"fields":{"path":"content/docs/state-and-lifecycle.md","slug":"docs/state-and-lifecycle.html"}}},"pageContext":{"slug":"docs/state-and-lifecycle.html"}},"staticQueryHashes":[]}