React Component Lifecycle: สิ่งที่คุณต้องรู้ [2022]

ใน React แอปพลิเคชันจะแบ่งออกเป็นชิ้นส่วนที่เล็กที่สุดที่เรียกว่าส่วนประกอบ ส่วนประกอบสามารถนำเสนอหรือคอนเทนเนอร์

เมื่อเราพูดถึงองค์ประกอบการนำเสนอ พวกเขาไม่มีตรรกะ พวกมันถูกฝังอยู่ภายในส่วนประกอบ มันมี UI เท่านั้น

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

React ให้คุณมีคลาสหรือส่วนประกอบที่ใช้งานได้ รูปแบบที่แพร่หลายที่ใช้ในระบบนิเวศของปฏิกิริยาคือองค์ประกอบการนำเสนอเป็นองค์ประกอบที่ใช้งานได้ และส่วนประกอบคอนเทนเนอร์เป็นประเภทคลาส

วงจร ชีวิตปฏิกิริยา แสดงกระบวนการที่แน่นอนซึ่งส่วนประกอบต้องผ่าน และเหตุผลที่อยู่เบื้องหลัง วงจรชีวิตของส่วนประกอบ ที่ ทำปฏิกิริยา

ส่วนประกอบการทำงาน

สิ่งเหล่านี้ไม่มีสถานะและมีเพียงการปรับแต่งโดยใช้อุปกรณ์ประกอบฉากเท่านั้น

เมธอดวงจรชีวิตส่วนประกอบทั้งหมดหรือ setState ไม่สามารถใช้หรือเข้าถึงได้ภายในส่วนประกอบดังกล่าว

ชำระเงิน: ตอบสนองแนวคิดโครงการ

ส่วนประกอบของคลาส

คอมโพเนนต์เหล่านี้สามารถมีสถานะภายในเครื่อง และสามารถเข้าถึงเมธอดวงจรชีวิต และ setState

องค์ประกอบคลาสทั่วไปใน react ดูเหมือน:-

วงจรชีวิตส่วนประกอบมีสามขั้นตอน:-

1. การติดตั้ง
2. กำลังอัปเดต
3. เลิกเมานท์

การติดตั้ง

เมื่อมีการสร้างและแทรกองค์ประกอบใด ๆ ลงใน DOM (Document Object Model) วิธีการที่ใช้คือ:

● ตัว สร้าง ()

● getDerivedStateFromProps() แบบคงที่

● เรนเดอร์()

● componentDidMount()

กำลังอัปเดต

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

● getDerivedStateFromProps() แบบคงที่

● ควรคอมโพเนนต์อัปเดต ()

● เรนเดอร์()

● getSnapshotBeforeUpdate()

● componentDidUpdate()

อ่าน: Vue vs React: ความแตกต่างระหว่าง Vue และ React

เลิกเมานท์

วิธีนี้เรียกว่าในระหว่างการยกเลิกการต่อเชื่อมของส่วนประกอบใด ๆ :-

● ส่วนประกอบ willUnmount()

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

สำหรับการจัดการข้อผิดพลาดในส่วนประกอบ มีบางวิธีที่สงวนไว้:-

● getDerivedStateFromError() แบบคงที่

● componentDidCatch()

วิธีวงจรชีวิตที่ใช้กันทั่วไปอธิบายโดยละเอียด:-

● ตัวสร้าง (อุปกรณ์ประกอบฉาก)

วิธีวงจรชีวิตนี้ใช้ในระหว่างขั้นตอนการติดตั้งส่วนประกอบ หนึ่งสามารถมีวัตถุสถานะท้องถิ่นประกาศที่นี่ super(props) ถูกเรียกภายใน Constructor ก่อนคำสั่งอื่น มิฉะนั้น จะเกิดข้อผิดพลาดขณะเข้าถึง this.props

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

ไม่แนะนำให้ใช้สถานะการเรียกใน Constructor() เนื่องจากจะทำให้เกิดการเรนเดอร์ซ้ำก่อนที่รอบก่อนหน้าจะสิ้นสุดลง

Constructor() เป็นที่เดียวที่สามารถกำหนดสถานะได้โดยตรง มิฉะนั้น หากจำเป็นต้องเปลี่ยนสถานะหรือกำหนดบางอย่างภายใน ควรใช้ this.setSate

● เรนเดอร์()

ภายในองค์ประกอบของเมธอดนี้ ส่วน JSX จะถูกเขียน JSX คล้ายกับ HTML แต่เป็นไวยากรณ์เพิ่มเติมของจาวาสคริปต์ เมื่อเราใช้ JSX เรายังสามารถใช้นิพจน์ Javascript ภายในวิธีการเรนเดอร์ได้อีกด้วย

เมธอด render() ขององค์ประกอบพาเรนต์ใด ๆ อาจมีองค์ประกอบย่อยอยู่ข้างใน ทั้งหมดเป็นไปตามรูปแบบองค์ประกอบ ซึ่งเป็นฐานของส่วนประกอบที่ทำปฏิกิริยา

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

วิธีการเรนเดอร์เป็นวิธีการที่จำเป็น หากไม่มีสิ่งนี้ ส่วนประกอบจะไม่สามารถทำได้เนื่องจากเป็นที่เดียวที่สามารถเขียนส่วนมุมมองของส่วนประกอบได้

วิธีการเรนเดอร์นั้นบริสุทธิ์ ซึ่งหมายความว่าไม่สามารถแก้ไขสถานะภายในได้

สำหรับส่วนประกอบใด ๆ ในขั้นตอนการอัปเดต การเรนเดอร์ซ้ำสำหรับส่วนประกอบเฉพาะจะเกิดขึ้นหรือไม่อาจขึ้นอยู่กับ ประเภทหรือการใช้วิธีการคืนวงจรชีวิตของ shouldComponentUpdate()

ไม่แนะนำให้มีการเรียก API และการโต้ตอบใดๆ กับเบราว์เซอร์ภายในวิธีนี้ และจะทำให้เกิดข้อผิดพลาด

● componentDidMount()

วิธีการนี้ถูกเรียกใช้ทันทีหลังจากติดตั้งส่วนประกอบ ขณะนี้ DOM พร้อมใช้งานสำหรับการจัดการเพิ่มเติม หนึ่งสามารถเรียก setState ภายในวิธีนี้

นอกจากนี้ยังสามารถโต้ตอบกับเบราว์เซอร์หรือการเรียก API ได้จากที่นี่

วิธีนี้เรียกว่าเพียงครั้งเดียว ซึ่งเป็นช่วงที่สร้าง เมธอดจะไม่ทำงานในส่วนการแสดงผลซ้ำเพิ่มเติม และตรรกะภายในจะไม่ทำงานด้วย

● componentDidUpdate()

สิ่งนี้เหมือนกับ componentDidMount.; อาจมีข้อผิดพลาดโดยมีความแตกต่างเพียงอย่างเดียวซึ่งจะถูกเรียกเมื่อมีการแสดงส่วนประกอบซ้ำ วิธีนี้ไม่ได้ถูกเรียกสำหรับการเรนเดอร์เริ่มต้น

setState และผลข้างเคียงสามารถทำได้ภายในวิธีนี้ แต่ setState จะต้องอยู่ในเงื่อนไข มิฉะนั้น อาจจบลงด้วยการแสดงวนซ้ำไม่สิ้นสุด และการเรนเดอร์จะไม่สิ้นสุด

นอกจากนี้ componentDidUpdate จะไม่ถูกเรียกหาก shouldComponentUpdate() คืนค่าเท็จ

● componentWillUnmount()

วิธีนี้เรียกว่าเมื่อเฟส unmounting ของส่วนประกอบเกิดขึ้น

ภายในวิธีการนี้ ตามหลักการแล้ว การลบตัวจัดการเหตุการณ์และการล้างหน่วยความจำสามารถทำได้สำเร็จ

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

● ควรคอมโพเนนต์อัปเดต ()

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

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

ไม่แนะนำให้เรียกเมธอด setState() ภายในนี้ เพราะจะทำให้แสดงผลซ้ำ

นอกจากนี้ ผลข้างเคียงไม่ควรดำเนินการภายในวิธีนี้

นอกจากนี้ยังมีทางเลือกอื่นสำหรับวิธีนี้ หนึ่งสามารถใช้ React.pureComponents ในขณะที่ขยายคลาส สิ่งนี้มีเสถียรภาพและเชื่อถือได้มากกว่า shouldComponentUpdate() มาก

สุดท้ายแต่ไม่ท้ายสุด มีประเภทขอบเขตข้อผิดพลาดของส่วนประกอบตอบสนองที่มีอยู่เพื่อตรวจจับข้อผิดพลาด

หนึ่งต้องห่อส่วนประกอบด้วยองค์ประกอบขอบเขตข้อผิดพลาดอย่างง่าย

ภายในองค์ประกอบพิเศษนี้ มีสองวิธีวงจรชีวิตที่ใช้:-

1. คงที่ getDerivedStateFromError()
2. componentDidCatch()

ทั้งคู่จะถูกเรียกหากองค์ประกอบที่สืบทอดมาเกิดข้อผิดพลาด

อันแรกถูกเรียกในระหว่างเฟสเรนเดอร์ ดังนั้นจึงไม่อนุญาตให้มีผลข้างเคียงอยู่ภายใน อันที่สองถูกเรียกในระหว่างขั้นตอนการคอมมิต ดังนั้นจึงอนุญาตให้มีผลข้างเคียงอยู่ภายในได้

อ่านเพิ่มเติม: ReactJS Developer เงินเดือนในอินเดีย

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

บทสรุป

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

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการตอบสนอง, การพัฒนาแบบฟูลสแตก, ลองดูโปรแกรม Executive PG ของ upGrad & IIIT-B ในการพัฒนาซอฟต์แวร์แบบครบวงจร ซึ่งออกแบบมาสำหรับมืออาชีพที่ทำงานและมีการฝึกอบรมที่เข้มงวดมากกว่า 500 ชั่วโมง, โครงการมากกว่า 9 โครงการ และการมอบหมายงาน สถานะศิษย์เก่า IIIT-B โครงการหลักและความช่วยเหลือด้านงานกับบริษัทชั้นนำ

เตรียมความพร้อมสู่อาชีพแห่งอนาคต

สมัครเลยตอนนี้สำหรับโปรแกรม Executive PG ในการพัฒนา Full Stack