ปฏิกิริยาใน JS
May 01 2023
สวัสดี! นี่เป็นเรื่องแรกของฉันและฉันก็ออกจากเรื่องนี้มาก :)) ในเรื่องนี้ เราจะพูดถึงปฏิกิริยาอย่างง่ายใน JavaScript และสาธิตวิธีการใช้งาน
สวัสดี! นี่เป็นเรื่องแรกของฉันและฉันก็ออกจากเรื่องนี้มาก :))
ในเรื่องนี้ เราจะพูดถึงปฏิกิริยาอย่างง่ายใน 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 เราสามารถใช้วัตถุพร็อกซี ตัวสร้างจะได้รับค่าเริ่มต้นสำหรับวัตถุเช่นเดียวกับตัวจัดการ ด้วยตัวจัดการนี้ เราสามารถสังเกตการเปลี่ยนแปลงทั้งหมดที่เกิดขึ้นกับวัตถุ มาเขียนส่วนสคริปต์ของรหัสของเราใหม่:
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)