การเพิ่มประสิทธิภาพ
การเพิ่มประสิทธิภาพ FlatList, memo, useMemo/useCallback, Hermes, การทำ profiling, ขนาด bundle
1บทบาทหลักของ React.memo ในการเพิ่มประสิทธิภาพของ React Native คืออะไร?
บทบาทหลักของ React.memo ในการเพิ่มประสิทธิภาพของ React Native คืออะไร?
คำตอบ
React.memo คือ Higher-Order Component ที่ทำการ memoize ผลลัพธ์การ render ของ functional component โดยจะป้องกันการ re-render ที่ไม่จำเป็นด้วยการเปรียบเทียบ props ปัจจุบันกับ props ก่อนหน้า (โดยค่าเริ่มต้นใช้ shallow comparison) หาก props ไม่เปลี่ยนแปลง React จะนำผลลัพธ์ที่ memoize ไว้กลับมาใช้แทนการ render component ใหม่ ซึ่งช่วยเพิ่มประสิทธิภาพอย่างมากในลิสต์หรือ component tree ที่ซับซ้อน
2พร็อพเพอร์ตี้ใดของ FlatList ที่ช่วยเพิ่มประสิทธิภาพการเลื่อนอย่างมากด้วยการระบุขนาดของไอเทมล่วงหน้า?
พร็อพเพอร์ตี้ใดของ FlatList ที่ช่วยเพิ่มประสิทธิภาพการเลื่อนอย่างมากด้วยการระบุขนาดของไอเทมล่วงหน้า?
คำตอบ
getItemLayout เป็นพร็อพเพอร์ตี้เสริมของ FlatList ที่ช่วยให้คำนวณความสูง ความกว้าง และ offset ของแต่ละองค์ประกอบไว้ล่วงหน้า ซึ่งช่วยให้ React Native ไม่ต้องวัดขนาดของแต่ละไอเทมแบบไดนามิก ทำให้ประสิทธิภาพการเลื่อนดีขึ้นอย่างมาก โดยเฉพาะเมื่อกระโดดไปยังดัชนีที่ระบุด้วย scrollToIndex การเพิ่มประสิทธิภาพนี้มีประโยชน์อย่างยิ่งเมื่อไอเทมทั้งหมดมีขนาดเท่ากัน
3ความแตกต่างหลักระหว่าง useMemo และ useCallback ในแง่ของการเพิ่มประสิทธิภาพคืออะไร?
ความแตกต่างหลักระหว่าง useMemo และ useCallback ในแง่ของการเพิ่มประสิทธิภาพคืออะไร?
คำตอบ
useMemo จะ memoize ผลลัพธ์ของการคำนวณที่มีต้นทุนสูงและคืนค่าที่คำนวณได้นั้น ในขณะที่ useCallback จะ memoize ตัวฟังก์ชันเองและคืนฟังก์ชันนั้น useMemo มีประโยชน์ในการหลีกเลี่ยงการคำนวณซ้ำที่หนักในทุก ๆ การ render ส่วน useCallback จำเป็นอย่างยิ่งในการหลีกเลี่ยงการสร้างฟังก์ชันใหม่ที่ส่งเป็น props ไปยัง component ลูกที่ memoize ไว้ ซึ่งจะทำให้การเพิ่มประสิทธิภาพ React.memo ของ component เหล่านั้นเสียไป
Hermes คืออะไรและข้อได้เปรียบหลักของมันสำหรับแอปพลิเคชัน React Native คืออะไร?
เหตุใดการระบุฟังก์ชัน keyExtractor ที่เสถียรให้กับ FlatList จึงมีความสำคัญอย่างยิ่ง?
+21 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ React Native อื่นๆ
พื้นฐาน JavaScript
พื้นฐาน React
พื้นฐาน React Native
React Hooks
TypeScript สำหรับ React และ React Native
คอมโพเนนต์และ API ของ React Native
การจัดสไตล์และเลย์เอาต์ใน React Native
การนำทางใน React Native
การจัดการ State ใน React Native
Networking และ API ใน React Native
การคงอยู่ของข้อมูล
ฟอร์มและการตรวจสอบความถูกต้อง
แอนิเมชัน React Native
Native Modules & Bridge
โค้ดเฉพาะแพลตฟอร์ม
สิทธิ์และ Device API
Push Notifications
การทดสอบ React Native
การ Debug React Native
Build & Deployment
Expo vs React Native Bare
การจัดการหน่วยความจำ
Architecture Patterns
React Native New Architecture
แนวทางปฏิบัติที่ดีที่สุดด้านความปลอดภัย
Offline-First Architecture
CI/CD React Native
Monorepo และการแชร์โค้ด
หัวข้อขั้นสูง
วงจรชีวิตแอปและการทำงานเบื้องหลัง
การยืนยันตัวตนและการจัดการเซสชัน
Monitoring & Crash Reporting
เชี่ยวชาญ React Native สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี