20 อันดับสูงสุดตอบคำถามสัมภาษณ์และคำตอบที่คุณต้องการทราบในปี 2022

React เป็นหนึ่งในเฟรมเวิร์ก JavaScript ที่เติบโตเร็วที่สุดในตลาดปัจจุบัน หากคุณเป็นนักพัฒนา Front End ที่ต้องการ เราได้รวบรวม คำถามสัมภาษณ์ React ที่สำคัญบางข้อ ที่จะช่วยให้คุณเรียนรู้แนวคิดหลักทั้งหมด

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

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

คำถามและคำตอบในการสัมภาษณ์ยอดนิยม

1. เปรียบเทียบ DOM จริงและ DOM เสมือน

แม้ว่าการอัปเดต DOM จริงจะช้า แต่ก็สามารถอัปเดต HTML ได้โดยตรง มันสร้าง DOM ใหม่หากองค์ประกอบอัปเดต อย่างไรก็ตาม การจัดการ DOM มีค่าใช้จ่ายสูงในกรณีนี้ และอาจทำให้หน่วยความจำสูญเสียไปมาก

Virtual DOM สามารถอัปเดตได้เร็วขึ้นและอัปเดต JSX หากองค์ประกอบอัปเดต ไม่สามารถอัปเดต HTML โดยตรง แต่การจัดการ DOM นั้นง่ายในแนวคิดการเขียนโปรแกรมนี้ และไม่มีปัญหาเรื่องความจำเสื่อม

2. อธิบาย React แบบง่ายๆ

React เป็นไลบรารี JavaScript ที่พัฒนาโดย Facebook ในปี 2011 และกลายเป็นโอเพ่นซอร์สในปี 2015 ซึ่งได้รับความนิยมในหมู่ชุมชนนักพัฒนาและบริษัทแต่ละราย React มีประโยชน์ในการพัฒนา UI บนมือถือและเว็บแบบโต้ตอบที่ซับซ้อนและโต้ตอบได้ ใช้แนวทางแบบส่วนประกอบสำหรับการสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ได้

3. ระบุคุณสมบัติบางอย่างของ React

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

4. ข้อดีของ React คืออะไร? นอกจากนี้ ให้ระบุข้อจำกัดบางประการด้วย

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

ทีนี้มาดูข้อเสียกันบ้าง

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

5. React JSX คืออะไร?

JSX เป็นรูปแบบย่อของ JavaScript XML มันแปลงแท็ก HTML เป็นองค์ประกอบ React จับความหมายของ JavaScript ด้วยไวยากรณ์เช่น HTML JSX แปลงแท็ก HTML เป็นองค์ประกอบตอบสนอง ไฟล์ประเภทดังกล่าวเข้าใจง่ายและส่งผลให้แอปพลิเคชันมีประสิทธิภาพและมีประสิทธิภาพสูง

6. เบราว์เซอร์สามารถอ่าน JSX ได้หรือไม่

ไม่ได้ เบราว์เซอร์สามารถอ่านได้เฉพาะวัตถุ JavaScript ดังนั้น เราจำเป็นต้องเปิดใช้งานเบราว์เซอร์เพื่ออ่าน JSX แบบฝึกหัดนี้เกี่ยวข้องกับการแปลงไฟล์ JSX เป็นวัตถุ JavaScript ก่อนส่งต่อไปยังเบราว์เซอร์ Transformers อย่าง Babel ก็ใช้ได้เหมือนกัน

7. อธิบายการทำงานของ DOM . เสมือน

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

1. UI ทั้งหมดจะแสดงผลใหม่เมื่อข้อมูลพื้นฐานเปลี่ยนแปลง
2. จากนั้น การแสดง DOM เสมือนใหม่จะถูกเปรียบเทียบกับการแสดงก่อนหน้านี้ และคำนวณความแตกต่าง
3. DOM จริงได้รับการอัปเดตโดยพิจารณาจากการเปลี่ยนแปลงหรือความแตกต่างที่แท้จริง

8. แยกความแตกต่างระหว่างปฏิกิริยาและเชิงมุม

Angular ใช้ DOM จริงและการผูกข้อมูลแบบสองทางเมื่อเปรียบเทียบกับ DOM เสมือนและการผูกข้อมูลทางเดียวใน React มีการดีบักรันไทม์และไม่มีการคอมไพล์การดีบักเวลาเช่น React Google ยังดูแล Angular ในขณะที่ React เป็นผลิตภัณฑ์ของ Facebook

9. “ทุกอย่างเป็นส่วนประกอบใน React” คุณเห็นด้วยหรือไม่?

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

10. จุดประสงค์ของการเรนเดอร์ () ใน React คืออะไร?

แต่ละองค์ประกอบใน React มีการแสดงผล () ซึ่งส่งคืนองค์ประกอบเดียวที่แสดงถึงองค์ประกอบ DOM ดั้งเดิม องค์ประกอบจะถูกจัดกลุ่มเข้าด้วยกันเมื่อต้องมีการแสดงผลองค์ประกอบ HTML มากกว่าหนึ่งรายการ องค์ประกอบจะถูกจัดกลุ่มภายในแท็กปิด เช่น <group>, <form>, <div> เป็นต้น เมื่อใดก็ตามที่เรียกใช้ฟังก์ชันนี้จะต้องส่งคืนผลลัพธ์เดียวกัน

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

11. พร็อพใน React คืออะไร?

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

12. อธิบายสถานะใน React

State เป็นหัวใจของส่วนประกอบใน React ที่เข้าถึงได้โดยใช้ this.state() โดยพื้นฐานแล้วรัฐเป็นแหล่งข้อมูลที่กำหนดการแสดงผลและพฤติกรรมของส่วนประกอบ ต่างจากอุปกรณ์ประกอบฉาก สถานะเป็นอ็อบเจ็กต์ที่เปลี่ยนแปลงได้ซึ่งสร้างส่วนประกอบแบบโต้ตอบ

อ่าน: คำถามและคำตอบสัมภาษณ์นักพัฒนา Python

13. อะไรคือเฟสในวงจรชีวิตของส่วนประกอบ React?

วงจรชีวิตของส่วนประกอบ React มีสามขั้นตอนหลัก เหล่านี้คือ:

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

14. refs ใช้ใน React อย่างไร?

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

15. ส่วนประกอบควบคุมเทียบกับส่วนประกอบที่ไม่มีการควบคุม

ความแตกต่างหลักระหว่างส่วนประกอบที่ควบคุมและไม่มีการควบคุมคือส่วนประกอบแรกรับค่าปัจจุบันผ่านอุปกรณ์ประกอบฉากและส่วนหลังผ่านผู้อ้างอิง ส่วนประกอบที่ควบคุมไม่รักษาสถานะของตนเอง เนื่องจากสามารถแจ้งการเปลี่ยนแปลงได้ผ่านการเรียกกลับ องค์ประกอบหลักควบคุมข้อมูลของตน ในทางกลับกัน ส่วนประกอบที่ไม่มีการควบคุมจะคงสถานะของตนไว้ และ DOM จะควบคุมข้อมูลของตน

อ่าน: คำถามและคำตอบในการสัมภาษณ์ Blockchain ยอดนิยม

16. อธิบายเหตุการณ์ใน React

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

17. คุณหมายถึงอะไรโดย Flux?

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

18. Redux คืออะไร? ส่วนประกอบของมันคืออะไร?

Redux เป็นคอนเทนเนอร์สถานะที่คาดเดาได้ซึ่งใช้สำหรับการจัดการสถานะของแอปพลิเคชัน JavaScript ใช้แผนผังสถานะเดียวหรือ 'Store' เพื่อจัดเก็บสถานะของแอปพลิเคชันทั้งหมดในที่เดียว

Redux ประกอบด้วยส่วนต่าง ๆ ดังต่อไปนี้:

• การกระทำ: วัตถุที่อธิบายสิ่งที่เกิดขึ้น
• ตัวลด: กำหนดว่าสถานะจะเปลี่ยนไปอย่างไร
• ร้านค้า: ต้นไม้ของแอปพลิเคชันทั้งหมดประกอบด้วยวัตถุและสถานะ
• ดู: แสดงข้อมูลที่ได้รับจาก Store

อ่าน: คำถามและคำตอบสัมภาษณ์ MongoDB

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

19. รีดิวเซอร์มีความสำคัญอย่างไร?

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

20. React Router คืออะไร?

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

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

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