Reactividad en JS
¡Hola! esta es mi primera historia, y estoy muy emocionada al respecto :)).
En esta historia, discutiremos la reactividad simple en JavaScript y demostraremos cómo implementarla. React y Vue son ejemplos de marcos que utilizan la reactividad. Con reactividad, cualquier cambio en los datos actualizará automáticamente el DOM.
Primero, probemos un ejemplo simple de implementación de reactividad:
<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>
Sin embargo, no se recomienda este enfoque porque requiere llamar a la setCounterValueToDOMfunción cada vez que se actualiza el valor, lo que se considera una mala práctica.
Para implementar la reactividad desde cero en JavaScript, podemos usar un objeto Proxy . El constructor recibirá un valor inicial para el objeto, así como un controlador. Con este controlador, podemos observar todos los cambios que ocurren en el objeto. reescribamos la sección de script de nuestro 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 lo disfrutes!
![¿Qué es una lista vinculada, de todos modos? [Parte 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
