e Fala jovem Thiago Matos aqui Nesta aula a gente vai conhecer as fases do ciclo de vida do componente viu DS que são divididas em quatro criação a montagem a atualização EA desmontagem vem comigo cara isso daqui é de suma importância para você detonar envio de essa então para tudo que tá fazendo Tá certo e foca aqui na aula porque eu preciso da sua atenção sem por cento Beleza então seguinte como eu falei a gente tem a fase de criação criação montagem atualização e desmontagem desvantagens em cada fase dessa aqui olha só que acontece criação
já vou dizendo o que é que você deve fazer deve não deve fazer nessa fase beleza criação é aqui onde você vai é preparar o seu componente acerta o até colocar aqui para dentro para o sentado preparar o componente componente Ou seja você pode fazer aqui uma Jacques tá certo é inicializar algumas variáveis para aves tá certo mas aqui cara você não tem acesso ao Dom Tá certo não tem acesso ao Dom acerta o acesso ao template Vou colocar aqui até template para não confundir mas eu vou botar um entre as Beleza você não tem
acesso ao Dom já tirar esses erros aqui Isso me incomoda pronto cara eu seguinte a fase de montagem é quando você precisa inicializar uma libra externa beleza e essa língua externa precisa geralmente né geralmente precisa de acesso ao template o dó Tá certo então aqui você tem tem acesso ao tempo em que o Don Beleza então seja se você precisar interagir inicializar uma lida externa ou é deixa só isso aqui então se você precisa interagir com o templante você vai utilizar a fase de montagem beleza porque o vdsl tá criando ainda componente e depois a
fase de montagem Ele vai montar realmente o componente colocar o HTML lá no lugar certo e essa hora onde você tem essa beleza atualização aqui é mais para de blog Tá certo não utiliza esse daqui provavelmente você nunca vai utilizar isso aqui mas atualização mais para de bang é o seja tudo o que acontece no verde é se ele passa por um processo de rapidez Tá certo isso aqui eu vou mostrar também e desmontagem cara é aonde você vai fazer o quê vai é desmontar o seu componente e você vai é a utilizar essa fase
para remover tudo que você é criou no componente que vai consumir memória Ou seja você vai remover tudo o que for necessário cessário é para liberar memória o que é que acontece aqui na montagem você e nesse inicializou uma libra externa né vamos supor que foi uma libra de data ou sei lá o que você colocou nyu New leaders é você está se ou uma biblioteca vou mostrar tudo isso daqui e aqui na desmontagem você tem que matar ela certo você vai de coloca aqui ó livro destrói normalmente a gente utiliza é o destrói né
dentro da biblioteca mas pode ser o remo vi pode ser Clear enfim é dependem da livre que você esteja utilizando Mas normalmente né Por convenção a gente utiliza a destrói E aí você vai destruir ali e depois destruir o componente né Depois desmontar o componente Então essas fases cara é tem uns roncos que a gente chama para poder você interagir com essas fases certo então aqui vão ser os russos a gente vai trabalhar agora com os looks que é o Hulk é o cliente tá certo é um rolo antes do component ser montado o cliente
ou seja o componente foi montado foi criado na verdade é aqui antes do component ser criado tá certo aqui o componente foi criado e aqui vai ser bi formam-se ou seja um tiro componentes e montado Mouse ou seja o componente foi montado e aqui vai ser before a mal só seja antes dele desmontar e aqui vai ser o mal 37 E aí Tiago a fase de atualização vou falar já já Ah não se preocupe Então vou colocar aqui ó console. Logo vou colocar o grifo clientes Tá certo só para gente analisar e é Opa você
é demais aqui vai ser clientes aqui vai ser before a manta aqui vai ser mal testes e aqui vai ser de forma e aqui vai ser a morte então faça isso aí está certo e ele já imprimiu aqui ó todos os looks sexo e deixa Apareça aqui para impedir que o before a desmontagem da gente não está desmontando a gente vai ver se já então ele imprimir aqui ó bem forte mil inscritos be full motion Emotion Beleza então pra gente fazer um teste legal olha só na fase de criação você vai preparar o componente né
eu vou colocar aqui Leme novamente Johnson não olha só que interessante Então aqui no before clientes eu vou tentar imprimir né a Disney esse cara aqui e você vai ver que eu eu não tenho acesso se eu não me engano aqui também eu vou colocar disse né Aqui também é aqui também vamos ver o que acontece salvei olha só a Ele tem ele não tem acesso como eu falei ele foi clientes tá vendo ele não tem acesso ainda ao estado do componente então você não pode interagir com um componente aqui beleza o cliente esse para
frente Aí você já tem acesso ao estado do componente O que é legal aí vamos testar agora o dom aqui eu vou colocar a galera para ficar fácil né estado do componente não só estado para facilitar a certo estado é isso aqui é uma aula bem bem de teste e prática o estado Beleza então tava aqui de novo show de bola não é fácil e aí eu tenho acesso ao estado aí eu vou também testar o dom e galera aqui no vídeo é essa a gente tem esse cara aqui ó é o dólar é uma
o atributo especial aqui do componente que é o Ruth né que é esse cara daqui eu vou colocar aqui ó é bem e vou colocar cara aqui é louco o router tá beleza a gente é elemento aqui então ué Ele vai puxar esse elemento raiz aqui do componente até então o que é que vai acontecer é que vai acontecer E aí vai ser massa esse teste aqui olha só o grifo clientes tá vendo eu não tenho acesso ao estado e não tenho acesso ao Dom clientes eu tenho acesso ao estado mas também ainda não tenho
acessar o dom como eu falei aí eu vou para a fase de montagem eu já tenho acesso ao ao ao estádio mas ainda não tenho acesso ao Dom tá certo aí no Malta ele na fase de criação que a fase de criação é antes e depois né então aí eu tenho acesso ao estado também tenho acesso ao Dom aí se eu abrir aqui ó exatamente o meu template Beleza então já vai uma dica aí já assunto novo né dólar é o para você pegar o elemento raiz do componente muito bacana essa daqui beleza e agora
para gente testar esse before o mouse e ou mantas é que eu vou fazer a gente já criado um componente de reta né vou puxar esse componente aqui para dentro de novo certo de renda veja que é a minha ideia Já importou o cara aqui tá certo automaticamente e também já declarou ele aqui lembre-se que a gente tem importância e declarar o componente aqui o seu salvar Eu tenho um componente aqui queda agora nesse componente regra eu vou lá e vou colocar os dois rolos que faltaram né e a malte e malte show de bola
olha o que é que vai acontecer eu Por enquanto vou comentar esses caras todos aqui para para não sujar o console Olha lá before a maltes e maltz acho que eu e agora sim é porque ele tava no hot-reload aí Ele ativa lá o de forma vou colocar aqui agora achou renda mesma coisa que a gente tinha feito lá no início Tá certo vou colocar uma variável aqui show ela aos quatro e vou colocar né até uma coisa interessante aqui para gente testar agora eu vou colocar o botão né é que é um tongo do
renda Google assim eu me lembro mas aqui é mostrar esconder ativar e desativar renda ativar e desativar ela faz é só para gente testar aqui galera vou colocar um ação beleza e olha que eu vou fazer na estação lembre-se que a gente é Tiago perdoar vou pegar essa ação aqui colocar no método é de setra ou criar um método aqui de show Reda e assim vai beleza isso é muito bom O componente organizado porém às vezes a gente que é só trocar o valor de uma variável daí se a gente coloca aqui é presente activates
redor a gente poderia fazer isso tá e de ativar reta aí aqui eu ia ser diz show era faux e etc beleza Ou a gente poderia colocar o Google era E aí inverter os valores Tá certo se tava ativado vai desativar você tava desativado vai ativar enfim você pode fazer isso e eu recomendo para deixar o seu componente mais organizado Mas você também pode colocar já direto aqui ó aos ou fazer o tolo não é o valor novo dele é o valor investido atual é cê pode fazer esse direto então vou deixar aqui só para
você saber que você pode fazer uma lógica simples aqui direto perfeito Então a gente vai desativar o renda e novamente aqui eu vou desativar agora o renda ou ele ativou os cookies lá tá vendo porque agora eu destruí o componente eu desmontei ele agora vou montar o componente né Aí ele vai passar pelo processo de criação como a gente já viu e na hora de desmontar ele vai passar aqui pelo processo de desmontagem e é obviamente aqui galera a gente tem acesso tudo né É do componente e Aqui é onde a gente vai destruir e
as nossas vidas que a gente em ou qualquer coisa que você precisa até ventos tá vendo eventos nesta nos acidentes nesta nas a gente vai destruir tudo aqui é feito então é deixa eu ver aqui o que a gente Faltou faltou update né eu tô update update é fácil a gente é testar deixa eu colocar aqui esse esse aqui nesse Tá certo before update o e rapidez se aqui é muito fácil até está eu vou colocar aqui também o console. Logo de forma e dentes e aprendem então tudo que aconteceu no componente ele vai disparar
esses dois looks né então vou colocar nome aqui vou colocar um e PuTTy e colocar we V Model o leque deixa eu ver se ele vai ativar o mesmo isso aqui o terçol de leite tá vendo porque quando eu deleto isso daqui eu tô mexendo numa variável tô mexendo no estado do componente aí eu vou direto tem que passar pelo processo de atualização do componente e atualizar o Don todo o processo dele é de reatividade né que encadeia Cascata E aí o verde é você passa por esse dos processos mais de novo esse cara aqui
basicamente se não vão utilizar mais Para de Bobagem por exemplo a Tô operando aqui ele é variável e não está saindo não não tá sendo reativo aí você pega essa variável joga aqui tá certo desdém a Disney e desdém e ver se ela realmente está sendo atualizada Vamos lá ver Joice nou ó tá sendo atualizada perform this update na verdade é esse dente daqui é mais relacionado ao Dom Tá certo para você ver que a Maria Alice alterou aqui então você tem certeza que tá funcionando é você consegue divulgar mas essas caras aqui eu pessoalmente
que tem muita experiência de essa mais de já tem 7 anos né Oi nunca utilizei de verdade reprodução aqui eu não tenho necessidade nenhuma perfeito então é para a gente fechar com chave de ouro deixa eu ver o que é que eu faço aqui o before é o mal tá certo eu vou colocar dentro do Adam e colocar dentro do reto aqui ó maltês Eu já falei a gente pode criar eventos aqui lindo ou homens com to Advance and eventually cima aí eu vou colocar aqui Versalhes Versalhes e vou chamar uma função plus size aí
essa função a gente vai lá para o método métodos e a função recentes Oi e aí vou imprimir o evento deve ter deixa eu ver se é isso mesmo fim de cabeça tive essa ideia agora disse Versalhes né Tiago é a metro tá aqui dentro e ele vai ter que executar quando eu alterar aí o tamanho da janela vamos ver vamos ver vamos ver deixa eu comentar galera aqui no Apps no acidentes porque senão vai sujar demais Nosso console deixa eu ver aqui agora e não disparou já parou Claro aqui não é documento é o
Windows eu acho de cabeça aí a gente se lascar Mas vamos lá agora sim algum do que eu tô é alterando né o valor da janela e não do documento então assim aqui a gente criou Aventura essa galera tá vendo tá puxando o evento aqui toda hora imprimindo em primeiro primeiro vamos pouco você fez uma lógica aqui toda vez que é o cara redimensionar a tela ou se altera o valor de uma dívida ou sei lá o quê aí quando você tiver no de forma mãos você vai ter que fazer esse cara aqui ó o
remo aventurasse lá porque senão o evento vai ficar lá para sempre e aí você vai e volta isso aqui dá para até a gente mostrar é com mais precisão quando a gente começar a criar rotas você vai ver que a gente sai de uma rota entre em outra e o evento ainda tá lá na verdade ele vai adicionar o evento é lembre-se sempre de matar o evento que na hora de destruir o componente Então é isso é um assunto muito denso mas é um assunto muito importante do ciclo de vida do componente vds mas se
você ainda tem dúvida cara já deixa aqui em baixo agora não deixa para depois acerta ou vai lá no Instagram e manda uma mensagem no privado de outro modo eu te vejo aí na próxima vídeo aula fui eu [Música] E aí
