StimulusJS: ciclo de vida
O curso acompanha um controller do Stimulus pelos seus callbacks de ciclo de vida, com exemplos tirados dos controllers de uma aplicação Rails. Ele trata do connect(), que roda quando um elemento correspondente aparece no DOM, e do disconnect(), que desfaz o que o connect() começou: uma instância do Chart.js, um timer pendente ou listeners no window. Mostra por que o initialize() roda uma vez por instância enquanto o connect() pode se repetir. Cobre também os callbacks de mudança de value e de target. A última aula junta tudo numa linha do tempo e propõe um desafio em Ruby.
O que você vai aprender
- ✓Quando o Stimulus chama o connect() e como proteger trabalho assíncrono que roda depois de um await
- ✓Como usar o disconnect() para desfazer o que o connect() criou, como gráficos e timers
- ✓Por que listeners ligados ao window precisam ser removidos no disconnect()
- ✓A diferença entre o initialize(), que roda uma vez por instância, e o connect(), que pode se repetir
- ✓Como os callbacks xxxValueChanged reagem a mudanças de value sem reconexão
- ✓Como o xxxTargetConnected e o xxxTargetDisconnected acompanham targets individuais num controller conectado
connect(): onde o trabalho real de um controller começa
Uma classe de controller do Stimulus existe assim que o arquivo carrega: todo método está definido, toda declaração static foi lida. Isso não quer dizer que o controller já esteja fazendo algo. O connect() é o método que o Stimulus chama quando um elemento com o identificador desse controller…
Ler a aula completa grátis →Currículo
7 aulasconnect(): onde o trabalho real de um controller começa
O connect() roda quando o Stimulus detecta o elemento do controller no DOM, e trabalho assíncrono depois dele precisa de proteção.
disconnect(): o espelho que desfaz connect()
O disconnect() desfaz o que o connect() começou, destruindo uma instância do Chart.js ou limpando o setTimeout do flash.
Por que disconnect() não é opcional
Listeners ligados ao window vivem mais que o elemento, então o controller de progresso de upload os remove no disconnect().
initialize(): uma vez por instância, ao contrário do connect()
O initialize() roda uma vez por instância, enquanto o connect() e o disconnect() se repetem quando o mesmo elemento é movido.
Callbacks de mudança de value: um tipo diferente de ciclo de vida
Os callbacks xxxValueChanged disparam quando um value muda, e o controller de gráficos reconstrói o gráfico sem reconexão.
Ciclo de vida em nível de target: um gancho mais fino
O xxxTargetConnected e o xxxTargetDisconnected disparam quando um target aparece ou some dentro de um controller já conectado.
Juntando tudo: a linha do tempo completa de um elemento
Acompanha um elemento de gráfico por todos os callbacks e propõe um desafio em Ruby que calcula a ordem deles.