Reatividade em JS
Olá! esta é a minha primeira história, e estou muito animado com isso :)).
Nesta história, discutiremos a reatividade simples em JavaScript e demonstraremos como implementá-la. React e Vue são exemplos de frameworks que utilizam reatividade. Com a reatividade, qualquer alteração nos dados atualizará automaticamente o DOM.
Primeiro, vamos tentar um exemplo simples de implementação de reatividade:
<body>
<div id="counter-value"></div>
<button onclick="incr()"> incr </button>
<button onclick="decr()"> decr </button>
</body>
<script>
let counter = 0
const setCounterValueToDOM = () => {
document.querySelector('#counter-value').innerText = counter
}
setCounterValueToDOM()
const incr = () => {
counter += 1
setCounterValueToDOM()
}
const decr = () => {
counter -= 1;
setCounterValueToDOM()
}
</script>
No entanto, essa abordagem não é recomendada porque requer a chamada da setCounterValueToDOMfunção toda vez que o valor é atualizado, o que é considerado uma prática ruim.
Para implementar a reatividade do zero em JavaScript, podemos usar um objeto Proxy . O construtor receberá um valor inicial para o objeto, bem como um manipulador. Com esse manipulador, podemos observar todas as alterações que ocorrem no objeto. vamos reescrever a seção de script do nosso código:
const counterHandler = {
set(obj, prop, value) {
obj[prop] = value
setCounterValueToDOM()
return obj
}
}
const counter = new Proxy(
{
value: 0,
},
counterHandler,
)
const setCounterValueToDOM = () => {
document.querySelector('#counter-value').innerText = counter.value
}
setCounterValueToDOM()
const incr = () => {
counter.value += 1
}
const decr = () => {
counter.value -= 1
}
Espero que goste!
![O que é uma lista vinculada, afinal? [Parte 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)