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