ส่วนประกอบของปฏิกิริยา - อุปกรณ์ประกอบฉากและสถานะใน ReactJS พร้อมตัวอย่าง



บล็อกนี้เกี่ยวกับ React Components จะพูดถึงพื้นฐานของส่วนประกอบวิธีสร้างขึ้นพร้อมกับวงจรชีวิตของส่วนประกอบปฏิกิริยาทั้งหมด

“ ในการตอบสนองทุกอย่างเป็นส่วนประกอบ”

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

ส่วนประกอบของปฏิกิริยาคืออะไร?

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





ตอนนี้เรามาทำความเข้าใจว่าส่วนประกอบเหล่านี้คืออะไร

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



แผนผัง UI - ส่วนประกอบของปฏิกิริยา - Edurekaสิ่งนี้ช่วยให้ 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 ขั้นตอน พวกเขาคือ:

  1. เฟสเริ่มต้น
  2. กำลังอัปเดตเฟส
  3. อุปกรณ์ประกอบฉากเปลี่ยนเฟส
  4. กำลังยกเลิกการต่อเชื่อมเฟส

แต่ละขั้นตอนเหล่านี้มีวิธีวงจรชีวิตบางอย่างซึ่งเฉพาะเจาะจงสำหรับพวกเขาเท่านั้น ตอนนี้เรามาดูกันว่าเกิดอะไรขึ้นในแต่ละขั้นตอนเหล่านี้

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

  1. getDefaultProps (): วิธีนี้ใช้เพื่อระบุค่าเริ่มต้นของ this.props . จะถูกเรียกก่อนที่จะมีการสร้างส่วนประกอบของคุณหรืออุปกรณ์ประกอบฉากใด ๆ จากผู้ปกครองจะถูกส่งผ่านเข้าไป
  2. getInitialState (): วิธีนี้ใช้เพื่อระบุ ค่าเริ่มต้นของ this.state ก่อนที่จะสร้างส่วนประกอบของคุณ
  3. componentWillMount (): นี่เป็นวิธีสุดท้ายที่คุณสามารถเรียกใช้ก่อนที่คอมโพเนนต์ของคุณจะแสดงผลใน DOM แต่ถ้าคุณโทร setState () ภายในวิธีนี้ส่วนประกอบของคุณจะไม่แสดงผลซ้ำ
  4. แสดงผล (): คือเมธอดรับผิดชอบในการส่งคืนโหนด HTML รูทเดียวและต้องกำหนดไว้ในแต่ละองค์ประกอบ คุณสามารถกลับมา โมฆะ หรือ เท็จ ในกรณีที่คุณไม่ต้องการแสดงผลอะไรเลย.
  5. componentDidMount (): เมื่อคอมโพเนนต์ถูกแสดงผลและวางบน DOM สิ่งนี้ เรียกว่าวิธีการ คุณสามารถดำเนินการสืบค้น DOM ได้ที่นี่

ข. กำลังอัปเดตเฟส - เมื่อคอมโพเนนต์ถูกเพิ่มลงใน DOM พวกเขาสามารถอัปเดตและแสดงผลใหม่ได้เฉพาะเมื่อเกิดการเปลี่ยนแปลงสถานะ ทุกครั้งที่สถานะเปลี่ยนองค์ประกอบจะเรียกใช้ แสดงผล () อีกครั้ง. ส่วนประกอบใด ๆ ที่อาศัยเอาต์พุตของส่วนประกอบนี้จะเรียกมันว่า แสดงผล () อีกครั้ง. เสร็จแล้วเพื่อให้แน่ใจว่าคอมโพเนนต์ของเราแสดงเวอร์ชันล่าสุดของตัวเอง ดังนั้นในการอัพเดตสถานะส่วนประกอบสำเร็จจึงมีการเรียกใช้วิธีการต่อไปนี้ตามลำดับที่กำหนด:

  1. shouldComponentUpdate (): เมื่อใช้วิธีนี้คุณจะควบคุมพฤติกรรมการอัปเดตตัวเองของส่วนประกอบได้ หากคุณคืนค่าจริงจากวิธีนี้ส่วนประกอบจะอัปเดต หากวิธีนี้ส่งกลับไฟล์เท็จส่วนประกอบจะข้ามการอัปเดต
  2. componentWillUpdate (): ทีวิธีการของเขาเรียกว่า ก่อนที่ส่วนประกอบของคุณกำลังจะอัปเดต ด้วยวิธีนี้คุณไม่สามารถเปลี่ยนสถานะส่วนประกอบได้โดยการโทร this.setState .
  3. แสดงผล (): หากคุณส่งคืนเท็จผ่าน shouldComponentUpdate () รหัสด้านใน แสดงผล () จะถูกเรียกอีกครั้งเพื่อให้แน่ใจว่าคอมโพเนนต์ของคุณแสดงอย่างถูกต้อง
  4. componentDidUpdate (): เมื่อส่วนประกอบได้รับการอัปเดตและแสดงผลแล้ววิธีนี้จะถูกเรียกใช้ คุณสามารถใส่รหัสใดก็ได้ในวิธีนี้ซึ่งคุณต้องการดำเนินการเมื่ออัปเดตส่วนประกอบแล้ว

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

ความแตกต่างระหว่าง java และ class
  1. componentWillReceiveProps (): วิธีนี้ส่งคืนอาร์กิวเมนต์หนึ่งรายการซึ่งมีค่า prop ใหม่ที่กำลังจะกำหนดให้กับส่วนประกอบ
    วิธีการที่เหลือของวงจรชีวิตจะทำงานเหมือนกับวิธีการที่เราเห็นในระยะก่อนหน้านี้
  2. shouldComponentUpdate ()
  3. componentWillUpdate ()
  4. แสดงผล ()
  5. componentDidUpdate ()

ง.ขั้นตอนการยกเลิกการต่อเชื่อม -นี่เป็นช่วงสุดท้ายของวงจรชีวิตส่วนประกอบที่ส่วนประกอบถูกทำลายและนำออกจาก DOM อย่างสมบูรณ์ มีเพียงวิธีเดียว:

  1. componentWillUnmount (): เมื่อเรียกใช้วิธีนี้ส่วนประกอบของคุณจะถูกลบออกจาก DOM อย่างถาวรในวิธีนี้ คุณสามารถทำงานที่เกี่ยวข้องกับการล้างข้อมูลเช่นการลบผู้ฟังเหตุการณ์การหยุดตัวจับเวลา ฯลฯ

ต่อไปนี้เป็นแผนภาพวงจรชีวิตทั้งหมด:

สิ่งนี้นำเราไปสู่จุดสิ้นสุดของบล็อกเกี่ยวกับ React Components ฉันหวังว่าในบล็อกนี้ฉันจะสามารถอธิบายได้อย่างชัดเจนว่าส่วนประกอบของปฏิกิริยาคืออะไรใช้อย่างไร คุณสามารถอ้างถึงบล็อกของฉันได้ที่ ในกรณีที่คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ ReactJS

หากคุณต้องการฝึก React และต้องการพัฒนา UI ที่น่าสนใจด้วยตัวคุณเองให้ดูที่ โดย Edureka บริษัท การเรียนรู้ออนไลน์ที่เชื่อถือได้ซึ่งมีเครือข่ายผู้เรียนที่พึงพอใจมากกว่า 250,000 คนกระจายอยู่ทั่วโลก

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นแล้วเราจะติดต่อกลับไป