Реактивность в JS
Привет! это мой первый рассказ, и я очень взволнован этим :)).
В этой статье мы обсудим простую реактивность в JavaScript и покажем, как ее реализовать. React и Vue являются примерами фреймворков, использующих реактивность. При реактивности любые изменения данных будут автоматически обновлять DOM.
Во-первых, давайте попробуем простой пример реализации реактивности:
<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>
Однако этот подход не рекомендуется, так как он требует вызова setCounterValueToDOMфункции каждый раз при обновлении значения, что считается плохой практикой.
Чтобы реализовать реактивность с нуля в JavaScript, мы можем использовать объект Proxy . Конструктор получит начальное значение для объекта, а также обработчик. С помощью этого обработчика мы можем наблюдать за всеми изменениями, происходящими с объектом. давайте перепишем часть скрипта нашего кода:
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
}
Надеемся, вам понравится!
![В любом случае, что такое связанный список? [Часть 1]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
