Reator

O reator no Inter, é um objecto, Map, Set ou Array que quando os seus dados forem alterados, o Inter reagirá às alterações feitas, refletindo os novos dados na Interface.

<div id="exemplo"> <p> { relogio } </p> </div> <script> const ref = Ref({ in: "exemplo", data: { relogio: "0:0:0" } }) setInterval(() => { const date = new Date(); ref.relogio = date.toLocaleTimeString() }, 1000) </script>

Se você estiver a ler essa matéria, você provavelmente conhece conceitos do Inter, como a referência, a função Ref retorna um objecto com as mesmas propriedades que o objecto data, e nós devemos usar o referido objecto para atualizar os valores da referências, e na função setInterval, nós atualizamos o valor da referência que existe no exemplo, e o Inter vai reagir à essa alteração atualizando a interface, então, isso significa que o objecto retornada pela função Ref é um reator, reator das referências.

<div class="demo"> <div id="lista-de-todo"></div> </div> <script> const todos = [ { texto: "Cozinhar", feito: false }, { texto: "Estudar", feito: true }, { texto: "Passear", feito: false }, { texto: "Ouvir música", feito: false } ] const reatorDaLista = renderList({ in: "lista-de-todo", each: todos, do(todo, i){ const styles = { textDecoration: todo.feito ? "line-through" : null }; const done = { onclick: () => todo.feito = true }; const Delete = { onclick: () => this.splice(i, 1) }; return template({ tag: "div", children: [{ tag: "h5", text: todo.texto, styles: styles },{ tag: "button", text: "Completar", renderIf: !todo.feito, events: done },{ tag: "button", text: "Deletar", renderIf: todo.feito, events: Delete }] }) } }) </script>

No exemplo anterior, a função renderList retorna uma Array reativa(reator), e nós usamos essa Array para modificar a lista, se por exemplo deletarmos um item da Array(em qualquer posição), o elemento na interface que representa o item também será deletado, o primeiro item da Array, é representado pelo primeiro elemento da lista, o segundo item da Array, é representado pelo segundo elemento da lista...

Você sabia que, cada elemento na lista pode ter o seu próprio reator? Usando o mesmo exemplo(o anterior), a lista é baseada é uma Array de objectos não é? E esses objectos são reativos, quando eles forem alterados, a interface também será alterada, o primeiro objecto da Array é o reator do primeiro elemento da lista...

Essa matéria te explicou tudo sobre reator no Inter.