Réactivité en JS
Bonjour! c'est ma toute première histoire, et j'en suis très excité :)).
Dans cette histoire, nous discuterons de la réactivité simple en JavaScript et montrerons comment l'implémenter. React et Vue sont deux exemples de frameworks qui utilisent la réactivité. Avec réactivité, toute modification des données mettra automatiquement à jour le DOM.
Essayons d'abord un exemple simple de mise en œuvre de la réactivité :
<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>
Cependant, cette approche n'est pas recommandée car elle nécessite d'appeler la setCounterValueToDOMfonction à chaque fois que la valeur est mise à jour, ce qui est considéré comme une mauvaise pratique.
Pour implémenter la réactivité à partir de zéro en JavaScript, nous pouvons utiliser un objet Proxy . Le constructeur recevra une valeur initiale pour l'objet, ainsi qu'un gestionnaire. Avec ce gestionnaire, nous pouvons observer tous les changements qui se produisent sur l'objet. réécrivons la section script de notre code :
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
}
Espérons que vous apprécierez!
![Qu'est-ce qu'une liste liée, de toute façon? [Partie 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
