ประเภทของส่วนประกอบ ReactJs ในการเขียนโปรแกรม

ส่วนประกอบใน ReactJs คืออะไร?

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

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

ประเภทของส่วนประกอบ ReactJs ในการเขียนโปรแกรม

1. องค์ประกอบการทำงาน

ส่วนประกอบการทำงานสามารถสร้างได้ง่ายๆ โดยการเขียนฟังก์ชัน Javascript เพื่อให้เฉพาะเจาะจง ส่วนประกอบการทำงานคือฟังก์ชันที่รับ Props เข้าและส่งคืน JSX ส่วนประกอบที่ทำงานอาจรับหรือไม่สามารถรับข้อมูลในรูปของพารามิเตอร์ได้ นอกจากนี้ ส่วนประกอบการทำงานไม่มีวิธีการหรือสถานะของวงจรชีวิต แต่สามารถเพิ่มได้โดยเพียงแค่ใช้ React Hooks ส่วนประกอบการทำงานนั้นง่ายต่อการดีบัก อ่านและทดสอบอยู่เสมอ

 // Functional Component Example import React from 'react'; const HelloWorld = () => { return ( <div> <p>Hello Emizen!</p> </div> ) } export default HelloEmizen;

ในภาพโค้ดด้านบน เป็นส่วนประกอบง่ายๆ ที่มีตัวแปรคงที่ “Hello Emizen” ตัวแปรคงที่ถูกกำหนดให้กับฟังก์ชันลูกศรที่ส่งคืน JSX ส่วนประกอบการทำงานไม่จำเป็นต้องเป็นฟังก์ชันลูกศร และยังสามารถประกาศได้ง่ายๆ ด้วยฟังก์ชัน JavaScript ปกติ ในเวลาเดียวกัน พร็อพยังสามารถส่งผ่านไปยังฟังก์ชัน และใช้เพื่อแสดงข้อมูลในโค้ด JSX

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

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

 // Class Component Exampleimport React จาก 'react'; class HelloWorld ขยาย React.Component {
   เรนเดอร์ () {
      กลับ (
         <div>
            <p>สวัสดีเอมิเซน!</p>
         </div>
      )
   }
}ส่งออกค่าเริ่มต้น HelloEmizen;

สามารถสังเกตได้ในตัวอย่างข้างต้นว่าองค์ประกอบคลาสใช้ส่วน extends React.Component หลังคลาส Hello Emizen จากนั้น ยังต้องใช้เมธอด render() เพื่อส่งคืนโค้ด JSX ในองค์ประกอบของคลาส เราสามารถประกาศสถานะ ตั้งค่าเป็นอ็อบเจ็กต์ JavaScript และใช้ props ให้อยู่ในขั้นเริ่มต้นและเปลี่ยนสถานะในเมธอด lifecycle มันจะต้องมี React Hooks เพื่อดำเนินการเหล่านี้ตามองค์ประกอบการทำงาน

3. ส่วนประกอบบริสุทธิ์

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

ความแตกต่างใหญ่ระหว่าง React.Component และ React.PureComponent คือส่วนประกอบบริสุทธิ์แสดง การเปรียบเทียบการเปลี่ยนแปลงสถานะอย่างตื้นเขิน ส่วนประกอบบริสุทธิ์จะจัดการโดยอัตโนมัติ shouldComponentUpdate()

React Components ถูกแสดงผลใหม่เป็นส่วนใหญ่เมื่อ:

• setState() เรียกว่า
• forceUpdate() เรียกว่า
• props ค่ามีการปรับปรุง

4. ส่วนประกอบระดับสูง

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

 // HOC Example import React from 'react'; import MyComponent from './components/MyComponent'; class HelloEmizen extends React.Component { render() { return( <div> {this.props.myArray.map((element) => ( <MyComponent data={element} key={element.key} /> ))} </div> ) } } export default HelloEmizen;

รูปภาพโค้ดด้านบนมีส่วนประกอบง่ายๆ ในการอธิบายส่วนประกอบระดับสูงกว่า นี่คือรหัสคีย์ this.props.myArray.map((element) => (<MyComponent />) ฟังก์ชันนี้ส่งคืนส่วนประกอบ จำนวนของส่วนประกอบนั้นขึ้นอยู่กับจำนวนขององค์ประกอบในอาร์เรย์ที่เรียกว่า HOC ฟังก์ชันนี้ใช้อาร์เรย์จากสถานะและแมปแต่ละองค์ประกอบในอาร์เรย์โดยแปลงทุกองค์ประกอบเป็นส่วนประกอบปฏิกิริยา

ต่อไปนี้เป็นบทสรุปอย่างง่ายของส่วนประกอบที่มีลำดับสูงกว่า:

1. รับข้อมูลจากอุปกรณ์ประกอบฉากหรือรัฐ
2. แมปเหนืออาร์เรย์และส่งคืนองค์ประกอบการเข้าถึงสำหรับทุกองค์ประกอบ

วิธีการแสดงส่วนประกอบ ReactJs?

สามารถทำตามขั้นตอนต่อไปนี้เพื่อแสดงองค์ประกอบ ReactJS:

• ก่อนอื่น คลาส ES6 ถูกสร้างขึ้นด้วยชื่อเดียวกันซึ่งขยาย React.Component
• เพิ่มวิธีการว่างเดียวที่เรียกว่า render()
• เนื้อหาของฟังก์ชันถูกย้ายไปยังเมธอด render()
• แทนที่ props ด้วย this.props ใน render()
• ในท้ายที่สุด ให้ลบการประกาศฟังก์ชันว่างที่เหลืออยู่

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

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

• ส่งออก : เมื่อมีการส่งออกโมดูลหรือไฟล์เฉพาะและใช้ในโมดูลอื่น จะเรียกว่า ส่งออก
• นำเข้า : เมื่อนำเข้าโมดูลหรือไฟล์เฉพาะและใช้ในโมดูลที่มีอยู่ จะเรียกว่านำเข้า

วงจรชีวิตของส่วนประกอบที่ทำปฏิกิริยา

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

ส่วนประกอบ React โดยทั่วไปมีสามขั้นตอนต่อไปนี้:

1. การติดตั้ง

เมื่อการกำหนดค่าเริ่มต้นของส่วนประกอบเสร็จสิ้นแล้ว ส่วนประกอบจะถูกติดตั้งบน DOM และแสดงผลบนเว็บเพจ ในที่นี้ React จะปฏิบัติตามขั้นตอนดีฟอลต์สำหรับ Naming Conventions ของฟังก์ชันที่กำหนดไว้ล่วงหน้าเท่านั้น ฟังก์ชันที่มี "Will" จะแสดงก่อนช่วงเฉพาะบางช่วง ในทำนองเดียวกัน ฟังก์ชันที่มีคำว่า "Did" จะแสดงหลังจากเฟสเสร็จสิ้น ขั้นตอนการติดตั้งของส่วนประกอบประกอบด้วยสองหน้าที่ดังต่อไปนี้:

• ฟังก์ชัน componentWillMount() : ฟังก์ชันนี้จะถูกเรียกใช้ก่อนที่คอมโพเนนต์จะถูกเมาต์บน DOM
• ฟังก์ชัน componentDidMount() : ตรงข้ามกับฟังก์ชันก่อนหน้า ฟังก์ชันนี้จะถูกเรียกใช้หลังจากติดตั้งส่วนประกอบบน DOM

2. การอัปเดต

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

3. การเลิกเมานท์

เป็นขั้นตอนความสมบูรณ์ของวงจรชีวิตส่วนประกอบ ในเฟสนี้ คอมโพเนนต์จะยกเลิกการต่อเชื่อมจาก DOM ฟังก์ชันต่อไปนี้เป็นสมาชิกเพียงตัวเดียวของฟังก์ชันนี้:

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

เราหวังว่าโพสต์นี้จะให้แนวคิดพื้นฐานแก่คุณเกี่ยวกับประเภทของส่วนประกอบ React และวิธีใช้งาน Emizentech เป็นบริษัทพัฒนาแอพชั้นนำที่พัฒนาเว็บ แอพมือถือแบบเนทีฟและแบบไฮบริด ดังนั้น หากคุณต้องการนักพัฒนา ReactJs มืออาชีพ โปรดติดต่อเรา