ตอบสนอง useEffect() Hook: การใช้งาน อย่างไร และเมื่อใดควรใช้

รู้เบื้องต้นเกี่ยวกับ useEffect() Hook

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

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

โดยเนื้อแท้แล้วuseeffect hook ถูกสร้างขึ้นเพื่อรับมือกับความท้าทายที่เผชิญภายใต้วงจรชีวิตของส่วนประกอบคลาส ES6อย่างไรก็ตาม ตอนนี้ได้กลายเป็นหนึ่งในแนวคิดปฏิกิริยาหลัก

ด้วยบทสรุปนี้เกี่ยวกับสิ่งที่ useeffect ใน react มาดูที่ไวยากรณ์ของมันกัน

ไวยากรณ์พื้นฐานของ useEffect() Hook

useEffect รองรับ สองอาร์กิวเมนต์ ; อาร์กิวเมนต์ที่สองเป็นทางเลือก ไวยากรณ์เป็นดังนี้:

useEffect(<ฟังก์ชัน>, <การพึ่งพา>)

ฟังก์ชันประกอบด้วยตรรกะผลข้างเคียง มันกระตุ้นการดำเนินการของการโทรกลับโดยตรงหลังจากการอัพเดต DOM

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

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

คุณสามารถพิจารณาไวยากรณ์ต่อไปนี้เมื่อใช้งาน useEffect() Hook:

// นำเข้า useEffect

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

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

// เรียกมันเหนือ JSX ที่ส่งคืน

// ส่งผ่านอาร์กิวเมนต์ 2 อาร์กิวเมนต์ไปยังอาร์เรย์และฟังก์ชัน

useEffect(() => {

// ฟังก์ชั่นเอฟเฟกต์

กลับ () => {

// ฟังก์ชั่นการล้างข้อมูล

};

}, [/* อาร์เรย์ขึ้นต่อกัน */]);

// ตรรกะการเรนเดอร์ส่วนประกอบ

}

}

ตรวจสอบหลักสูตรเทคโนโลยีฟรีของเรา เพื่อรับความได้เปรียบเหนือการแข่งขัน

การติดตั้งและถอดส่วนประกอบด้วย useEffect() Hook

ติดตั้ง

ขั้นตอนเริ่มต้นของวงจรชีวิตของส่วนประกอบ React เกี่ยวข้องกับการสร้างและการแทรกส่วนประกอบลงใน DOM ขั้นตอนวงจรอายุของ react useeffect รวมถึงเมธอดวงจรชีวิตของ componentDidMount ซึ่งดำเนินการเมื่อติดตั้งคอมโพเนนต์

นี่คือตัวอย่างการติดตั้งส่วนประกอบโดยใช้ useEffect() hook

ComponentDidMount() {

console.log("ติดตั้งคอมโพเนนต์เรียบร้อยแล้ว");

this.setState({

โหลด: จริง

})

}

ในตัวอย่างข้างต้น componentDidMount ให้คุณใช้ setState ดังนั้น คุณสามารถตั้งค่าและเปลี่ยนสถานะในวิธีวงจรชีวิตได้อย่างง่ายดาย วิธีการที่เกี่ยวข้องใช้การเรียก API เรียกปลายทางระยะไกล และดึงข้อมูล

กำลังยกเลิกการต่อเชื่อม

วิธีวงจร ชีวิต useeffect ปฏิกิริยา นี้ จัดการการล้างข้อมูลใน DOMมันเหมือนกับฟังก์ชั่นการล้าง useeffect ที่ลบส่วนประกอบออกจาก DOMเรียกว่า unmounting ใน React การเลิกต่อเชื่อมใช้วิธีวงจรชีวิตวิธีเดียว นั่นคือ componentWillUnmount เรียกว่าเมื่อคุณต้องการลบส่วนประกอบออกจาก DOM

ComponentWillUnmount() {

console.log(“ยกเลิกการต่อเชื่อมคอมโพเนนต์เรียบร้อยแล้ว”);

}

การใช้ use effect() Hook สำหรับจัดการการเปลี่ยนแปลงสถานะ

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

ส่วนต่อไปนี้แสดงตัวอย่างเพื่ออธิบายวิธีการใช้ hook เอฟเฟกต์ จัดการกับการเปลี่ยนแปลงสถานะ

ตัวอย่างเช่น คุณอาจต้องการเรียกใช้ผลข้างเคียงตามค่า "วัน" สมมติว่าคุณมีผลข้างเคียงที่จะแสดงข้อความอวยพรขึ้นอยู่กับค่าของวัน ค่าของวันจะถูกบันทึกไว้ในตัวแปรสถานะ

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

useEffect(() =>

{

// ผลข้างเคียง

}, [สถานะ]);

ในตัวอย่างข้างต้นของ useeffect react native ผลข้างเคียงจะทำงานหากค่าของตัวแปรสถานะอัพเดต

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

การใช้ useEffect() Hook กับ API และคำขอเครือข่าย

คุณสามารถใช้ตะขอ 'useEffect()' กับ API และคำขอเครือข่ายเพื่อดึงข้อมูลจากเซิร์ฟเวอร์และจัดการกับข้อผิดพลาด ต่อไปนี้คือตัวอย่างวิธีใช้ 'useEffect()' กับ API และจัดการกับข้อผิดพลาดของเครือข่าย:

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

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

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

const [ข้อผิดพลาด setError] = useState (null);

useEffect(() => {

ฟังก์ชัน async fetchData () {

พยายาม {

การตอบสนอง = รอการดึงข้อมูล ('https://api.example.com/data');

ถ้า (!response.ok) {

โยนข้อผิดพลาดใหม่ ('การตอบสนองของเครือข่ายไม่โอเค');

}

const json = รอการตอบกลับ json ();

setData(json);

} จับ (ข้อผิดพลาด) {

setError (ข้อผิดพลาด);

}

}

ดึงข้อมูล ();

}, []);

ถ้า (ข้อผิดพลาด) {

กลับ <div>ข้อผิดพลาด: {error.message}</div>;

}

ถ้า (! data) {

กลับ <div>กำลังโหลด…</div>;

}

กลับ (

<div>

<p>{data.message}</p>

</div>

);

}

คุณสามารถแก้ไขตัวอย่างนี้เพื่อรวมฟังก์ชันเพิ่มเติมใดๆ ที่คุณต้องการในการจัดการคำขอเครือข่ายและการตอบสนองของ API

ขั้นสูง useEffect() เทคนิคการเกี่ยว

หนึ่งในเทคนิคขั้นสูง ของ useeffect react คือการท่องจำเป็นเทคนิคการเพิ่มประสิทธิภาพที่แคชเอาต์พุตของการเรียกใช้ฟังก์ชัน ต่อจากนั้นฟังก์ชัน useeffect return จะส่งคืนค่านั้นเมื่อป้อนอินพุตเดียวกันอีกครั้ง

อีกเทคนิค useEffect() Hook ที่รู้จักกันดีคือ useMemo Hook ช่วยให้คุณคำนวณค่าและจดจำได้ ไวยากรณ์ของมันคือ:

นำเข้า { useMemo } จาก 'ตอบสนอง'

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

useEffect() การขึ้นต่อกันของ Hook

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

อาร์กิวเมนต์การพึ่งพาช่วยให้คุณควบคุมเวลาเมื่อมีการเรียกใช้ผลข้างเคียง โดยไม่คำนึงถึงรอบการแสดงผลของส่วนประกอบ

การแสดงผลตามเงื่อนไขด้วย useEffect() Hook

useEffect Hook ให้คุณใส่เงื่อนไขภายใน hook นี่คือตัวอย่าง

useEffect(() => {

ถ้า (ควรดำเนินการ) {

// (รายการเงื่อนไข)

}

}, [ควรดำเนินการ])

คุณต้องระบุเงื่อนไขบังคับที่คุณต้องการดำเนินการภายใต้ฟังก์ชัน shouldExecute

ใช้เอฟเฟกต์ () Hook กับ ComponentDidMount () และ ComponentDidUpdate ()

useEffect() Hook กับ componentDidUpdate():

useEffect() Hook กับ componentDidMount():

ข้อผิดพลาดทั่วไปและแนวทางปฏิบัติที่ดีที่สุดกับ useEffect() Hook

ข้อผิดพลาดทั่วไป

1. ไม่กำหนดการพึ่งพา

useEffect ทำงานทุกครั้งที่คอมโพเนนต์ถูกเรนเดอร์ ดังนั้น คุณต้องกำหนดค่าที่ต้องทริกเกอร์การแสดงผลซ้ำ มิฉะนั้น ฟังก์ชัน useEffect ของคุณอาจสร้างปัญหาด้านประสิทธิภาพได้

2. ไม่ทำความสะอาดหลังจากเรียกใช้ useEffect hook

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

3. การใช้ setState ในฟังก์ชัน useEffect โดยไม่ต้องขึ้นต่อกัน

หากคุณอัปเดตสถานะใน useEffect จะทำให้เกิดการแสดงผลอื่น สิ่งนี้สามารถนำไปสู่การวนซ้ำไม่สิ้นสุด เพื่อป้องกันสิ่งนี้ คุณต้องกำหนดตัวแปรสถานะที่คุณกำลังอัพเดตเป็นการพึ่งพาในตะขอ useEffect เสมอ

สำรวจหลักสูตรการพัฒนาซอฟต์แวร์ฟรีของเรา

ปฏิบัติที่ดีที่สุด:

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

บทสรุป

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

การเรียนรู้ทักษะการพัฒนาซอฟต์แวร์ที่จำเป็นเป็นสิ่งสำคัญในยุคปัจจุบัน คุณสามารถเสริม ทักษะ ให้ตัวเองด้วยทักษะอันล้ำสมัยเหล่านี้ได้โดยการเรียนต่อ ปริญญาโทสาขาวิทยาศาสตร์คอมพิวเตอร์ upGrad จาก LJMU หลักสูตรนี้ทำให้คุณเป็นนักพัฒนาซอฟต์แวร์ที่เชี่ยวชาญโดยมอบทักษะต่างๆ เช่น Java, Python และความเชี่ยวชาญในสาขาที่เกี่ยวข้อง การเรียนรู้แง่มุมที่ครอบคลุมในหลักสูตรนี้อย่างถี่ถ้วนจะช่วยให้คุณสำรวจโอกาสในการทำงาน เช่น นักพัฒนาจาวาสคริปต์ วิศวกรซอฟต์แวร์ และวิศวกรแบ็กเอนด์

นอกเหนือจากทักษะการพัฒนาซอฟต์แวร์ที่เชี่ยวชาญแล้ว upGrad ยังช่วยยกระดับอาชีพของคุณในฐานะนักพัฒนาแบบฟูลสแต็กผ่านหลักสูตรต่างๆ เช่น โปรแกรม Executive PG ในการพัฒนาฟูลสแต็กจาก IIITB และ บูทแคมป์พัฒนาซอฟต์แวร์ฟูลสแต็ ก โปรแกรมเหล่านี้มอบแพลตฟอร์มการเรียนรู้ที่ดื่มด่ำซึ่งช่วยให้ผู้สมัครได้รับทักษะการพัฒนาแบบฟูลสแต็กที่เรียกร้องและปูทางสู่อาชีพที่ประสบความสำเร็จได้อย่างมีประสิทธิภาพ!