ผลข้างเคียงกับการเรนเดอร์ การพึ่งพา และการเก็บกวาด
ความแตกต่างระหว่างการเรนเดอร์กับผลข้างเคียง อาร์เรย์การพึ่งพา ([] , [x]) และการเขียนฟังก์ชันเก็บกวาด
ผลข้างเคียงกับการเรนเดอร์ การพึ่งพา และการเก็บกวาด เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
การเรนเดอร์เทียบกับเอฟเฟกต์
เป้าหมาย: ทราบว่าส่วนใดทำงานระหว่างการเรนเดอร์ (บริสุทธิ์และไม่มีผลข้างเคียง) และส่วนใดควรอยู่ในเอฟเฟกต์ (ทำงานให้สอดคล้องกับระบบภายนอก)
- การเรนเดอร์: ส่งคืนส่วนติดต่อผู้ใช้
- เอฟเฟกต์: ทำงานหลังการวาดภาพ
- การล้างข้อมูล: ยกเลิกงานที่ทำไว้
กฎการพึ่งพา
การพึ่งพาควบคุมว่าเอฟเฟกต์จะทำงานเมื่อใด:
- []: ทำงานครั้งเดียวหลังเมานต์
- [x]: ทำงานตอนเมานต์และทุกครั้งที่ x เปลี่ยนแปลง
- ไม่ระบุการพึ่งพา: ทำงานหลังการเรนเดอร์ทุกครั้ง (ผู้เริ่มต้นควรหลีกเลี่ยง)
สาธิต: การพึ่งพาในการทำงาน
เอฟเฟกต์ที่มี [count] จะอัปเดตชื่อเรื่องทุกครั้งที่ count เปลี่ยนแปลง เมื่อเปรียบเทียบกับ [] ซึ่งทำงานเพียงครั้งเดียว
<div id="root"></div>
เหตุผลที่การล้างข้อมูลสำคัญ
เพิ่มการล้างข้อมูลโดยส่งคืนฟังก์ชันจากเอฟเฟกต์ React จะเรียกใช้ฟังก์ชันนี้ก่อนทำงานเอฟเฟกต์ซ้ำและเมื่อถอดคอมโพเนนต์ออก
- เอาตัวฟังเหตุการณ์ออก
- ล้างตัวจับเวลา
- ยกเลิกคำขอ
สาธิต: การล้างข้อมูลของเอฟเฟกต์
เราเพิ่มตัวฟังเหตุการณ์การปรับขนาดในเอฟเฟกต์ และเอาออกในการล้างข้อมูลเพื่อป้องกันการรั่วไหล
<div id="root"></div>
ข้อควรระวังที่ควรหลีกเลี่ยง
ข้อควรระวัง:
- ทำงานที่มีผลข้างเคียงระหว่างการเรนเดอร์—ให้ย้ายไปไว้ใน useEffect
- ขาดการพึ่งพาจนทำให้ได้ค่าเก่า
- ลืมล้างข้อมูลของตัวฟังเหตุการณ์หรือตัวจับเวลา
ตรวจสอบตำแหน่งการล้างข้อมูล
สรุป
สรุป: การเรนเดอร์ควรบริสุทธิ์ ส่วนเอฟเฟกต์ทำงานหลังการวาดภาพ ใช้อาร์เรย์การพึ่งพาเพื่อควบคุมเวลาที่เอฟเฟกต์ทำงาน และส่งคืนการล้างข้อมูลเพื่อยกเลิกการติดตามหรือล้างตัวจับเวลา
คำถามที่พบบ่อย
บทเรียน “ผลข้างเคียงกับการเรนเดอร์ การพึ่งพา และการเก็บกวาด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ผลข้างเคียงกับการเรนเดอร์ การพึ่งพา และการเก็บกวาด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ผลข้างเคียงกับการเรนเดอร์ การพึ่งพา และการเก็บกวาด”
ความแตกต่างระหว่างการเรนเดอร์กับผลข้างเคียง อาร์เรย์การพึ่งพา ([] , [x]) และการเขียนฟังก์ชันเก็บกวาด คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “ผลข้างเคียงกับการเรนเดอร์ การพึ่งพา และการเก็บกวาด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ผลข้างเคียงกับการเรนเดอร์ การพึ่งพา และการเก็บกวาด
- ข้อผิดพลาดที่พบบ่อย: คลอสเชอร์เก่ากับการขาดการพึ่งพา
- พื้นฐานการดึงข้อมูลในผลข้างเคียง (การยกเลิกและการเก็บกวาด)