Comportamento reativo

Imagine que você tenha uma página web que lista animais que está em sua base de dados e você deseja criar uma funcionalidade onde o usuário pode escolher listar somentes cães, ou gatos e nesse instante você gostaria que a lista de animais seja alterada, respeitando a opção do usuário, mas que não deseja que a página seja completamente carregada novamente, mas somente a lista em si seja alterada dinamicamente.

O que está descrito acima é um comportamento "dinâmico" de uma página, mas não necessariamente "reativo".

A distinção entre comportamento dinâmico e reativo precisa inicialmente que tenhamos o seguinte em mente:

• Todo comportamento reativo é dinâmico
• Nem todo comportamento dinâmico é reativo

Dinâmico significa somente que a página realizará operações que alteram os seus elementos usando funções que rodam no cliente. Isso é o suficiente para se fazer qualquer tipo de página interativa.

O comportamento reativo significa que o DOM e os elementos devem ser exibidos reagindo automaticamente aos dados presentes em variáveis do Javascript. Por exemplo, você altera um Array de animais e deve existir funcionalidades que a lista de animais automaticamente mude pare refletir esse novo array, sem você precisar manualmente remover os elementos da lista HTML e adicionar novos.

O comportamento reativo real é complicado (porém possível) de ser implementado em Javascript puro pois a linguagem não oferece reatividade de forma nativa, sendo necessária a criação de camadas extras para que isso seja possível.

Existem bibliotecas como o React, VueJS e Svelte que podem te ajudar e vamos conhecê-las melhor em aulas seguintes.