รู้เบื้องต้นเกี่ยวกับการตอบสนอง useCallBack()

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

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

ในบทความนี้ เราจะอธิบาย ว่า useCallBack() คืออะไร ใน React และวิธีใช้ในโค้ด React ของเราเพื่อปรับปรุงประสิทธิภาพ

useCallBack ในการตอบสนองคืออะไร?

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

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

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

นี่คือตัวอย่าง -

const memoizedCallback = useCallback(

() => {

ทำบางสิ่ง (a, b);

},

[ก ข]

);

แม้ว่าการเริ่มต้นใช้งาน React ผ่านบทช่วยสอนจะเป็นวิธีที่ยอดเยี่ยม แต่การเรียนหลักสูตรแบบไดนามิกเพื่อเริ่มต้นการพัฒนาสามารถช่วยให้คุณปรับปรุงทักษะของคุณได้อย่างมาก ลองชม หลักสูตร Executive Post Graduate Program in Software Development – ​​Specialization in Full Stack Development ตั้งแต่ upGrad จนถึง kickstart!

ข้อดีของการใช้ useCallBack()

นี่คือข้อดีบางประการของการใช้ React useCallBack() –

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

ตรวจสอบหลักสูตรการพัฒนาซอฟต์แวร์ ของ upGrad เพื่อเพิ่มทักษะให้กับตัวคุณเอง

ไวยากรณ์และพารามิเตอร์ของ useCallBack()

const memoizedCallback = useCallback(

() => {

ทำอะไรสักอย่าง();

},

[การพึ่งพา 1 การพึ่งพา 2]

);

ในตัวอย่าง ฮุก useCallback() จะบันทึก ฟังก์ชัน doSomething()ซึ่งหมายความว่าจะแคชเวอร์ชันที่สร้างไว้ก่อนหน้านี้ ฟังก์ชันแคชจะใช้กับการแสดงผลที่ตามมาเท่านั้น เว้นแต่ค่าของdependency1 หรือ dependency2จะเปลี่ยนไป

หากการขึ้นต่อกันเหล่านี้เปลี่ยนไป ฟังก์ชันdoSomething() เวอร์ชันใหม่ จะถูกสร้างขึ้น และเวอร์ชันที่แคชไว้จะถูกแทนที่ด้วยเวอร์ชันใหม่สิ่งนี้ช่วยเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชันโดยป้องกันการสร้างฟังก์ชันที่ไม่จำเป็นและการแสดงผลซ้ำ

ความแตกต่างระหว่าง useMemo() และ useCallBack()

useCallback และ useMemo เป็น React Hooks ที่สามารถปรับปรุงประสิทธิภาพของแอปพลิเคชัน React โดยบันทึกค่าต่างๆ hooks ทั้งสองใช้ฟังก์ชันเป็นอาร์กิวเมนต์และส่งคืนฟังก์ชันนั้นในรูปแบบ memoised

นี่คือความแตกต่างระหว่างทั้งสอง:

สถานการณ์เมื่อจะใช้ useCallBack()

นี่คือสถานการณ์ที่สามารถใช้ useCallBack() ได้ –

การเพิ่มประสิทธิภาพส่วนประกอบย่อย

useCallback React เพิ่มประสิทธิภาพคอมโพเนนต์ย่อยที่อาศัยความเท่าเทียมกันในการอ้างอิงเพื่อหลีกเลี่ยงการแสดงผลที่ไม่จำเป็น โดยเฉพาะอย่างยิ่งเมื่อส่งการเรียกกลับไปยังคอมโพเนนต์ย่อยเหล่านี้

ป้องกันการแสดงผลที่ไม่จำเป็น

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

ใช้โอกาสในการทำความเข้าใจฟังก์ชัน useCallBack() โดยละเอียดด้วยความช่วยเหลือจาก หลักสูตร Full Stack Software Development Bootcamp จาก upGrad

สำรวจหลักสูตรวิศวกรรมซอฟต์แวร์ยอดนิยมของเรา

ตัวอย่างการใช้งาน CallBack()

ต่อไปนี้คือตัวอย่างบางส่วนเกี่ยวกับวิธีใช้ hook ของ useCallBack()

ใช้ CallBack ตัวอย่างที่ 1

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

นำเข้า React, { useCallback } จาก 'react';

ฟังก์ชัน ParentComponent () {

const handleButtonClick = useCallback(() => {

console.log('คลิกปุ่มแล้ว');

}, []);

กลับ (

<ChildComponent onClick={handleButtonClick} />

);

}

ฟังก์ชัน ChildComponent({ onClick }) {

กลับ (

<button onClick={onClick}>คลิกฉัน</button>

);

}

ใช้ CallBack ตัวอย่างที่ 2

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

นำเข้า React, { useState, useCallback } จาก 'react';

ฟังก์ชัน ParentComponent () {

const [ข้อมูล setData] = useState ([]);

const processData = useCallback(() => {

const processorData = “ประมวลผลข้อมูลแล้ว”;

ส่งคืนข้อมูลที่ประมวลผลแล้ว

}, [ข้อมูล]);

กลับ (

<ChildComponent processData={processData} />

);

}

ฟังก์ชัน ChildComponent ({ processData }) {

ผลลัพธ์ const = processData ();

กลับ (

<div>{ผลลัพธ์</div>

);

}

ตอบสนองการเพิ่มประสิทธิภาพการทำงานโดยใช้ useCallBack()

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

นำเข้า { useState, useEffect } จาก 'ตอบสนอง';

แอปฟังก์ชัน () {

const [word, setWord] = useState("บ๊อบ");

const say = () => console.log(`คำของคุณคือ: ${word}`);

useEffect(() => {

พูด();

}, [พูด]);

กลับ <div>ยินดีต้อนรับ!</div>;

}

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

ระบบจะใช้การเรียกกลับ useEffect ในการเรนเดอร์แต่ละครั้ง ซึ่งไม่เหมาะกับประสิทธิภาพ วิธีหนึ่งในการแก้ปัญหานี้คือการย้ายฟังก์ชันไปที่ useEffect block แต่นี่จะไม่ใช่วิธีแก้ปัญหาในอุดมคติเนื่องจากคุณจะไม่สามารถใช้ฟังก์ชันนี้ในที่อื่นได้ ลองดูตัวอย่างด้านล่างนี้ –

นำเข้า React, { useState, useEffect } จาก 'react';

แอปฟังก์ชัน () {

const [word, setWord] = useState("บ๊อบ");

const say = () => console.log(`คำของคุณคือ: ${word}`);

useEffect(() => {

พูด();

}, [พูด]);

กลับ <div>ยินดีต้อนรับ!</div>;

}

อีกวิธีหนึ่งคือการใช้ useCallback hook โดยการรวมฟังก์ชัน สิ่งสำคัญคือต้องจำไว้ว่าฟังก์ชัน useCallback นั้นต้องการอาร์เรย์การพึ่งพา เช่นเดียวกับ useEffect หากฟังก์ชันรับตัวแปรใด ๆ ผู้ใช้สามารถส่งผ่านด้วยอาร์เรย์ หรือเว้นว่างไว้ เนื่องจากฟังก์ชัน say อาศัยตัวแปร word เราจึงรวมไว้ในอาร์เรย์

นำเข้า {useState, useEffect,useCallback} จาก 'react'

แอปฟังก์ชัน (){

const [word,setWord]=useState("บ๊อบ")

const say = useCallback(()=>console.log(`คำของคุณคือ: ${word}`),[word])

useEffect(()=>{

พูด()

},[พูด])

กลับ <div>ยินดีต้อนรับ!</div>

}

เมื่อไม่ควรใช้ useCallBack()

ในขณะที่ useCallback() เป็นเครื่องมือที่มีประโยชน์สำหรับการเพิ่มประสิทธิภาพในบางสถานการณ์ แต่ก็มีบางครั้งที่ไม่จำเป็นหรืออาจส่งผลเสีย ต่อไปนี้คือตัวอย่างบางส่วนเมื่อไม่ควรใช้ useCallback():

• เมื่อฟังก์ชั่นถูกส่งผ่านเป็น prop แล้วฟังก์ชั่นบริสุทธิ์ที่ไม่พึ่งพาสถานะภายนอก
• เมื่อส่งฟังก์ชันเป็นพร็อพ จะไม่ก่อให้เกิดปัญหาด้านประสิทธิภาพใดๆ และไม่ถูกเรียกใช้มากเกินไป
• เมื่อฟังก์ชันถูกส่งผ่านเป็นอุปกรณ์ประกอบ ฟังก์ชันจะถูกใช้ในหลายตำแหน่งและจำเป็นต้องสร้างใหม่ทุกครั้งเพื่อสะท้อนถึงพฤติกรรมหรือการพึ่งพาที่แตกต่างกัน
• เมื่อฟังก์ชันถูกส่งผ่านเนื่องจาก prop เป็นส่วนหนึ่งของแผนผังส่วนประกอบขนาดเล็ก ประสิทธิภาพที่ได้รับจาก useCallback() จะถือว่าเล็กน้อย
• เมื่อฟังก์ชันถูกส่งผ่านเนื่องจากอุปกรณ์ประกอบฉากจะถูกใช้เป็นตัวจัดการเหตุการณ์และถูกเรียกใช้เพียงครั้งเดียว

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

ทักษะการพัฒนาซอฟต์แวร์ตามความต้องการ

บทสรุป

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

upGrad เปิดสอน หลักสูตร วิทยาศาสตรมหาบัณฑิตสาขาวิทยาการคอมพิวเตอร์ ที่ให้การศึกษาด้านวิทยาการคอมพิวเตอร์ที่ครอบคลุมโดยเน้นที่ทักษะที่เกี่ยวข้องกับอุตสาหกรรม โปรแกรมนี้เหมาะสำหรับบุคคลที่ใหม่กว่าหรือมีประสบการณ์มากกว่าเพื่อเพิ่มพูนทักษะการพัฒนาซอฟต์แวร์ของตน ด้วยหลักสูตรนี้ นักเรียนจะพร้อมมากกว่าที่จะยกระดับอาชีพในโลกแห่งความเป็นจริงและกลายเป็นผู้เชี่ยวชาญในสาขาที่ตนใฝ่ฝัน