$effect: ผลข้างเคียง
เรียกใช้ผลข้างเคียงที่ทำงานซ้ำทุกครั้งเมื่อสิ่งที่ขึ้นต่อในระบบตอบสนองต่อการเปลี่ยนแปลงเปลี่ยนแปลง
$effect: ผลข้างเคียง เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
Rune สำหรับผลข้างเคียง
ใช้ $effect(() => { ... }) สำหรับผลข้างเคียงที่ตอบสนองต่อการเปลี่ยนแปลงแบบรีแอกทีฟ
$effect(() => {
console.log("count is", count);
});ติดตามโดยอัตโนมัติ
Svelte จะติดตามการพึ่งพาภายใน callback โดยอัตโนมัติ
ฟังก์ชันล้างข้อมูล
ส่งคืนฟังก์ชันเพื่อล้างข้อมูลก่อนการทำงานครั้งถัดไปหรือเมื่อถูกทำลาย
$effect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
});ทำงานหลังเมานต์
เอฟเฟกต์จะทำงานหลังจากคอมโพเนนต์เมานต์ และทำงานอีกครั้งเมื่อการพึ่งพาเปลี่ยนแปลงทุกครั้ง
ไม่มี SSR
callback ของ $effect จะไม่ทำงานระหว่าง SSR ให้ใช้สำหรับตรรกะที่ทำงานเฉพาะในเบราว์เซอร์
เอฟเฟกต์ก่อนเมานต์
$effect.pre ทำงานก่อนการอัปเดต DOM จึงเหมาะสำหรับรูปแบบการวัดแล้วนำไปใช้
เอฟเฟกต์ระดับราก
$effect.root สร้างเอฟเฟกต์นอกวงจรชีวิตของคอมโพเนนต์สำหรับกรณีขั้นสูง
เปรียบเทียบกับ onMount
onMount ทำงานครั้งเดียว ส่วน $effect ทำงานซ้ำเมื่อการพึ่งพาเปลี่ยนแปลง โดยบ่อยครั้ง $effect ใช้แทนทั้ง onMount และรูปแบบรีแอกทีฟได้
หลีกเลี่ยงการกำหนดสถานะ
การเปลี่ยนแปลงสถานะแบบรีแอกทีฟภายในเอฟเฟกต์อาจทำให้เกิดลูป ควรใช้ $derived สำหรับค่าที่คำนวณ
การอ่านที่ไม่ติดตาม
ใช้ untrack() ภายในเอฟเฟกต์เพื่ออ่านค่าโดยไม่ลงทะเบียนการพึ่งพา
กรณีใช้งานจริง
การบันทึกข้อมูล การซิงค์กับ localStorage การผสานรวมไลบรารีภายนอก และการปรับ DOM ด้วยตนเอง
ตรวจสอบความเข้าใจ
คุณจะล้างเอฟเฟกต์ได้อย่างไร
สรุปทบทวน
$effect จัดการผลข้างเคียง ติดตามการพึ่งพา และรองรับการล้างข้อมูลผ่านฟังก์ชันที่ส่งคืน
คำถามที่พบบ่อย
บทเรียน “$effect: ผลข้างเคียง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “$effect: ผลข้างเคียง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “$effect: ผลข้างเคียง”
เรียกใช้ผลข้างเคียงที่ทำงานซ้ำทุกครั้งเมื่อสิ่งที่ขึ้นต่อในระบบตอบสนองต่อการเปลี่ยนแปลงเปลี่ยนแปลง คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “$effect: ผลข้างเคียง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เหตุผลที่มี Runes: ก้าวข้ามเวทมนตร์ของคอมไพเลอร์
- $state: การทำปฏิกิริยาตอบสนองแบบละเอียด
- $derived: ค่าที่คำนวณแบบประกาศ
- $effect: ผลข้างเคียง