“ ในการตอบสนองทุกอย่างเป็นส่วนประกอบ”
หากคุณคุ้นเคยกับ React คุณต้องเคยได้ยินหรืออ่านวลีนี้หลายครั้ง แต่คุณรู้หรือไม่ว่ามันหมายถึงอะไรและใช้อย่างไร? หากคุณไม่ทำเช่นนั้นโปรดอ่านบล็อกนี้เพื่อเรียนรู้เกี่ยวกับส่วนประกอบของปฏิกิริยาและขั้นตอนต่างๆในวงจรชีวิต ฉันมั่นใจว่าเมื่อคุณทำเสร็จ การอ่านบล็อกนี้คุณจะมีความเข้าใจอย่างถ่องแท้เกี่ยวกับส่วนประกอบของปฏิกิริยาและแนวคิดที่อยู่รอบ ๆ แต่ก่อนดำเนินการต่อลองดูหัวข้อที่ฉันจะพูดถึง:
- ส่วนประกอบของปฏิกิริยาคืออะไร?
- ข้อดีของส่วนประกอบปฏิกิริยา
- อุปกรณ์ประกอบฉาก
- รัฐ
- รัฐเทียบกับอุปกรณ์ประกอบฉาก
- ตอบสนองวงจรอายุของส่วนประกอบ
ส่วนประกอบของปฏิกิริยาคืออะไร?
ก่อนหน้านี้นักพัฒนาต้องเขียนโค้ด 1,000 บรรทัดเพื่อพัฒนาแอพพลิเคชั่นหน้าเดียวธรรมดา ๆ แอปพลิเคชันเหล่านั้นส่วนใหญ่เป็นไปตามโครงสร้าง DOM แบบดั้งเดิมและการเปลี่ยนแปลงสิ่งเหล่านี้ถือเป็นเรื่องที่ท้าทายและเป็นงานที่น่าเบื่อสำหรับนักพัฒนาพวกเขาต้องค้นหาองค์ประกอบที่ต้องการการเปลี่ยนแปลงด้วยตนเองและอัปเดตตามนั้น แม้ความผิดพลาดเพียงเล็กน้อยก็อาจทำให้แอปพลิเคชันล้มเหลวได้ ยิ่งไปกว่านั้นการอัปเดต DOM นั้นมีราคาแพงมาก ดังนั้นจึงมีการนำวิธีการตามส่วนประกอบ ในแนวทางนี้แอปพลิเคชันทั้งหมดจะถูกแบ่งออกเป็นชิ้นส่วนตรรกะซึ่งเรียกว่าส่วนประกอบ React เป็นหนึ่งในกรอบที่เลือกใช้แนวทางนี้หากคุณกำลังวางแผนที่จะสร้างอาชีพในการพัฒนาเว็บการเริ่มต้นจะเปิดโอกาสมากมายให้คุณ
ตอนนี้เรามาทำความเข้าใจว่าส่วนประกอบเหล่านี้คืออะไร
ส่วนประกอบของปฏิกิริยาถือเป็นส่วนประกอบพื้นฐานของอินเทอร์เฟซผู้ใช้ ส่วนประกอบเหล่านี้แต่ละตัวมีอยู่ในพื้นที่เดียวกัน แต่ทำงานแยกกัน ส่วนประกอบของปฏิกิริยามีโครงสร้างวิธีการและ API ของตัวเอง สามารถใช้ซ้ำได้และสามารถฉีดเข้าไปในอินเทอร์เฟซได้ตามความต้องการ เพื่อให้มีความเข้าใจมากขึ้นให้พิจารณา UI ทั้งหมดเป็นโครงสร้างที่นี่ส่วนประกอบเริ่มต้นจะกลายเป็นรูทและแต่ละชิ้นที่เป็นอิสระจะกลายเป็นกิ่งก้านซึ่งแบ่งออกเป็นสาขาย่อยต่อไป
สิ่งนี้ช่วยให้ UI ของเราจัดระเบียบและอนุญาตให้ข้อมูลและการเปลี่ยนแปลงสถานะไหลอย่างมีเหตุผลจากรากไปยังสาขาจากนั้นไปยังสาขาย่อย คอมโพเนนต์โทรไปยังเซิร์ฟเวอร์โดยตรงจากฝั่งไคลเอ็นต์ซึ่งทำให้ DOM อัปเดตแบบไดนามิกโดยไม่ต้องรีเฟรชเพจ เนื่องจากส่วนประกอบการตอบสนองสร้างขึ้นจากแนวคิดของคำขอ AJAX แต่ละองค์ประกอบมีอินเทอร์เฟซของตัวเองที่สามารถโทรไปยังเซิร์ฟเวอร์และอัปเดตได้ เนื่องจากส่วนประกอบเหล่านี้ไม่ขึ้นต่อกันจึงสามารถรีเฟรชได้โดยไม่ส่งผลกระทบต่อผู้อื่นหรือ UI โดยรวม
เราใช้ React.createClass () วิธีการสร้างส่วนประกอบ วิธีนี้ต้องส่งผ่านอาร์กิวเมนต์ของวัตถุซึ่งจะกำหนดองค์ประกอบการตอบสนอง แต่ละองค์ประกอบต้องมีหนึ่งอย่าง แสดงผล () วิธี. เป็นคุณสมบัติที่สำคัญที่สุดของส่วนประกอบที่รับผิดชอบในการแยกวิเคราะห์ HTML ใน JavaScript, JSX นี้ แสดงผล () จะส่งคืนการแสดง HTML ขององค์ประกอบเป็นโหนด DOM ดังนั้นแท็ก HTML ทั้งหมดจะต้องอยู่ในแท็กปิดล้อมภายในไฟล์ แสดงผล () .
ต่อไปนี้เป็นโค้ดตัวอย่างสำหรับการสร้างคอมโพเนนต์
นำเข้า React จาก 'react' นำเข้า ReactDOM จากคลาส 'react-dom' MyComponent ขยาย React.Component {render () {return (รหัสของคุณคือ {this.state.id}
)}} ReactDOM.render (, document.getElementById ('เนื้อหา'))
รัฐเทียบกับอุปกรณ์ประกอบฉาก
ตอบสนองวงจรอายุของส่วนประกอบ
React มีวิธีการต่างๆที่แจ้งเตือนเมื่อถึงขั้นตอนหนึ่งในวงจรชีวิตของส่วนประกอบเกิดขึ้น วิธีการเหล่านี้เรียกว่าวิธีวงจรชีวิต วิธีวงจรชีวิตเหล่านี้ไม่ซับซ้อนมากนัก คุณสามารถคิดว่าวิธีการเหล่านี้เป็นตัวจัดการเหตุการณ์เฉพาะที่เรียกตามจุดต่างๆในช่วงอายุของส่วนประกอบ คุณยังสามารถเพิ่มรหัสของคุณเองในวิธีการเหล่านี้เพื่อทำงานต่างๆ เมื่อพูดถึงวงจรชีวิตของส่วนประกอบวงจรชีวิตแบ่งออกเป็น 4 ขั้นตอน พวกเขาคือ:
- เฟสเริ่มต้น
- กำลังอัปเดตเฟส
- อุปกรณ์ประกอบฉากเปลี่ยนเฟส
- กำลังยกเลิกการต่อเชื่อมเฟส
แต่ละขั้นตอนเหล่านี้มีวิธีวงจรชีวิตบางอย่างซึ่งเฉพาะเจาะจงสำหรับพวกเขาเท่านั้น ตอนนี้เรามาดูกันว่าเกิดอะไรขึ้นในแต่ละขั้นตอนเหล่านี้
ก. ระยะเริ่มต้น - เฟสแรกของวงจรชีวิตของส่วนประกอบ React คือเฟสเริ่มต้นหรือเฟสการแสดงผลเริ่มต้น ในระยะนี้องค์ประกอบกำลังจะเริ่มต้นการเดินทางและเข้าสู่ DOM ขั้นตอนนี้ประกอบด้วยวิธีการต่อไปนี้ซึ่งเรียกใช้ตามลำดับที่กำหนดไว้ล่วงหน้า
- getDefaultProps (): วิธีนี้ใช้เพื่อระบุค่าเริ่มต้นของ this.props . จะถูกเรียกก่อนที่จะมีการสร้างส่วนประกอบของคุณหรืออุปกรณ์ประกอบฉากใด ๆ จากผู้ปกครองจะถูกส่งผ่านเข้าไป
- getInitialState (): วิธีนี้ใช้เพื่อระบุ ค่าเริ่มต้นของ this.state ก่อนที่จะสร้างส่วนประกอบของคุณ
- componentWillMount (): นี่เป็นวิธีสุดท้ายที่คุณสามารถเรียกใช้ก่อนที่คอมโพเนนต์ของคุณจะแสดงผลใน DOM แต่ถ้าคุณโทร setState () ภายในวิธีนี้ส่วนประกอบของคุณจะไม่แสดงผลซ้ำ
- แสดงผล (): ธ คือเมธอดรับผิดชอบในการส่งคืนโหนด HTML รูทเดียวและต้องกำหนดไว้ในแต่ละองค์ประกอบ คุณสามารถกลับมา โมฆะ หรือ เท็จ ในกรณีที่คุณไม่ต้องการแสดงผลอะไรเลย.
- componentDidMount (): เมื่อคอมโพเนนต์ถูกแสดงผลและวางบน DOM สิ่งนี้ เรียกว่าวิธีการ คุณสามารถดำเนินการสืบค้น DOM ได้ที่นี่
ข. กำลังอัปเดตเฟส - เมื่อคอมโพเนนต์ถูกเพิ่มลงใน DOM พวกเขาสามารถอัปเดตและแสดงผลใหม่ได้เฉพาะเมื่อเกิดการเปลี่ยนแปลงสถานะ ทุกครั้งที่สถานะเปลี่ยนองค์ประกอบจะเรียกใช้ แสดงผล () อีกครั้ง. ส่วนประกอบใด ๆ ที่อาศัยเอาต์พุตของส่วนประกอบนี้จะเรียกมันว่า แสดงผล () อีกครั้ง. เสร็จแล้วเพื่อให้แน่ใจว่าคอมโพเนนต์ของเราแสดงเวอร์ชันล่าสุดของตัวเอง ดังนั้นในการอัพเดตสถานะส่วนประกอบสำเร็จจึงมีการเรียกใช้วิธีการต่อไปนี้ตามลำดับที่กำหนด:
- shouldComponentUpdate (): เมื่อใช้วิธีนี้คุณจะควบคุมพฤติกรรมการอัปเดตตัวเองของส่วนประกอบได้ หากคุณคืนค่าจริงจากวิธีนี้ส่วนประกอบจะอัปเดต หากวิธีนี้ส่งกลับไฟล์เท็จส่วนประกอบจะข้ามการอัปเดต
- componentWillUpdate (): ทีวิธีการของเขาเรียกว่า ญก่อนที่ส่วนประกอบของคุณกำลังจะอัปเดต ด้วยวิธีนี้คุณไม่สามารถเปลี่ยนสถานะส่วนประกอบได้โดยการโทร this.setState .
- แสดงผล (): หากคุณส่งคืนเท็จผ่าน shouldComponentUpdate () รหัสด้านใน แสดงผล () จะถูกเรียกอีกครั้งเพื่อให้แน่ใจว่าคอมโพเนนต์ของคุณแสดงอย่างถูกต้อง
- componentDidUpdate (): เมื่อส่วนประกอบได้รับการอัปเดตและแสดงผลแล้ววิธีนี้จะถูกเรียกใช้ คุณสามารถใส่รหัสใดก็ได้ในวิธีนี้ซึ่งคุณต้องการดำเนินการเมื่ออัปเดตส่วนประกอบแล้ว
ค. อุปกรณ์เปลี่ยนเฟส - หลังจาก คอมโพเนนต์ได้รับการแสดงผลใน DOM ครั้งเดียวที่คอมโพเนนต์จะอัปเดตนอกเหนือจากการเปลี่ยนแปลงสถานะคือเมื่อค่า prop เปลี่ยนไป ในทางปฏิบัติเฟสนี้จะทำงานคล้ายกับเฟสก่อนหน้า แต่แทนที่จะเป็นสถานะจะเกี่ยวข้องกับอุปกรณ์ประกอบฉาก ดังนั้นระยะนี้จึงมีวิธีการเพิ่มเติมเพียงวิธีเดียวจากการอัปเดตเฟส
ความแตกต่างระหว่าง java และ class
- componentWillReceiveProps (): วิธีนี้ส่งคืนอาร์กิวเมนต์หนึ่งรายการซึ่งมีค่า prop ใหม่ที่กำลังจะกำหนดให้กับส่วนประกอบ
วิธีการที่เหลือของวงจรชีวิตจะทำงานเหมือนกับวิธีการที่เราเห็นในระยะก่อนหน้านี้
- shouldComponentUpdate ()
- componentWillUpdate ()
- แสดงผล ()
- componentDidUpdate ()
ง.ขั้นตอนการยกเลิกการต่อเชื่อม -นี่เป็นช่วงสุดท้ายของวงจรชีวิตส่วนประกอบที่ส่วนประกอบถูกทำลายและนำออกจาก DOM อย่างสมบูรณ์ มีเพียงวิธีเดียว:
- componentWillUnmount (): เมื่อเรียกใช้วิธีนี้ส่วนประกอบของคุณจะถูกลบออกจาก DOM อย่างถาวรในวิธีนี้ ยคุณสามารถทำงานที่เกี่ยวข้องกับการล้างข้อมูลเช่นการลบผู้ฟังเหตุการณ์การหยุดตัวจับเวลา ฯลฯ
ต่อไปนี้เป็นแผนภาพวงจรชีวิตทั้งหมด:
สิ่งนี้นำเราไปสู่จุดสิ้นสุดของบล็อกเกี่ยวกับ React Components ฉันหวังว่าในบล็อกนี้ฉันจะสามารถอธิบายได้อย่างชัดเจนว่าส่วนประกอบของปฏิกิริยาคืออะไรใช้อย่างไร คุณสามารถอ้างถึงบล็อกของฉันได้ที่ ในกรณีที่คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ ReactJS
หากคุณต้องการฝึก React และต้องการพัฒนา UI ที่น่าสนใจด้วยตัวคุณเองให้ดูที่ โดย Edureka บริษัท การเรียนรู้ออนไลน์ที่เชื่อถือได้ซึ่งมีเครือข่ายผู้เรียนที่พึงพอใจมากกว่า 250,000 คนกระจายอยู่ทั่วโลก
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นแล้วเราจะติดต่อกลับไป