Tutorial Reagir Parte 19: Métodos do Ciclo de Vida dos Componentes

Na parte atual da tradução do tutorial do React, você verá uma visão geral dos métodos do ciclo de vida dos componentes.



→ Parte 1: visão geral do curso, razões para a popularidade do React, ReactDOM e JSX
→ Parte 2: componentes funcionais
→ Parte 3: arquivos de componentes, estrutura do projeto
→ Parte 4: componentes pai e filho
→ Parte 5: início do trabalho em um aplicativo TODO, noções básicas de estilo
→ Parte 6: sobre alguns recursos do curso, JSX e JavaScript
→ Parte 7: estilos embutidos
→ Parte 8: trabalho contínuo na aplicação TODO, familiaridade com as propriedades dos componentes
→ Parte 9: propriedades do componente
→ Parte 10: Workshop sobre como trabalhar com propriedades e estilo de componentes
→ Parte 11: geração dinâmica de marcação e método de matrizes de mapas
→ Parte 12: workshop, terceira etapa do trabalho em uma aplicação TODO
→ Parte 13: componentes baseados em classe
→ Parte 14: workshop sobre componentes baseados em classe, status dos componentes
→ Parte 15: oficinas de saúde componentes
→ Parte 16: a quarta etapa do trabalho em um aplicativo TODO, manipulação de eventos
→ Parte 17: quinta etapa do trabalho em um aplicativo TODO, modificando o estado dos componentes
→ Parte 18: a sexta etapa do trabalho em um aplicativo TODO
→ Parte 19: métodos do ciclo de vida dos componentes
Parte 20: a primeira lição sobre renderização condicional
→ Parte 21: segunda lição e workshop sobre renderização condicional
→ Parte 22: sétima etapa do trabalho em um aplicativo TODO, baixando dados de fontes externas
→ Parte 23: primeira lição sobre como trabalhar com formulários
→ Parte 24: Segunda lição sobre formulários
→ Parte 25: Workshop sobre como trabalhar com formulários
→ Parte 26: arquitetura do aplicativo, padrão Container / Component
→ Parte 27: projeto do curso

Lição 34. Métodos do Ciclo de Vida dos Componentes, Parte 1

→ Original

Um dos recursos do desenvolvimento de aplicativos React é o fato de escrevermos um código JavaScript bastante simples que aciona os mecanismos internos do React e, assim, nos oferece grandes oportunidades para desenvolver interfaces de aplicativos e trabalhar com dados. Ao mesmo tempo, os componentes que usamos durante seu ciclo de vida passam por certos estágios. Freqüentemente, o que acontece com um componente em um aplicativo é comparado à vida de uma pessoa. As pessoas nascem, vivem, em sua vida acontecem alguns eventos significativos, após o que morrem. Os componentes do React nisso são semelhantes às pessoas, pois também "nascem", "vivem" e "morrem". Trabalhando com componentes, podemos reagir ao que acontece com eles, graças aos métodos de seu ciclo de vida que são chamados em momentos especiais de sua “vida”.

Recentemente, a equipe de desenvolvimento do React desatualizou três métodos de ciclo de vida de componentes. No entanto, consideraremos esses métodos, pois eles ainda podem ser usados ​​e como podem ser encontrados no código existente. Além disso, dois novos métodos de ciclo de vida dos componentes foram adicionados ao React, que discutiremos na próxima lição.

Consideraremos apenas os métodos mais importantes que são mais relevantes para aqueles que começaram a estudar o React. Ao continuar a dominar esta biblioteca, você poderá experimentar outros métodos.

Aqui está um bom material sobre os métodos de ciclo de vida dos componentes do React que eram relevantes antes do React 16.3. Aqui , em uma publicação do blog oficial do desenvolvedor do React, você pode descobrir as mudanças que ocorreram no React 16.3.

Agora, vamos começar a discussão sobre os métodos de ciclo de vida dos componentes do React que você encontrará com mais frequência.

Como sempre, usaremos o projeto de demonstração aqui. Nesse caso, começamos com um projeto padrão criado usando create- App.js -app, no arquivo App.js que contém o seguinte código:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Para começar, vamos dar uma olhada no método que você já usou com componentes baseados em classe. Este é o método render() .

Freqüentemente, ele não é mencionado ao falar sobre os métodos do ciclo de vida dos componentes. Eu acho que esse método, ao comparar um componente com uma pessoa, pode ser comparado ao vestir antes de sair. O objetivo deste método é determinar o que será exibido na tela, ou seja, como o componente será exibido. O método render() pode ser chamado várias vezes durante a vida de um componente. Portanto, quando o React determina que algo relacionado a um componente mudou, como um estado ou propriedades, ou seja, algo que pode afetar a aparência de um componente, o React pode chamar esse método. Isso pode ser comparado, se continuarmos a analogia com as pessoas, para que uma pessoa possa decidir trocar de roupa. Por exemplo, para, depois de um dia útil, se preparar para algum tipo de evento de feriado.

Agora, vejamos outro método de ciclo de vida do componentDidMount() - componentDidMount() . Este método é declarado, assim como qualquer outro método de componente baseado em classe, no corpo de uma classe de componente:

 componentDidMount() { } 

Esse método é chamado no momento do ciclo de vida do componente, que pode ser comparado com o "nascimento" desse componente. Este método é acionado uma vez depois que o componente é montado (inserido) na árvore DOM. Ao mesmo tempo, por exemplo, se após alterar alguns dados que afetam a aparência do componente, eles serão renderizados novamente, o método componentDidMount() não será chamado. Isso ocorre devido ao fato de que, ao executar essas operações, o componente não é removido da árvore DOM e, em seguida, incluído novamente na árvore.

O método componentDidMount() geralmente é usado para fazer chamadas para determinadas APIs nos casos em que o desenvolvedor precisa de dados de fontes externas. Suponha que o componente que estamos considerando aqui seja realmente chamado TodoList e seja um componente que forma uma lista de tarefas em um aplicativo Todo. O método componentDidMount() desse componente pode carregar materiais do banco de dados do servidor, necessários para a exibição correta da lista de tarefas pendentes armazenada no servidor. Como resultado, após a conclusão da instalação do componente, nós, no método componentDidMount() , podemos carregar os dados necessários para que o componente seja exibido corretamente na página. Também falaremos sobre o carregamento de dados necessários aos componentes, mas, por enquanto, você se lembra de que este é o caso de uso mais comum para componentDidMount() .

O próximo método de ciclo de vida do componente que discutimos é chamado componentWillReceiveProps() . Este método pode ser comparado ao que acontece quando alguém recebe um presente de alguém. Portanto, um componente pode receber propriedades de um componente pai. Cada vez que um componente obtém propriedades, esse método é chamado. Ao mesmo tempo, esse método é chamado toda vez que o componente pai passa as propriedades para o componente filho, e não apenas quando isso acontece pela primeira vez. Por exemplo, se o componente pai decide alterar as propriedades passadas para o componente filho, no método componentWillReceiveProps() , podemos, por exemplo, verificar se as novas propriedades diferem daquelas que já foram passadas para o componente. O fato é que, se as novas propriedades não diferem das antigas, isso significa que o recebimento delas não altera nada, o que significa que, depois de descobrir, não podemos fazer mais nada. Se as novas propriedades forem diferentes das antigas, podemos executar determinadas ações. Normalmente, esse método é declarado no corpo da classe de componentes da seguinte maneira:

 componentWillReceiveProps(nextProps) { } 

Aqui é geralmente usado, como o nome do parâmetro, nextProps , mas você pode nomear esse parâmetro como desejar. Para comparar alguma propriedade específica que já foi transferida para o componente com o que já foi passado anteriormente e decidir sobre outras ações, você pode usar esta construção:

 componentWillReceiveProps(nextProps) {   if (nextProps.whatever !== this.props.whatever) {       //   -    } } 

Geralmente esse método é usado dessa maneira.

No entanto, como já mencionado, após o lançamento do React 16.3, alguns métodos do ciclo de vida do componente foram descontinuados e componentWillReceiveProps() é um desses métodos.

Até a Reação 17, esses métodos herdados ainda podem ser usados, embora seja melhor não. Se você não pode ficar sem o método em questão, precisará chamá-lo de UNSAFE_componentWillReceiveProps() . Após a reação 17, o nome do método componentWillReceiveProps() não significará nada de especial.

É útil conhecer esse método para entender o código desatualizado, mas ele não será usado no desenvolvimento de aplicativos React modernos.

Outro método interessante do ciclo de vida do componente é chamado shouldComponentUpdate() . Ele, se continuarmos a comparar o componente com uma pessoa, lembra o momento em que uma pessoa está pensando se precisa trocar de roupa ou não. Sob condições normais, se o React não tiver certeza absoluta da possibilidade de renderizar novamente um componente, ele será renderizado apenas por precaução. Não importa se isso é necessário, de acordo com a lógica do aplicativo ou não.

Isso faz com que o React renderize novamente os componentes, mesmo quando nada relacionado ao componente é alterado. Isso pode atrasar o aplicativo, porque, por esse princípio, o React processa todos os componentes que compõem o aplicativo. O método shouldComponentUpdate() permite que o desenvolvedor otimize o aplicativo. Aqui você pode implementar alguma lógica que ajuda a descobrir a necessidade de atualizar o componente. Este método é geralmente declarado assim:

 shouldComponentUpdate(nextProps, nextState) {   //  true        //  false    } 

Além disso, a partir desse método, se o componente precisar ser renderizado novamente, levando em consideração novas propriedades e estado, você precisará retornar true . Caso contrário, false deve ser retornado dele. Na verdade, retornar false desse método leva ao fato de que o componente não é atualizado e o aplicativo é executado mais rapidamente, mas, ao fazer isso, você precisa ter certeza de que o componente não precisa realmente ser renderizado novamente. Se o componente precisar ser atualizado e esse método retornar false , isso levará a erros difíceis de lidar.

Outro método de ciclo de vida do componente sobre o qual falaremos é chamado componentWillUnmount() . Este método marca o fim da "vida" do componente - o momento em que é removido da árvore DOM e desaparece da tela.

Esse método é usado principalmente para liberar recursos ocupados por um componente e colocar as coisas em ordem antes de excluí-lo. Por exemplo, se o método componentDidMount() foi configurado com algo como um ouvinte de evento, devido ao qual, quando o usuário rola a página, algum código é executado, é no componentWillUnmount() você pode excluir esse ouvinte de evento. De fato, esse método possui muitos aplicativos que visam remover do aplicativo tudo o que se torna desnecessário após o desaparecimento do componente.

Aqui está o código completo do nosso componente App , no qual os métodos do ciclo de vida são adicionados:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     componentDidMount() {       //  ,        }     componentWillReceiveProps(nextProps) {       if (nextProps.whatever !== this.props.whatever) {           //   -        }   }     shouldComponentUpdate(nextProps, nextState) {       //  true            //  false      }     componentWillUnmount() {       //            // ( -   )   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Isso conclui esta lição, embora se deva observar que os métodos de ciclo de vida dos componentes do React não estão limitados aos que analisamos hoje.

Lição 35. Métodos do Ciclo de Vida dos Componentes, Parte 2

→ Original

Como já mencionado na lição anterior, quando o React 16.3 foi lançado, foi relatado que os três métodos de ciclo de vida dos componentes estavam desatualizados. Esses métodos são componentWillMount() , componentWillReceiveProps() e componentWillUpdate() . Dois novos métodos também foram relatados. Este é o método estático getDerivedStateFromProps() e o método getSnapshotBeforeUpdate() . Não se pode dizer que esses métodos desempenharão um papel importante nas aulas futuras deste curso, mas, apesar disso, vamos conhecê-los aqui.

Vamos experimentar o mesmo projeto que usamos na última vez.

Aqui está a getDerivedStateFromProps() da declaração do método getDerivedStateFromProps() :

 static getDerivedStateFromProps(props, state) { } 

Observe a static antes do nome do método. Ele, com base nas propriedades aceitas por ele, deve retornar um estado atualizado. É usado nesses casos em que um determinado componente deve aceitar as propriedades recebidas do componente pai e configurar seu estado com base nessas propriedades. Detalhes sobre esse método podem ser encontrados aqui . Este material, publicado no blog React, diz que o uso desse método está longe de ser justificado em todas as situações em que parece útil. Seu uso inadequado pode levar a vários erros, a uma queda no desempenho do aplicativo, portanto, use-o com cuidado. Você não deve tentar resolver problemas com sua ajuda, cuja solução não se destina. Aqui está a documentação para este método.

Agora vamos falar sobre o método getSnapshotBeforeUpdate() . Aqui está como é a declaração dele no corpo da classe:

 getSnapshotBeforeUpdate() { } 

Ele pode ser considerado como um método de ciclo de vida que permite criar algo como um backup do que está no componente antes de atualizá-lo. Assemelha-se a uma captura instantânea do estado de um aplicativo. Note-se que os desenvolvedores do React dizem que o escopo deste método é limitado. Aqui está a documentação para isso.

Sumário

Hoje falamos sobre métodos de ciclo de vida de componentes. Quando você avança no desenvolvimento de aplicativos React, eles certamente serão úteis. Nas outras classes deste curso, encontraremos esses métodos, em particular com componentDidMount() . Da próxima vez, falaremos sobre renderização condicional.

Caros leitores! Se você estiver desenvolvendo aplicativos React profissionalmente, conte-nos como você usa os métodos do ciclo de vida dos componentes.