คำถามและคำตอบสัมภาษณ์ React JS 40 อันดับแรก (2026)

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

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

React JS มอบโอกาสทางอาชีพมากมายให้กับผู้เชี่ยวชาญที่มีประสบการณ์ทางเทคนิคและความเชี่ยวชาญเฉพาะด้าน ไม่ว่าคุณจะเป็นมือใหม่หรือมือเก๋าที่มีประสบการณ์การทำงาน 5 หรือ 10 ปี การวิเคราะห์ทักษะและความเชี่ยวชาญทางเทคนิคเป็นสิ่งสำคัญ คำถามและคำตอบเหล่านี้จะช่วยให้หัวหน้าทีม ผู้จัดการ และนักพัฒนาพัฒนาทักษะและผ่านการสัมภาษณ์งานระดับสูงได้

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

คำถามและคำตอบสัมภาษณ์ React JS

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

1) อธิบาย Virtual DOM และการทำงานของการกระทบยอดใน React

คำตอบ:

Virtual DOM คือการแสดง UI ในหน่วยความจำที่ React ดูแลรักษาเพื่อคำนวณการเปลี่ยนแปลง UI อย่างมีประสิทธิภาพ เมื่อสถานะหรือพร็อพเปลี่ยนแปลง React จะเรนเดอร์ Virtual DOM tree ใหม่ จากนั้นจึงรัน ความแตกต่าง อัลกอริทึมเทียบกับทรีก่อนหน้าเพื่อค้นหาชุดการดำเนินการ DOM จริงขั้นต่ำที่จำเป็น กระบวนการนี้เรียกว่า การคืนดีช่วยลดความยุ่งยากของเลย์เอาต์และการรีโฟลว์เบราว์เซอร์ที่มีค่าใช้จ่ายสูง React กำหนด กุญแจ ให้กับองค์ประกอบต่างๆ ในรายการ เพื่อช่วยจับคู่โหนดต่างๆ ในทุกการเรนเดอร์ และใช้ฮิวริสติกส์ (เช่น การเปรียบเทียบประเภทและคีย์) เพื่อตัดสินใจว่าจะอัปเดต เรียงลำดับใหม่ หรือลบโหนด ประโยชน์ที่ได้รับ ได้แก่ การอัปเดตที่คาดการณ์ได้ พื้นที่ผิวสำหรับบั๊กที่เล็กลง และประสิทธิภาพที่ดีขึ้นใน UI ที่ซับซ้อน

ตัวอย่าง:

การแสดงรายการข้อความแชทแบบไดนามิก: โดยใช้ความเสถียร key ค่า (ID ข้อความ) จะมีการผนวกเฉพาะข้อความใหม่เข้ากับ DOM ในขณะที่โหนดที่มีอยู่ยังคงไม่เปลี่ยนแปลง ซึ่งจะช่วยหลีกเลี่ยงการเรนเดอร์ซ้ำที่ไม่จำเป็น

👉 ดาวน์โหลด PDF ฟรี: คำถามและคำตอบสัมภาษณ์ React JS

2) วงจรชีวิตส่วนประกอบประเภทต่างๆ ใน ​​React มีอะไรบ้าง และ Hooks แมปกับประเภทเหล่านี้อย่างไร

คำตอบ:

ส่วนประกอบของ React จะผ่านขั้นตอนการติดตั้ง การอัปเดต และการถอนการติดตั้ง ในส่วนประกอบคลาส วิธีการวงจรชีวิต เช่น componentDidMount, shouldComponentUpdate, componentDidUpdateและ componentWillUnmount ควบคุมผลข้างเคียง การตัดสินใจในการเรนเดอร์ และการล้างข้อมูล ในส่วนประกอบฟังก์ชัน ตะขอ ให้ความสามารถเทียบเท่า: useEffect จัดการเอฟเฟกต์หลังการเรนเดอร์; ฟังก์ชั่นการล้างข้อมูลภายใน useEffect รันเมื่อยกเลิกการติดตั้งหรือก่อนเอฟเฟกต์ถัดไป useMemo และ useCallback การควบคุมการจดจำ; และ useRef คงการอ้างอิงที่เปลี่ยนแปลงได้ไว้ตลอดการเรนเดอร์ ข้อดีของ Hooks ได้แก่ ความสามารถในการประกอบ (composability) ปัญหาการผูก "this" น้อยลง และการนำตรรกะกลับมาใช้ใหม่ได้ง่ายขึ้นผ่าน hooks แบบกำหนดเอง ในขณะที่ข้อเสียหลักคือความจำเป็นในการเรียนรู้กฎของ Hooks และการจัดการการอ้างอิง

ตอบพร้อมตัวอย่าง:

  • ผลการติดตั้ง: useEffect(() => fetchData(), []).
  • การล้างข้อมูลเมื่อยกเลิกการติดตั้ง: useEffect(() => { start(); return stop; }, []).

3) คุณตัดสินใจเลือกระหว่างการเรนเดอร์ฝั่งไคลเอ็นต์ (CSR), การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR), การสร้างไซต์คงที่ (SSG) และการสร้างใหม่คงที่แบบเพิ่มหน่วย (ISR) สำหรับแอปพลิเคชัน React อย่างไร

คำตอบ:

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

ตาราง: ข้อดีและข้อเสีย

เข้าใกล้ ข้อดี ข้อเสีย
ความรับผิดชอบต่อสังคม การโฮสต์ที่เรียบง่าย การโต้ตอบที่หลากหลาย การทาสีครั้งแรกช้ากว่า SEO อ่อนแอกว่า
SSR SEO ที่ยอดเยี่ยม ข้อมูลสดใหม่เมื่อโหลดครั้งแรก โหลดเซิร์ฟเวอร์ที่สูงขึ้น ความซับซ้อน
SSG รวดเร็ว ราคาถูก เป็นมิตรกับ CDN เนื้อหาเก่าจนกว่าจะสร้างใหม่
ISR รวดเร็วด้วยความสดที่ควบคุมได้ มีชิ้นส่วนเคลื่อนไหวที่ต้องจัดการมากขึ้น

4) ควรใช้กลยุทธ์การจัดการสถานะใด: สถานะท้องถิ่น, Context, Redux หรือไลบรารีแบบสอบถาม?

คำตอบ:

เลือกกระเป๋า เครื่องมือที่ง่ายที่สุด ที่จัดการกับลักษณะของปัญหา สถานะภายในส่วนประกอบผ่าน useState or useReducer เหมาะอย่างยิ่งสำหรับปัญหา UI ที่แยกจากกัน บริบท ใช้งานได้กับค่าที่อ่านเป็นหลักทั่วทั้งแอปพลิเคชัน (ธีม ตำแหน่ง ผู้ใช้ปัจจุบัน) แต่ไม่ได้รับการปรับให้เหมาะสมสำหรับการอัปเดตความถี่สูงทั่วทั้งต้นไม้ขนาดใหญ่ Redux หรือที่เก็บข้อมูลตามแหล่งที่มาของเหตุการณ์ที่คล้ายคลึงกันนั้นมีความโดดเด่นเมื่อคุณต้องการความสามารถในการคาดการณ์ การดีบักแบบเดินทางข้ามเวลา มิดเดิลแวร์ และการไหลของข้อมูลแบบทิศทางเดียวที่เข้มงวด การดึงข้อมูลไลบรารี (ตัวอย่างเช่น รูปแบบสไตล์ React Query) จัดการวงจรชีวิตของสถานะเซิร์ฟเวอร์ ได้แก่ กลยุทธ์การแคช การลบข้อมูลซ้ำซ้อน การดึงข้อมูล และการซิงโครไนซ์ เพื่อลดความซับซ้อน สถาปัตยกรรมเชิงปฏิบัตินิยมมักใช้ สถานะท้องถิ่น + บริบทสำหรับการกำหนดค่า + ไลบรารีสถานะเซิร์ฟเวอร์การสำรอง Redux ไว้สำหรับเวิร์กโฟลว์ที่ซับซ้อน

ตัวอย่าง:

แดชบอร์ดใช้ React Query สำหรับการแคช API, Context สำหรับธีม และ useReducer ภายในวิดเจ็ตที่ซับซ้อนสำหรับการจัดการเหตุการณ์ในพื้นที่

5) ความแตกต่างระหว่าง useEffect และ useLayoutEffect คืออะไร และแต่ละอย่างมีผลใช้เมื่อใด

คำตอบ:

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

ตอบพร้อมตัวอย่าง:

  • useEffect: ดึงโปรไฟล์ผู้ใช้หลังการเรนเดอร์
  • useLayoutEffect:วัดขนาดของปลายเครื่องมือเพื่อจัดวางก่อนการทาสี

เปรียบเทียบด่วน

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

6) อธิบายวิธีการทำงานของคีย์ในรายการและข้อผิดพลาดของการใช้ดัชนีอาร์เรย์

คำตอบ:

คีย์ช่วยให้ React reconciliation สามารถระบุรายการระหว่างการเรนเดอร์ได้อย่างแม่นยำ คีย์ที่เสถียรและมีเอกลักษณ์เฉพาะตัวช่วยให้ React สามารถเรียงลำดับใหม่ แทรก หรือลบรายการต่างๆ ได้โดยที่ DOM churn น้อยที่สุด การใช้ ดัชนีอาร์เรย์ เนื่องจากคีย์เป็นปัญหาเมื่อรายการสามารถเรียงลำดับใหม่ แทรก หรือลบได้ เนื่องจาก React อาจเชื่อมโยงสถานะก่อนหน้ากับองค์ประกอบที่ไม่ถูกต้อง ซึ่งก่อให้เกิดบั๊กเล็กๆ น้อยๆ (เช่น ค่าอินพุตหรือแอนิเมชันไม่ถูกต้อง) แนวทางปฏิบัติที่ดีที่สุดคือการใช้ตัวระบุเฉพาะโดเมนที่ไม่สามารถเปลี่ยนแปลงได้ เช่น ID ของฐานข้อมูล หากรายการเป็นแบบคงที่อย่างแท้จริงและไม่มีการเรียงลำดับใหม่ ดัชนีก็ยอมรับได้ แต่นี่เป็นข้อยกเว้นมากกว่ากฎ

ตัวอย่าง:

บอร์ด Kanban ที่ลากได้ควรใช้ ID การ์ด ไม่ใช่ดัชนี เพื่อรักษาเอกลักษณ์ของส่วนประกอบในระหว่างการลากและวาง

บทความที่เกี่ยวข้อง

7) เทคนิคการจดจำใช้ใน React ที่ไหน และมีข้อดีและข้อเสียอะไรบ้าง?

คำตอบ:

Memoization ช่วยลดการคำนวณที่ไม่จำเป็นและการเรนเดอร์ซ้ำโดยนำผลลัพธ์ก่อนหน้ามาใช้ซ้ำเมื่ออินพุตไม่มีการเปลี่ยนแปลง ใน React React.memo เอาท์พุตส่วนประกอบแคช useMemo แคชการคำนวณราคาแพงและ useCallback บันทึกอัตลักษณ์ฟังก์ชันที่ส่งต่อไปยังฟังก์ชันย่อย ข้อดีหลักคือความเสถียรของประสิทธิภาพและการใช้งาน CPU ที่ลดลงภายใต้การโต้ตอบที่หนักหน่วง ข้อเสีย ได้แก่ ความซับซ้อน บั๊กแคชเก่าที่อาจเกิดขึ้นหากการอ้างอิงไม่ถูกต้อง และโอเวอร์เฮดของหน่วยความจำ

ตาราง: วิธีการจดจำที่แตกต่างกัน

ประเภท จุดมุ่งหมาย ปัจจัยทั่วไปที่ต้องพิจารณา
React.memo(Component) ข้ามการเรนเดอร์ซ้ำหากพร็อพมีขนาดเท่ากันตื้น ความผันผวนของทรัพย์สิน ต้นทุนเด็ก
useMemo(fn, deps) แคชค่าที่คำนวณ ต้นทุนการประมวลผลเทียบกับหน่วยความจำ
useCallback(fn, deps) เอกลักษณ์ฟังก์ชันที่เสถียร ความถูกต้องของการอ้างอิง

ตอบพร้อมตัวอย่าง:

จดจำชุดข้อมูลที่กรองและเรียงลำดับสำหรับกริดโดยใช้ useMemoและห่อส่วนประกอบตัวเรนเดอร์เซลล์ด้วย React.memo เพื่อหลีกเลี่ยงการเรนเดอร์ซ้ำอีกครั้ง

8) คุณชอบส่วนประกอบแบบควบคุมหรือแบบควบคุมสำหรับแบบฟอร์มมากกว่ากัน? อธิบายข้อดี ข้อเสีย และประเภทของสถานะแบบฟอร์ม

คำตอบ:

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

ตัวอย่าง:

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

9) คุณจะใช้ Context เมื่อใดเทียบกับ Custom Hook และความแตกต่างระหว่างทั้งสองคืออะไรในเชิงแนวคิด?

คำตอบ:

บริบท คือ กลไกการขนส่ง สำหรับค่าที่ส่วนประกอบต่างๆ จำเป็นต้องใช้ โดยหลีกเลี่ยงการเจาะ prop มันไม่ได้จัดการสถานะด้วยตัวเอง แต่เพียงเปิดเผยสถานะให้กับลูกหลานเท่านั้น ตะขอที่กำหนดเอง ห่อหุ้มตรรกะที่นำกลับมาใช้ใหม่ได้ ซึ่งประกอบด้วยสถานะ เอฟเฟกต์ และบริการภายนอก ซึ่งส่งคืนค่าและฟังก์ชันต่างๆ ใช้ Context เพื่อกำหนดค่าที่ใช้ร่วมกันโดยเน้นการอ่านเป็นหลัก หรือเพื่อเปิดเผย store และใช้ custom hooks เพื่อนำพฤติกรรมของ store ไปใช้งาน หรือเพื่อจัดการข้อกังวลต่างๆ เช่น การตรวจสอบสิทธิ์ แฟล็กฟีเจอร์ หรือนโยบายการดึงข้อมูล ทั้งสองอย่างนี้เป็นส่วนเสริมซึ่งกันและกัน: รูปแบบทั่วไปคือ useAuth() เป็นตะขอแบบกำหนดเองที่รองรับโดย AuthContext.

ตอบพร้อมตัวอย่าง:

AuthProvider จัดหาผู้ใช้และโทเค็นผ่านบริบท useAuth จัดการผลข้างเคียงของการเข้าสู่ระบบ รีเฟรช และออกจากระบบ

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

คำตอบ:

การปรับแต่งประสิทธิภาพเริ่มต้นด้วยการวัดผล ระบุเส้นทางที่ช้าโดยใช้ React DevTools Profiler และแผงประสิทธิภาพเบราว์เซอร์ เพื่อค้นหาจุดร้อนในการปรับยอดและคอมมิตที่มีค่าใช้จ่ายสูง กลยุทธ์ประกอบด้วย ท้องถิ่นของรัฐ (ให้รัฐอยู่ใกล้ผู้บริโภค) การบันทึก (React.memo, useMemo, useCallback), รายการเสมือนจริง สำหรับรายการยาว การแยกโค้ด ด้วยการโหลดแบบขี้เกียจเพื่อลดมัดเริ่มต้น และ การดีบาวน์หรือการควบคุมความเร็ว เหตุการณ์ความถี่สูง สำหรับข้อมูลที่ได้รับการสนับสนุนจากเซิร์ฟเวอร์ ให้ใช้การแคชกับไลบรารีคิวรีและใช้ประโยชน์จาก เป็นมิตรกับความระทึกขวัญ รูปแบบต่างๆ เพื่อการโหลดที่ราบรื่นยิ่งขึ้น ระวังจุดสำคัญในวงจรชีวิต เช่น เอฟเฟกต์ที่ทำงานบ่อยเกินไปเนื่องจากอาร์เรย์ที่มีการอ้างอิงที่กว้าง หรือส่วนประกอบที่แสดงผลซ้ำเนื่องจากค่าบริบทที่เปลี่ยนแปลงบ่อยครั้ง

ตอบพร้อมตัวอย่าง:

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

11) ความแตกต่างระหว่าง props และ state ใน React คืออะไร

คำตอบ:

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

ตารางความแตกต่างที่สำคัญ:

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

ตัวอย่าง:

A <Button color="blue" /> ใช้พร็อพเพื่อตัดสินใจเลือกสีในขณะที่ clicked บูลีนในสถานะสลับการตอบรับภาพ

12) อธิบายรูปแบบสถาปัตยกรรมส่วนประกอบใน React และวิธีการจำแนกส่วนประกอบที่แตกต่างกัน

คำตอบ:

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

  1. ส่วนประกอบการนำเสนอ (แบบโง่ๆ) – เน้นที่ UI รับข้อมูลผ่านอุปกรณ์ประกอบฉาก และจัดการสถานะไม่มากนัก
  2. ส่วนประกอบคอนเทนเนอร์ (สมาร์ท) – จัดการตรรกะ ดึงข้อมูล และจัดการสถานะ รวมถึงแสดงส่วนประกอบการนำเสนอ
  3. ส่วนประกอบลำดับสูง (HOCs) – ฟังก์ชันที่นำส่วนประกอบมาส่งคืนเวอร์ชันที่ปรับปรุงแล้วพร้อมกับลักษณะการทำงานเพิ่มเติม
  4. ส่วนประกอบบริสุทธิ์ – เพิ่มประสิทธิภาพการทำงานโดยการเปรียบเทียบอุปกรณ์ประกอบฉากและรัฐอย่างผิวเผิน
  5. องค์ประกอบเชิงฟังก์ชันเทียบกับองค์ประกอบระดับคลาส – ปัจจุบันเลือกใช้ส่วนประกอบฟังก์ชัน (พร้อมฮุก) เพื่อความสามารถในการอ่านและประสิทธิภาพ

ตัวอย่าง:

A <UserProfile /> ส่วนประกอบอาจเป็นการนำเสนอ การรับข้อมูลผู้ใช้ ในขณะที่ <UserProfileContainer /> ดึงข้อมูลและจัดการวงจรชีวิตของมัน

13) React จัดการขอบเขตข้อผิดพลาดอย่างไร และเหตุใดจึงสำคัญ?

คำตอบ:

ขอบเขตข้อผิดพลาด เป็นส่วนประกอบพิเศษของ React ที่จับ Javaข้อผิดพลาดของสคริปต์จะอยู่ที่ตำแหน่งใดในโครงสร้างย่อยของคอมโพเนนต์ระหว่างการเรนเดอร์ เมธอดวงจรชีวิต หรือคอนสตรัคเตอร์ ข้อผิดพลาดเหล่านี้จะป้องกันไม่ให้แอปพลิเคชันทั้งหมดหยุดทำงานโดยแยกข้อผิดพลาดไปยังซับทรีที่เฉพาะเจาะจง คุณสามารถนำไปใช้งานโดยใช้ componentDidCatch(error, info) และ static getDerivedStateFromError() ในส่วนประกอบของคลาส

ข้อดี:

  • รักษาเสถียรภาพของ UI โดยแสดง UI สำรอง
  • จับภาพและบันทึกข้อผิดพลาดเพื่อการวิเคราะห์
  • ป้องกันการถอดแบบเรียงซ้อน

ตัวอย่าง:

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  render() { return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children; }
}

14) React Fragments คืออะไร และแตกต่างจาก wrapper อย่างไร องค์ประกอบ?

คำตอบ:

เกิดปฏิกิริยา เศษเล็กเศษน้อย (<></>) ช่วยให้คุณจัดกลุ่มองค์ประกอบหลายรายการได้โดยไม่ต้องเพิ่มโหนดเพิ่มเติมลงใน DOM ซึ่งจำเป็นสำหรับโครงสร้างที่สะอาดขึ้น โดยเฉพาะในรายการ ตาราง และ HTML แบบซีแมนติก ซึ่ง wrapper เพิ่มเติมอาจทำให้เกิดปัญหาด้านเค้าโครงหรือการเข้าถึงได้ ซึ่งแตกต่างจาก wrapper <div>s ส่วนต่างๆ จะไม่ถูกเรนเดอร์ไปที่ DOM และด้วยเหตุนี้จึงมีประสิทธิภาพและข้อได้เปรียบด้านความหมาย

ตัวอย่าง:

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

ตารางความแตกต่าง:

ปัจจัย ส่วน <div> เสื้อคลุม
เอาท์พุต DOM ไม่มี เพิ่มโหนดพิเศษ
ใช้กรณี การจัดกลุ่มเชิงโครงสร้าง การจัดรูปแบบหรือเค้าโครง
ประสิทธิภาพ ดีกว่า ค่าใช้จ่ายเพิ่มเติมเล็กน้อย

15) คุณจะใช้ React Hook ตัวใดเพื่อเพิ่มประสิทธิภาพการทำงาน และทำไม?

คำตอบ:

ส่วนประกอบ React ที่ไวต่อประสิทธิภาพมักจะอาศัย ตะขอช่วยจำ และ ขี้เกียจโหลด เพื่อลดงานซ้ำซ้อน หลักการทั่วไปมีดังนี้:

  • useMemo → แคชผลลัพธ์ที่ต้องใช้การคำนวณจำนวนมาก
  • useCallback → ป้องกันการเรนเดอร์ย่อยที่ไม่จำเป็นเนื่องจากการเปลี่ยนแปลงตัวตนของฟังก์ชัน
  • useTransition → เลื่อนการอัปเดตที่ไม่เร่งด่วนเพื่อให้ UI ราบรื่นยิ่งขึ้น
  • useDeferredValue → ชะลอการคำนวณหนักจนกว่าจะมีการโต้ตอบทันที

ตัวอย่าง:

กริดข้อมูลขนาดใหญ่ที่ใช้ useMemo สำหรับผลลัพธ์ที่กรองแล้วสามารถลดการใช้ CPU ลงได้ 50% หรือมากกว่านั้น

ข้อดี:

  • ลดการเรนเดอร์ที่สูญเปล่า
  • ช่วยให้ UI ตอบสนองได้ดีแม้ภายใต้ภาระงาน

ข้อเสีย:

  • จำเป็นต้องมีความแม่นยำในการอ้างอิง อาจเกิดข้อผิดพลาดของแคชเก่าได้หากจัดการไม่ถูกต้อง

16) React Portals คืออะไร และมีข้อดีอะไรบ้าง?

คำตอบ:

พอร์ทัล อนุญาตให้คอมโพเนนต์ React แสดงผลลูกในโหนด DOM นอกลำดับชั้นหลัก โดยทั่วไปสำหรับโมดอล ทูลทิปส์ หรือดรอปดาวน์ที่ต้อง "เลี่ยง" บริบทโอเวอร์โฟลว์หรือการซ้อนภาพ ใช้งานโดยใช้ ReactDOM.createPortal(child, container)พวกมันรักษาความสอดคล้องของเหตุการณ์ที่เกิดขึ้น ดังนั้นตัวจัดการเหตุการณ์จึงทำงานราวกับว่าองค์ประกอบยังคงอยู่ในลำดับชั้นเดิม

ตารางข้อดี:

ความได้เปรียบ Descriptไอออน
ความเป็นอิสระทางโครงสร้าง เรนเดอร์ภายนอกต้นไม้หลัก
การควบคุม CSS/การซ้อน หลีกเลี่ยง overflow: hidden หรือปัญหาดัชนี z
การเผยแพร่เหตุการณ์ เหตุการณ์สังเคราะห์ของ React ยังคงฟองอากาศอย่างถูกต้อง
ความสามารถในเรอุส เหมาะสำหรับการซ้อนทับทั่วโลก

ตัวอย่าง:

createPortal(<ModalContent />, document.getElementById('modal-root'));

17) อธิบายว่า React Router จัดการการนำทางและสถานะระหว่างหน้าต่างๆ อย่างไร

คำตอบ:

React Router เป็นไลบรารีการกำหนดเส้นทางแบบประกาศที่ซิงโครไนซ์ UI กับ URL ของเบราว์เซอร์ โดยใช้ ประวัติ API เพื่อจัดการประวัติเซสชันโดยไม่ต้องโหลดซ้ำทั้งหน้า แนวคิดหลักประกอบด้วย เส้นทาง, การเชื่อมโยงและ ทางออก สำหรับการกำหนดเส้นทางแบบซ้อนกัน ไลบรารีรองรับ เส้นทางแบบไดนามิก, พารามิเตอร์ URLและ ตะขอสำหรับนำทาง (useNavigate, useParams, useLocation) React Router v6 แนะนำไวยากรณ์และ API ข้อมูลที่เรียบง่ายสำหรับ loader และ การกระทำ ฟังก์ชั่นปรับปรุงการรวม SSR และการจัดการสถานะ

ตัวอย่าง:

<Route path="/user/:id" element={<UserProfile />} />

ประโยชน์ที่ได้รับ:

  • เปิดใช้งานการนำทางหน้าเดียว
  • รักษาตำแหน่งการเลื่อนและประวัติ
  • ผสานรวมได้อย่างชัดเจนกับการโหลดแบบขี้เกียจเพื่อประสิทธิภาพที่ดีขึ้น

18) มีวิธีจัดการผลข้างเคียงในแอปพลิเคชัน React อย่างไรบ้าง?

คำตอบ:

ผลข้างเคียงหมายถึงการกระทำที่ส่งผลต่อบางสิ่งที่อยู่นอกเหนือขอบเขตของส่วนประกอบ (การเรียก API, การจัดการ DOM, การสมัครสมาชิก) เครื่องมือหลักๆ ได้แก่:

  1. useEffect สำหรับเอฟเฟกต์ฝั่งไคลเอนต์หลังการเรนเดอร์
  2. ตัวจัดการเหตุการณ์ เพื่อผลลัพธ์ที่ขับเคลื่อนโดยผู้ใช้
  3. ตะขอแบบกำหนดเอง เพื่อนำตรรกะผลกลับมาใช้ใหม่ (ตัวอย่างเช่น useFetch).
  4. มิดเดิ้ล (เช่น Redux Saga หรือ Thunk) สำหรับการประสานงานแบบอะซิงค์ที่ซับซ้อน
  5. React Query หรือ SWR สำหรับการจัดการสถานะเซิร์ฟเวอร์และวงจรชีวิตการดึงข้อมูลใหม่โดยอัตโนมัติ

ตัวอย่าง:

A useEffect ดึงข้อมูลเมื่อติดตั้งแล้ว:

useEffect(() => { fetchData(); }, []);

ข้อดี:

การจัดการแบบอะซิงค์ที่เรียบง่าย การหุ้มห่อที่ดีขึ้น และการควบคุมวงจรชีวิตที่ชัดเจนยิ่งขึ้น

19) React เป็นเฟรมเวิร์กหรือไลบรารี? อธิบายปัจจัยที่กำหนดความแตกต่าง

คำตอบ:

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

ตารางเปรียบเทียบ:

ปัจจัย ไลบรารี (React) เฟรมเวิร์ก (Angular, Vue)
ขอบเขต ดูการแสดงผล สถาปัตยกรรม MVC เต็มรูปแบบ
มีความเห็น ต่ำ จุดสูง
Control ขับเคลื่อนโดยนักพัฒนา ขับเคลื่อนโดยกรอบงาน
ความยืดหยุ่น จุดสูง จำกัดโดยข้อตกลง
เส้นโค้งการเรียนรู้ ปานกลาง สูงขึ้นเนื่องจากความซับซ้อน

ระบบนิเวศของ React (Redux, Router, Query, Next.js) ก่อให้เกิด "เมตาเฟรมเวิร์ก" ได้อย่างมีประสิทธิภาพ โดยเสนอความสามารถในการสร้างแบบโมดูลาร์ที่ช่วยให้นักพัฒนาสามารถสร้างสถาปัตยกรรมของตนเองได้

20) คุณควรใช้ React.lazy และ Suspense เมื่อใด และมีข้อดีอะไรบ้าง?

คำตอบ:

React.lazy ช่วยให้ การแยกโค้ด โดยการโหลดส่วนประกอบแบบไดนามิกเฉพาะเมื่อจำเป็นเท่านั้น Suspense มอบ UI สำรองไว้จนกว่าส่วนประกอบจะพร้อมใช้งาน การผสมผสานนี้ช่วยปรับปรุงประสิทธิภาพการโหลดเริ่มต้นและการตอบสนองที่ผู้ใช้รับรู้

ตัวอย่าง:

const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
  <Chart />
</Suspense>

ตารางข้อดี:

ความได้เปรียบ คำอธิบาย
ประสิทธิภาพ โหลดโค้ดตามความต้องการ
ประสบการณ์ของผู้ใช้ การโหลดแบบถอยหลังอย่างสง่างาม
ขนาดมัด มัดเริ่มต้นที่เล็กกว่า
ความง่าย Native React API การตั้งค่าขั้นต่ำ

ปฏิบัติที่ดีที่สุด:

  • ห่อส่วนประกอบที่ขี้เกียจหลาย ๆ ชิ้นไว้ในขอบเขต Suspense หนึ่งอัน
  • ใช้ตัวบ่งชี้สำรองที่มีความหมายเพื่อการเข้าถึง

21) อธิบายว่า React Server Components (RSCs) คืออะไรและมีข้อดีอะไรบ้าง

คำตอบ:

React Server Components (RSCs) เป็นนวัตกรรมสำคัญที่เปิดตัวเพื่อเพิ่มประสิทธิภาพและประสบการณ์ของนักพัฒนาโดยอนุญาตให้ส่วนประกอบต่างๆ แสดงผลบนเซิร์ฟเวอร์โดยไม่ต้องส่ง Javaสคริปต์ถึงลูกค้าพวกมันจะดำเนินการทั้งหมดบนเซิร์ฟเวอร์ โดยดึงข้อมูล อ่านจากฐานข้อมูล หรือดำเนินการ I/O อย่างปลอดภัยก่อนจะสตรีมเอาท์พุตแบบอนุกรมไปยังไคลเอนต์

ข้อดี:

  • ขนาดมัดเล็กลง — ไม่มีไคลเอนต์ JS สำหรับลอจิกเฉพาะเซิร์ฟเวอร์
  • ประสิทธิภาพที่เพิ่มขึ้น — การดึงข้อมูลฝั่งเซิร์ฟเวอร์ช่วยลดการเกิดน้ำตก
  • ⁠ความปลอดภัย — โค้ดที่ละเอียดอ่อนจะไม่สามารถเข้าถึงเบราว์เซอร์ได้
  • การแคชที่ดีขึ้น — ส่วนประกอบของเซิร์ฟเวอร์สามารถแคชได้ที่ขอบ

ตัวอย่าง:

A <ProductList /> ส่วนประกอบเซิร์ฟเวอร์สามารถดึงข้อมูลจากฐานข้อมูลโดยตรงและส่งผลลัพธ์ไปยัง <ProductCard /> ส่วนประกอบของไคลเอนต์

22) ความแตกต่างระหว่าง React hydration และ reconciliation คืออะไร?

คำตอบ:

แม้ว่าทั้งสองเงื่อนไขจะเกี่ยวข้องกับการอัปเดต UI ของ React แต่จุดประสงค์ของทั้งสองเงื่อนไขนั้นแตกต่างกัน:

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

ตารางเปรียบเทียบ:

ปัจจัย การประนีประนอม ไฮเดร
ทริกเกอร์ การเรนเดอร์ซ้ำของไคลเอนต์ การโหลดหน้าเริ่มต้น (SSR)
จุดมุ่งหมาย อัปเดต DOM อย่างมีประสิทธิภาพ ทำให้ SSR HTML เป็นแบบโต้ตอบได้
ขอบเขต ความแตกต่าง DOM เสมือน การผูกเหตุการณ์ + การแนบสถานะใหม่
เวลา หลายครั้ง หลังจากเรนเดอร์ SSR ครั้งหนึ่ง

ตัวอย่าง:

หลังจากที่แอป Next.js ส่ง HTML ที่แสดงผลล่วงหน้าแล้ว React ชุ่มชื้น เพื่อให้ส่วนประกอบต่างๆ ตอบสนองต่อเหตุการณ์โดยไม่ต้องเรนเดอร์ทุกอย่างใหม่

23) การเรนเดอร์พร้อมกันช่วยปรับปรุงประสบการณ์ผู้ใช้ใน React 18+ ได้อย่างไร

คำตอบ:

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

ประโยชน์ที่ได้รับ:

  • การโต้ตอบที่ราบรื่นและตอบสนองได้ดี
  • การแบ่งเวลาเพื่อป้องกันการบล็อคเธรดหลัก
  • การกำหนดลำดับความสำคัญที่คาดเดาได้เพื่อ UX ที่ดีขึ้น

ตัวอย่าง:

const [isPending, startTransition] = useTransition();
startTransition(() => setFilteredList(filter(items, term)));

ที่นี่ การพิมพ์ยังคงลื่นไหลแม้จะกรองชุดข้อมูลขนาดใหญ่ เนื่องจาก React กำหนดการอัปเดตที่ไม่เร่งด่วนพร้อมกัน

24) มีวิธีการทดสอบในแอปพลิเคชัน React อะไรบ้าง

คำตอบ:

การทดสอบ React สามารถแบ่งประเภทได้เป็น หน่วย, บูรณาการและ จบสิ้น ระดับ

ตารางวิธีการทดสอบ:

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

ปฏิบัติที่ดีที่สุด:

  • ชอบ ไลบรารีการทดสอบ React มากกว่าเอนไซม์ (สมัยใหม่ เน้น DOM)
  • จำลองการใช้ API msw (พนักงานบริการจำลอง)
  • หลีกเลี่ยงการทดสอบรายละเอียดการใช้งาน แต่ให้เน้นที่พฤติกรรม

ตัวอย่าง:

test('renders user name', () => {
  render(<User name="Alice" />);
  expect(screen.getByText(/Alice/)).toBeInTheDocument();
});

25) เครื่องมือสร้างและตัวรวมข้อมูลใดที่นิยมใช้กับ React มากที่สุด และมีความแตกต่างกันอย่างไร

คำตอบ:

React สามารถบูรณาการกับ bundler และ compiler หลายตัวได้ โดยแต่ละตัวได้รับการปรับให้เหมาะสมสำหรับกรณีการใช้งานที่แตกต่างกัน

ตารางเปรียบเทียบ:

เครื่องมือ ลักษณะ ข้อดี ข้อเสีย
webpack กำหนดค่าได้สูง เป็นผู้ใหญ่ อุดมไปด้วยปลั๊กอิน การตั้งค่าที่ซับซ้อน
ชีวิต เซิร์ฟเวอร์พัฒนาที่ใช้ ESM ความเร็วสูง HMR ทันที ไวยากรณ์สมัยใหม่ รองรับปลั๊กอินรุ่นเก่าที่จำกัด
Parcel การกำหนดค่าเป็นศูนย์ การเพิ่มประสิทธิภาพอัตโนมัติ Less มีความยืดหยุ่น
สร้าง คอมไพเลอร์แบบ Go-based รวดเร็วมาก ปลั๊กอินระบบนิเวศน้อยลง

ตัวอย่าง:

โครงการสมัยใหม่มักจะใช้ ชีวิต เพื่อความเร็วในการพัฒนาและ สร้าง ในไปป์ไลน์ CI/CD เพื่อการสร้างการผลิตที่มีประสิทธิภาพ

26) Next.js ขยายความสามารถของ React ได้อย่างไร

คำตอบ:

Next.js เป็น เฟรมเวิร์ก React นำเสนอสถาปัตยกรรมที่ปรับแต่งได้สำหรับการกำหนดเส้นทาง SSR และการสร้างแบบคงที่ นำเสนอโมเดลการเรนเดอร์แบบไฮบริด เส้นทาง API และฟีเจอร์การปรับใช้ที่พร้อมใช้งานแบบ Edge

ข้อดี:

  • Built-in SSR/SSG/ISR สนับสนุน
  • แอปเราเตอร์ พร้อมด้วยส่วนประกอบของ React Server
  • การเพิ่มประสิทธิภาพภาพ และ มิดเดิ้ล เพื่อประสิทธิภาพและความปลอดภัย
  • เส้นทาง API ง่าย ๆ สำหรับฟังก์ชันที่ไม่มีเซิร์ฟเวอร์

ตัวอย่าง:

app/page.js สำหรับหน้าที่แสดงผล SSR app/api/route.js สำหรับจุดสิ้นสุดของเซิร์ฟเวอร์

ในการสรุปNext.js ช่วยให้สามารถสร้างแอป React ระดับการผลิตได้ด้วยการกำหนดค่าขั้นต่ำ

27) ข้อผิดพลาดทั่วไปเกี่ยวกับประสิทธิภาพใน React มีอะไรบ้าง และคุณจะหลีกเลี่ยงได้อย่างไร

คำตอบ:

ข้อผิดพลาดทั่วไปเกี่ยวกับประสิทธิภาพการทำงานของ React ได้แก่:

  1. การเรนเดอร์ซ้ำที่ไม่จำเป็น — แก้ไขโดยใช้ React.memo หรือการแยกส่วนประกอบ
  2. การสร้างวัตถุ/อาร์เรย์แบบอินไลน์ - ใช้ useMemo เพื่อการอ้างอิงที่มั่นคง
  3. รายการขนาดใหญ่ — การนำการสร้างหน้าต่างมาใช้ (react-window, react-virtualized).
  4. การคำนวณหนัก — บันทึกหรือถ่ายโอนไปยังเว็บเวิร์กเกอร์
  5. การใช้บริบทมากเกินไป — การอัพเดตบ่อยครั้งจะแพร่กระจายอย่างล้ำลึก ชอบสถานะที่ได้รับมา

ตัวอย่าง:

ถ้าคุณผ่าน { a: 1 } อินไลน์กับคอมโพเนนต์ที่บันทึกไว้ ระบบจะเรนเดอร์ซ้ำในแต่ละการเรนเดอร์หลัก แก้ไขโดยการบันทึกวัตถุ

ตารางเคล็ดลับประสิทธิภาพการทำงาน:

»Ñ­ËÒ เทคนิคการเพิ่มประสิทธิภาพ
การเรนเดอร์ซ้ำ React.memo, useCallback
การคำนวณราคาแพง useMemo, คนงานเว็บ
ชุดข้อมูลขนาดใหญ่ Virtualization
การอัปเดตบริบทบ่อยครั้ง ระบุรัฐ

28) อธิบายความแตกต่างระหว่าง useReducer และ useState

คำตอบ:

ทั้งสองตัวทำหน้าที่จัดการสถานะ แต่มีความแตกต่างกันในด้านความซับซ้อนและการควบคุม

  • useState เหมาะอย่างยิ่งสำหรับการเปลี่ยนสถานะแบบแยกส่วนที่เรียบง่าย
  • useReducer รวมตรรกะสถานะที่ซับซ้อนไว้ในศูนย์กลาง ฟังก์ชันลดโดยใช้ dispatch การดำเนินการเพื่อการอัปเดตที่คาดเดาได้

ตารางเปรียบเทียบ:

ปัจจัย ใช้สถานะ ใช้ลด
วากยสัมพันธ์ [value, setValue] [state, dispatch]
ความซับซ้อน ง่าย ปานกลางถึงซับซ้อน
ใช้กรณี รัฐเอกราช สถานะที่เกี่ยวข้องหรือซ้อนกัน
การแก้จุดบกพร่อง Less ละเอียด ง่ายขึ้นผ่านการดำเนินการที่บันทึกไว้
ตัวอย่าง สลับแบบฟอร์ม การตรวจสอบแบบฟอร์มหรือแบบฟอร์มหลายขั้นตอน

ตัวอย่าง:

const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });

29) คุณสามารถปรับปรุงการเข้าถึง (a11y) ในแอปพลิเคชัน React ได้อย่างไร

คำตอบ:

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

ปฏิบัติที่ดีที่สุด:

  • ใช้ HTML เชิงความหมาย (<button> vs <div onClick>).
  • จัดการโฟกัสโดยใช้ ref และ tabIndex.
  • ใช้บทบาท ARIA สำหรับส่วนประกอบแบบไดนามิก
  • ให้แน่ใจว่าภาพมีความคมชัดของสีและทางเลือกของข้อความ
  • เครื่องมือเลเวอเรจเช่น eslint-ปลั๊กอิน-jsx-a11y และ แกนขวาน เพื่อการตรวจสอบ

ตัวอย่าง:

<button aria-label="Close dialog" onClick={closeModal}>×</button>

ข้อดี:

  • เข้าถึงผู้ชมได้กว้างขวางยิ่งขึ้น
  • การปรับปรุง SEO
  • การปฏิบัติตามมาตรฐาน WCAG

30) คุณสามารถอธิบายได้หรือไม่ว่าการแยกโค้ดและการโหลดแบบขี้เกียจแตกต่างกันอย่างไร และควรใช้แต่ละอย่างเมื่อใด

คำตอบ:

เทคนิคทั้งสองแบบจะปรับขนาดมัดและประสิทธิภาพการโหลดให้เหมาะสมที่สุด แต่แตกต่างกันใน เวลาการดำเนินการ.

  • การแยกรหัส แบ่งมัดใหญ่ให้เป็นชิ้นเล็ก ๆ ที่สามารถโหลดได้อย่างอิสระ
  • โหลดขี้เกียจ ทำให้การโหลดชิ้นส่วนเหล่านั้นล่าช้าออกไปจนกว่าจะจำเป็น

ตารางเปรียบเทียบ:

ปัจจัย การแยกรหัส กำลังโหลดขี้เกียจ
คำนิยาม แบ่งโค้ดออกเป็นส่วนๆ โหลดชิ้นส่วนตามความต้องการ
เครื่องมือ Webpack, Vite React.lazy, ไดนามิก import()
จุดมุ่งหมาย ปรับขนาดมัดให้เหมาะสม ปรับปรุงประสิทธิภาพการรันไทม์
การกระทำ เวลาในการสร้าง Runtime

ตัวอย่าง:

const Settings = React.lazy(() => import('./Settings'));

เมื่อใช้เทคนิคเหล่านี้ร่วมกัน จะช่วยลดเวลาในการโต้ตอบและเพิ่มความเร็วที่รับรู้ได้ของแอปขนาดใหญ่

31) อธิบายแนวคิดของ Render Props และความแตกต่างจาก Higher-Order Components (HOC)

คำตอบ:

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

ส่วน HOCs ในทางกลับกัน ห่อ ส่วนประกอบและส่งคืนเวอร์ชันที่ปรับปรุงด้วยพร็อพหรือพฤติกรรมที่ฉีดเข้าไป

ตารางเปรียบเทียบ:

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

ตัวอย่าง:

<DataProvider render={data => <UserList users={data} />} />

Render Props มอบความยืดหยุ่นที่ดีกว่าและหลีกเลี่ยงการชนกันของชื่อซึ่งมักพบใน HOC

32) Custom Hooks มีกี่ประเภท และมีข้อดีอะไรบ้าง?

คำตอบ:

Custom hooks รวบรวมตรรกะที่นำกลับมาใช้ใหม่ได้ ซึ่งประกอบด้วยสถานะ ผลข้างเคียง และยูทิลิตี้ต่างๆ ฮุกเหล่านี้ช่วยปรับปรุงความสามารถในการนำโค้ดกลับมาใช้ใหม่ การแยกส่วนข้อกังวล และความสามารถในการทดสอบ

ประเภทและตัวอย่าง:

  1. ตะขอเกี่ยวการจัดการของรัฐ - useToggle, useForm.
  2. ฮุกการดึงข้อมูล - useFetch, useQuery.
  3. ฮุก UI/UX - useWindowSize, useDarkMode.
  4. ฮุกการรวม - useLocalStorage, useMediaQuery.
  5. ตะขอสำหรับการแสดง - useDebounce, useThrottle.

ข้อดี:

  • การนำตรรกะแบบรวมศูนย์มาใช้ซ้ำ
  • ส่วนประกอบที่สะอาดยิ่งขึ้น
  • การทดสอบอิสระ

ตัวอย่าง:

function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) || initial);
  useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [value]);
  return [value, setValue];
}

33) คุณจัดการกับการรั่วไหลของหน่วยความจำในแอปพลิเคชัน React อย่างไร

คำตอบ:

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

เทคนิคการป้องกัน:

  1. เอฟเฟกต์การทำความสะอาด in useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []);
  2. ยกเลิกการโทรแบบอะซิงโครนัส ด้วย AbortController.
  3. หลีกเลี่ยงการเก็บการปิดที่ล้าสมัย อ้างอิงถึงพร็อพ/สถานะเก่า
  4. ยกเลิกการสมัครจากกิจกรรมหรือซ็อกเก็ต เมื่อถอดออก
  5. ใช้ React Profiler เพื่อตรวจจับการเจริญเติบโตของหน่วยความจำที่ช้า

ตัวอย่าง:

ในแอปแชท ให้ตัดการเชื่อมต่อตัวรับฟังซ็อกเก็ตเสมอเมื่อผู้ใช้กำลังออกจากห้องแชท

34) แนวทางปฏิบัติดีที่สุดสำหรับการจัดการแบบฟอร์มในแอปพลิเคชัน React ขนาดใหญ่คืออะไร

คำตอบ:

การจัดการแบบฟอร์มในแอป React ระดับองค์กรต้องมีความสมดุลระหว่างการควบคุม ประสิทธิภาพการทำงาน และการบำรุงรักษา

ปฏิบัติที่ดีที่สุด:

  • ใช้ไลบรารีเช่น ฟอร์มิก, ตอบสนองตะขอแบบฟอร์มหรือ แบบฟอร์มสุดท้าย เพื่อการตรวจสอบและลงทะเบียนภาคสนาม
  • จัดกลุ่มฟิลด์ที่เกี่ยวข้องโดยใช้ส่วนประกอบหรือบริบทที่ซ้อนกัน
  • สมัครสมาชิก การตรวจสอบความถูกต้องของโครงร่าง (ใช่แล้ว Zod) เพื่อความสม่ำเสมอ
  • การตรวจสอบ Debounce อย่างหนักหรือการตรวจสอบ API
  • รักษาสถานะแบบฟอร์มให้เป็นแบบท้องถิ่น เว้นแต่จำเป็นต้องใช้ทั่วโลก

ตัวอย่าง:

แบบฟอร์ม React Hook ลดการเรนเดอร์ซ้ำโดยแยกสถานะอินพุต

const { register, handleSubmit } = useForm(); 
<input {...register('email', { required: true })} />

35) รูปแบบการออกแบบใดที่มีประโยชน์มากที่สุดในการพัฒนา React และมีลักษณะอย่างไร

คำตอบ:

React เหมาะกับรูปแบบการออกแบบซอฟต์แวร์หลายรูปแบบเพื่อสถาปัตยกรรม UI ที่สามารถบำรุงรักษาและปรับขนาดได้

แบบแผน Descriptไอออน ตัวอย่าง
คอนเทนเนอร์-พรีเซนเตอร์ แยกตรรกะ (คอนเทนเนอร์) จาก UI (ผู้นำเสนอ) DataContainer → UIComponent
ควบคุม-ไม่ควบคุม จัดการข้อมูลแบบฟอร์มผ่านสถานะเทียบกับ DOM Formik เทียบกับอินพุตดิบ
ส่วนประกอบผสม องค์ประกอบของผู้ปกครองควบคุมเด็ก <Tabs><Tab /></Tabs>
รูปแบบผู้ให้บริการ แบ่งปันสถานะผ่านบริบท ธีมโปรไวเดอร์
รูปแบบตะขอ ใช้ตรรกะที่มีสถานะซ้ำ useAuth, useFetch

ตัวอย่าง:

A Tabs ส่วนประกอบเปิดเผยบริบทดังนั้น <Tab> เด็กๆ ลงทะเบียนตัวเองโดยอัตโนมัติ — แอปพลิเคชันที่สะอาด ส่วนประกอบผสม ลวดลาย

36) ความแตกต่างที่สำคัญระหว่าง React 18 และ React 19 คืออะไร

คำตอบ:

React 19 สร้างขึ้นบนรากฐานพร้อมกันของ React 18 พร้อมด้วยความสามารถใหม่ที่สำคัญ

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

ประโยชน์ที่สำคัญ:

React 19 มุ่งเน้นไปที่ การกลายพันธุ์ข้อมูลที่ง่ายกว่า, การดำเนินการแบบฟอร์มในตัวและ การควบคุมแบบอะซิงค์ที่ได้รับการปรับปรุงทำให้ SSR และการเติมความชื้นแบบก้าวหน้าราบรื่นยิ่งขึ้น

37) Micro-Frontend ทำงานอย่างไร Archiการผสานโครงสร้างกับ React มีข้อดีอะไรบ้าง?

คำตอบ:

ไมโครฟรอนต์เอนด์จะแบ่งเว็บแอปขนาดใหญ่ออกเป็นโมดูลฟรอนต์เอนด์อิสระที่ปรับใช้ได้ ในระบบนิเวศ React ไมโครฟรอนต์เอนด์แต่ละตัวจะเป็นแอปแบบสแตนด์อโลนที่สามารถผสานรวมได้ผ่าน สหพันธ์โมดูล, iframesหรือ ตัวโหลดรันไทม์แบบกำหนดเอง.

ข้อดี:

  • การปรับใช้และการปรับขนาดแบบอิสระ
  • ความเป็นอิสระของทีมในทุกกลุ่มเทคโนโลยี
  • สร้างท่อส่งได้รวดเร็วยิ่งขึ้น

ตัวอย่าง:

การใช้ สหพันธ์โมดูล Webpackทีมงานสามารถเปิดเผยส่วนประกอบ React ข้ามแอปต่างๆ ได้อย่างไดนามิก:

exposes: { './NavBar': './src/NavBar' }

ข้อเสีย:

  • ความซับซ้อนในการจัดการสถานะร่วมกัน
  • ค่าใช้จ่ายด้านประสิทธิภาพจากมัดแยก

38) ปัจจัยใดบ้างที่คุณพิจารณาในการปรับขนาดแอปพลิเคชัน React ในการผลิต

คำตอบ:

การปรับขนาดแอปพลิเคชัน React เกี่ยวข้องกับการพิจารณาทางเทคนิค สถาปัตยกรรม และการปฏิบัติการ

ปัจจัยสำคัญ:

  1. โครงสร้างรหัส — นำ monorepos (Nx/Turborepo) มาใช้เพื่อแบ่งปันโค้ดแบบโมดูลาร์
  2. การจัดการของรัฐ — การแบ่งส่วนสถานะท้องถิ่น เทียบกับสถานะทั่วโลก เทียบกับสถานะเซิร์ฟเวอร์
  3. ประสิทธิภาพ — การโหลดแบบขี้เกียจ, การบันทึกข้อมูล, การแคช CDN
  4. การตรวจสอบ — ใช้ Sentry, Datadog หรือ LogRocket สำหรับข้อผิดพลาดและเมตริก
  5. การทดสอบและ CI/CD — ท่อส่งอัตโนมัติและการทดสอบการถดถอยภาพ

ตัวอย่าง:

แพลตฟอร์มอีคอมเมิร์ซขนาดใหญ่ที่ปรับขนาดแอป React โดยใช้ Next.js สำหรับ SSR, Redux Toolkit สำหรับสถานะที่คาดเดาได้ และไมโครฟรอนต์เอนด์สำหรับแนวตั้งที่แยกจากกัน

39) คุณจะทดสอบส่วนประกอบ React ที่ใช้พฤติกรรมอะซิงโครนัสได้อย่างไร

คำตอบ:

การทดสอบส่วนประกอบ React แบบอะซิงโครไนซ์ต้องมีการซิงโครไนซ์ระหว่างตัวรันการทดสอบและการอัปเดตสถานะของส่วนประกอบ

ปฏิบัติที่ดีที่สุด:

  • ใช้ waitFor or findBy* แบบสอบถามใน React Testing Library
  • การเรียกจำลองหรือ API โดยใช้ msw.
  • ชอบ ตัวจับเวลาปลอม (jest.useFakeTimers()) สำหรับเอฟเฟกต์ตามระยะเวลาหมดเวลา

ตัวอย่าง:

test('loads and displays data', async () => {
  render(<UserList />);
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

วิธีนี้จะช่วยให้แน่ใจว่าการทดสอบจะรอการอัปเดตแบบอะซิงค์ของ React ก่อนที่จะทำการยืนยัน

40) อธิบายว่าคุณจะออกแบบโครงสร้างโครงการ React ขนาดใหญ่ที่สามารถบำรุงรักษาได้อย่างไร

คำตอบ:

โครงการ React ที่ปรับขนาดได้จะต้องมีความสมดุลระหว่างความเป็นโมดูล ความชัดเจน และการทำงานร่วมกันเป็นทีม

โครงสร้างโฟลเดอร์ที่แนะนำ:

src/
 ├── components/         # Reusable UI elements
 ├── features/           # Feature-specific modules
 ├── hooks/              # Custom reusable hooks
 ├── context/            # Global providers
 ├── pages/              # Route-level views
 ├── services/           # API and utilities
 ├── assets/             # Static resources
 ├── tests/              # Unit & integration tests
 └── index.js

ปฏิบัติที่ดีที่สุด:

  • ใช้การนำเข้าแบบสัมบูรณ์พร้อมนามแฝงเส้นทาง
  • รักษาการ linting อย่างเคร่งครัด (ESLint + Prettier)
  • ใช้ TypeScript เพื่อความปลอดภัยของประเภท
  • บังคับใช้ขอบเขตของส่วนประกอบด้วยการออกแบบแบบอะตอมหรือการแบ่งส่วนตามคุณลักษณะ

ตัวอย่าง:

ในการตั้งค่าในโลกแห่งความเป็นจริง คุณลักษณะ "ผู้ใช้" อาจรวมถึง UserSlice.js, UserAPI.js, UserCard.jsxและ User.test.js, ทั้งหมดภายใน src/features/user/.

🔍 คำถามสัมภาษณ์ React.js ยอดนิยมพร้อมสถานการณ์จริงและคำตอบเชิงกลยุทธ์

1) ความแตกต่างที่สำคัญระหว่างส่วนประกอบฟังก์ชันและคลาสใน React.js คืออะไร

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

ตัวอย่างคำตอบ:

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

2) คุณสามารถอธิบายได้ไหมว่า Virtual DOM ทำงานอย่างไรใน React?

สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการประเมินความเข้าใจของคุณเกี่ยวกับกลไกการทำงานหลักของ React

ตัวอย่างคำตอบ:

Virtual DOM คือการแสดงข้อมูลในหน่วยความจำของ DOM จริง เมื่อสถานะของคอมโพเนนต์เปลี่ยนแปลง React จะอัปเดต Virtual DOM ก่อน จากนั้นจึงเปรียบเทียบกับเวอร์ชันก่อนหน้าโดยใช้กระบวนการที่เรียกว่า 'diffing' จากนั้นจึงอัปเดตเฉพาะส่วนของ DOM จริงที่มีการเปลี่ยนแปลง วิธีการนี้ช่วยเพิ่มประสิทธิภาพโดยลดการจัดการ DOM โดยตรง

3) คุณจัดการสถานะในแอปพลิเคชัน React ขนาดใหญ่ได้อย่างไร

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

ตัวอย่างคำตอบ:

ในแอปพลิเคชันขนาดใหญ่ ผมมักใช้ไลบรารีการจัดการสถานะแบบรวมศูนย์ เช่น Redux หรือ Zustand Redux ให้การไหลของข้อมูลที่คาดการณ์ได้และทำให้การดีบักง่ายขึ้นด้วยเครื่องมือดีบักแบบเดินทางข้ามเวลา สำหรับแอปพลิเคชันที่ง่ายกว่า ผมแนะนำให้ใช้ Context API และ hooks เพื่อหลีกเลี่ยงความซับซ้อนที่ไม่จำเป็น

4) อธิบายเวลาที่คุณเพิ่มประสิทธิภาพของ React

สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการเข้าใจประสบการณ์จริงของคุณในการเพิ่มประสิทธิภาพการทำงาน

ตัวอย่างคำตอบ:

“ในบทบาทก่อนหน้าของฉัน แอปพลิเคชันของเรามีการเรนเดอร์ซ้ำมากเกินไปเนื่องจากการเปลี่ยนแปลงสถานะที่ไม่จำเป็น ฉันใช้ React.memo และ useCallback เพื่อป้องกันการแสดงผลซ้ำที่ไม่จำเป็น ผมได้วิเคราะห์ประสิทธิภาพโดยใช้ React Profiler และระบุส่วนประกอบที่จำเป็นต้องบันทึกข้อมูล ซึ่งช่วยลดเวลาในการแสดงผลได้เกือบ 30%

5) คุณจัดการกับผลข้างเคียงใน React อย่างไร

สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการประเมินความเข้าใจของคุณเกี่ยวกับฮุกและการจัดการวงจรชีวิต

ตัวอย่างคำตอบ:

“ฉันจัดการผลข้างเคียง เช่น การเรียก API หรือการจัดการ DOM โดยใช้ useEffect hook ครับ/ค่ะ hook ช่วยให้ผม/ดิฉันสามารถระบุ dependencies ได้ ทำให้มั่นใจได้ว่าเอฟเฟกต์จะทำงานเฉพาะเมื่อ dependencies เหล่านั้นเปลี่ยนแปลงไปเท่านั้น วิธีนี้ช่วยรักษาพฤติกรรมที่คาดเดาได้และหลีกเลี่ยงการวนซ้ำไม่สิ้นสุด

6) บอกฉันเกี่ยวกับจุดบกพร่องที่ท้าทายที่คุณเผชิญในโครงการ React และคุณแก้ไขมันอย่างไร

สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการประเมินทักษะการแก้ปัญหาและแก้ไขจุดบกพร่องของคุณ

ตัวอย่างคำตอบ:

ก่อนหน้านี้ ผมเคยพบบั๊กที่การอัปเดตสถานะไม่ปรากฏใน UI หลังจากตรวจสอบแล้ว ผมพบว่าปัญหาเกิดจากการเปลี่ยนแปลงวัตถุสถานะโดยตรงแทนที่จะสร้างสำเนาใหม่ ผมจึงปรับโครงสร้างโค้ดให้ใช้การอัปเดตแบบคงที่ ซึ่งช่วยแก้ปัญหาและปรับปรุงความสอดคล้องของข้อมูล

7) คุณจัดการการตรวจสอบแบบฟอร์มในแอปพลิเคชัน React อย่างไร

สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการดูว่าคุณเข้าใจวิธีการใช้การตรวจสอบข้อมูลอินพุตของผู้ใช้หรือไม่

ตัวอย่างคำตอบ:

โดยทั่วไปผมใช้ส่วนประกอบควบคุมสำหรับการจัดการอินพุตแบบฟอร์ม ร่วมกับไลบรารีอย่าง Formik หรือ React Hook Form เพื่อการตรวจสอบความถูกต้อง เครื่องมือเหล่านี้ช่วยลดความยุ่งยากในการจัดการข้อผิดพลาด การจัดการสถานะแบบฟอร์ม และการผสานรวมกับไลบรารีตรวจสอบความถูกต้องจากภายนอก เช่น Yup

8) อธิบายสถานการณ์ที่คุณต้องร่วมมือกับนักพัฒนาแบ็กเอนด์ในขณะที่ทำงานในโครงการ React

สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการประเมินการทำงานเป็นทีมและทักษะการสื่อสารของคุณ

ตัวอย่างคำตอบ:

ในบทบาทสุดท้ายของผม ผมได้ร่วมงานอย่างใกล้ชิดกับนักพัฒนาแบ็กเอนด์เพื่อออกแบบ REST API สำหรับแอปพลิเคชันแดชบอร์ด เราได้ตกลงกันเรื่องรูปแบบข้อมูลและจุดสิ้นสุดในช่วงเริ่มต้นของการพัฒนา นอกจากนี้ ผมยังได้สร้างแบบจำลองการตอบสนอง (mock response) เพื่อดำเนินการพัฒนาฟรอนต์เอนด์ต่อไปในระหว่างที่กำลังสร้างแบ็กเอนด์ เพื่อให้มั่นใจว่าการผสานรวมจะราบรื่นในภายหลัง

9) คุณมั่นใจได้อย่างไรว่าส่วนประกอบ React ของคุณสามารถนำกลับมาใช้ซ้ำและบำรุงรักษาได้?

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

ตัวอย่างคำตอบ:

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

10) คุณคอยอัปเดตแนวโน้มและแนวทางปฏิบัติที่ดีที่สุดของ React.js ได้อย่างไร

สิ่งที่คาดหวังจากผู้สมัคร: ผู้สัมภาษณ์ต้องการประเมินความมุ่งมั่นของคุณในการเรียนรู้อย่างต่อเนื่อง

ตัวอย่างคำตอบ:

ผมติดตามข่าวสารล่าสุดอยู่เสมอโดยติดตามเอกสารประกอบอย่างเป็นทางการและบล็อกชุมชนของ React นอกจากนี้ ผมยังรับชมการบรรยายจากงานประชุม React เช่น React Conf และฟังพอดแคสต์อย่าง 'React Podcast' แหล่งข้อมูลเหล่านี้ช่วยให้ผมได้รับข้อมูลอัปเดตเกี่ยวกับฟีเจอร์ใหม่ๆ เช่น การเรนเดอร์แบบพร้อมกันและ Server Components อยู่เสมอ

สรุปโพสต์นี้ด้วย: