เมื่อใดควรใช้ useMemo และ useCallback: คำแนะนำสั้น ๆ สำหรับแฟน React

หากคุณเป็นนักพัฒนา React คุณอาจเคยพบการสนทนาเกี่ยวกับ React useMemo กับ useCallback ทางออนไลน์และจบลงด้วยความสับสนมากกว่าที่เคยเป็นมา การหาความแตกต่างระหว่าง useMemo และ useCallback อาจเป็นเรื่องยากมาก ไม่เป็นไร! การเริ่มต้นใช้งาน React-Hooks อาจเป็นเรื่องยาก แต่ก็มีประโยชน์อย่างมากในตอนเริ่มต้น

ในบทความนี้ เราจะแสดงให้คุณเห็นถึงความแตกต่างระหว่าง useCallback และ useMemo และเมื่อใดควรใช้ useCallback และ useMemo

ความแตกต่างระหว่าง useMemo และ useCallback

มีการแนะนำตะขอในตัวสองตัวด้วย React 16.8 คุณลักษณะเหล่านี้ถูกนำมาใช้เพื่อเพิ่มประสิทธิภาพการทำงาน ความแตกต่างระหว่าง useMemo กับ useCallback ดูเหมือนจะเล็กน้อย ดังนั้นเราจะพยายามขจัดความสับสน

React-Hooks คืออะไร?

Hooks เป็นคุณสมบัติใหม่ที่นำมาใช้ใน React ที่อนุญาตให้ useState และคุณสมบัติ React อื่น ๆ โดยไม่ต้องเขียนคลาส Hooks คือวิธีการและฟังก์ชันที่ “เชื่อมต่อ” เข้ากับสถานะและคุณสมบัติวงจรชีวิตของ React

useCallback เทียบกับ useMemo

useCallback hook จะใช้เมื่อใดก็ตามที่องค์ประกอบย่อยแสดงผลซ้ำแล้วซ้ำอีกโดยไม่จำเป็นจริงๆ เมื่อคุณใช้ useCallback คุณสามารถป้องกันการแสดงซ้ำที่ไม่จำเป็นนี้ได้โดยส่งคืนอินสแตนซ์เดิมของฟังก์ชันนั้นที่ส่งผ่านแทนที่จะสร้างอินสแตนซ์ใหม่ทุกครั้ง ซึ่งจะช่วยประหยัดเวลาได้มาก (และเงินที่ใช้ไปกับชั่วโมงพัฒนา) การส่งผ่านอาร์เรย์ของการพึ่งพาที่มีการเรียกกลับที่บันทึกจะส่งผลให้เวอร์ชันที่บันทึกจะมีการเปลี่ยนแปลงเมื่อการขึ้นต่อกันเปลี่ยนแปลงเท่านั้น

useMemo ใช้ในองค์ประกอบการทำงานของ React ใช้เพื่อคืนค่าที่บันทึกไว้ Memoization หมายถึงกระบวนการประหยัดเวลาในการคอมไพล์ใหม่โดยส่งคืนผลลัพธ์ที่แคชไว้ แทนที่จะคอมไพล์ฟังก์ชันใหม่ด้วยอาร์กิวเมนต์เดียวกันอีกครั้งสำหรับการรันครั้งถัดไป ผลลัพธ์ที่แคชจะถูกส่งคืนในครั้งต่อไปที่มีการเรียก useMemo hooks ให้ค่าที่แมปหน่วยความจำ

เห็นได้ชัดว่ามีความคล้ายคลึงกันบางอย่าง ทั้งใน useMemo และ useCallback hook ยอมรับฟังก์ชันเช่นเดียวกับอาร์เรย์ของการพึ่งพา อย่างไรก็ตาม useCallback จะจดจำค่าที่ส่งคืน และ useMemo จะจดจำฟังก์ชัน กล่าวอีกนัยหนึ่งคือแคชประเภทค่าและอีกรายการหนึ่งแคชฟังก์ชัน

• อ่านเพิ่มเติม – อย่างไรและทำไมคุณจึงควรจัดระเบียบไฟล์ของคุณ
• 9 วิธียอดนิยมในการใช้อุปกรณ์อิเล็กทรอนิกส์ในห้องเรียน

เมื่อใดควรใช้ useCallback กับ useMemo

ดังนั้นเมื่อใดที่คุณควรใช้ useCallback และเมื่อใด useMemo เป็นตัวเลือกที่ดีที่สุด มาดูตัวอย่างกัน หากโค้ดที่มีน้ำหนักมากและมีราคาแพงในการคำนวณยอมรับอาร์กิวเมนต์และส่งกลับค่า useMemo เป็นตัวเลือกที่ดีที่สุด ด้วยวิธีนี้ คุณสามารถอ้างอิงค่าระหว่างการเรนเดอร์ได้โดยไม่ต้องรันโค้ดซ้ำ และทำให้เสียเวลาและกำลังในการคำนวณของคุณ

หากคุณต้องการรักษาอินสแตนซ์ของฟังก์ชันให้คงอยู่ในการเรนเดอร์หลายๆ รายการ คุณควรใช้ useCallback แทนเพราะโดยพื้นฐานแล้วจะวางฟังก์ชันไว้นอกขอบเขตของส่วนประกอบ React ของคุณเพื่อให้ไม่เสียหาย

useEffect คืออะไร?

เราได้กล่าวถึงอาร์เรย์การพึ่งพาซึ่งคุณอาจเคยพบเมื่อใช้ useEffect useEffect เป็นอีกหนึ่ง React hook ใช้เพื่อจัดการกับผลข้างเคียงในส่วนประกอบที่ทำงานโดยใช้ตรรกะอาร์กิวเมนต์การเรียกกลับ การพึ่งพาอาศัยกันคือรายการการพึ่งพาของผลข้างเคียง เช่น อุปกรณ์ประกอบฉากหรือค่าสถานะ

hook นี้แสดง React ว่าส่วนประกอบต้องดำเนินการหลังจากเรนเดอร์ เมื่อ DOM ได้รับการอัปเดต เอฟเฟกต์ที่คุณส่งจะถูกเก็บไว้ คุณยังสามารถทำการดึงข้อมูลเพื่อให้ได้ผลลัพธ์นี้

กล่าวโดยย่อ useCallback, useMemo และ useEffect ล้วนเกี่ยวข้องกับการเพิ่มประสิทธิภาพระหว่างการแสดงส่วนประกอบซ้ำในแอปพลิเคชัน React

สิ่งสำคัญคืออย่าใช้ตะขอมากเกินไป hooks นำเสนอตรรกะใหม่และซับซ้อน และอาจมีผลตรงกันข้ามมากกว่าที่คุณตั้งใจ ทำให้เกิดปัญหาด้านประสิทธิภาพแทนที่จะแก้ปัญหาเหล่านั้น useMemo ควรใช้สำหรับการคำนวณที่มีราคาแพงมากเท่านั้น

อย่าใช้ useMemo หรือ useCallback เพื่อแก้ไขปัญหาพื้นฐานเกี่ยวกับแอปพลิเคชันของคุณ ในที่สุด ปัญหาเหล่านี้จะปรากฎขึ้นอีกและหลอกหลอนคุณ ดังนั้นควรจัดการกับข้อบกพร่องที่ทราบก่อน

• อ่านเพิ่มเติม – วิธีเลือก CMS ที่ดีที่สุด
• ข้อดีและข้อเสียของวิธีการเข้ารหัสคืออะไร?

บทสรุป

หวังว่าบทความนี้จะมีประโยชน์ และคุณเข้าใจสองตะขอมากขึ้น สรุป:

• ทั้งยอมรับฟังก์ชันและอาร์เรย์ของการพึ่งพา
• useMemo จดจำค่าที่ส่งคืน useCallback จดจำฟังก์ชัน

ความแตกต่างระหว่าง useMemo และ useCallback นั้นค่อนข้างชัดเจน! เครื่องมือเหล่านี้มีศักยภาพในการประหยัดเวลาและเงิน แต่ถ้าใช้ในบริบทและสภาพแวดล้อมที่เหมาะสมเท่านั้น

ฉันหวังว่าบทช่วยสอนนี้จะช่วยให้คุณทราบเกี่ยวกับ เมื่อต้องใช้ useMemo และ useCallback: a Brief Guide For React Fans หากคุณต้องการพูดอะไรแจ้งให้เราทราบผ่านส่วนความคิดเห็น หากคุณชอบบทความนี้ โปรดแชร์และติดตาม WhatVwant บน Facebook, Twitter และ YouTube สำหรับคำแนะนำทางเทคนิคเพิ่มเติม

เมื่อใดควรใช้ useMemo และ useCallback – คำถามที่พบบ่อย