- ต่างจากเครื่องมือเดิม (
Profiler, Why Did You Render?, React Devtools) ตรงที่แทบไม่ต้องแก้โค้ด และมีทั้ง visual cue แบบเรียบง่ายกับ API ที่ตั้งโปรแกรมได้
- ตรวจจับและไฮไลต์การเรนเดอร์ที่ก่อให้เกิดปัญหาด้านประสิทธิภาพโดยอัตโนมัติ พร้อมบอกได้อย่างชัดเจนว่าควรแก้คอมโพเนนต์ใด
- เป็นเพียง Javascript แบบเรียบง่าย จึงใส่ได้ทุกที่: Script tag, NPM ฯลฯ
ทำไมถึงต้องใช้ React Scan
- การทำ React ให้เหมาะสมด้านประสิทธิภาพอาจเป็นเรื่องยาก
- โดยตั้งใจให้ props ของคอมโพเนนต์ถูกเปรียบเทียบกันแบบอ้างอิง ไม่ใช่ตามค่า เพื่อช่วยลดต้นทุนของการรันเรนเดอร์
- แต่ในทางกลับกัน ก็ทำให้เกิดการเรนเดอร์ที่ไม่จำเป็นได้ง่ายโดยไม่ตั้งใจ จนแอปทำงานช้าลง
- แม้แต่ในโปรดักชันแอปขนาดใหญ่ที่มีนักพัฒนาหลายร้อยคน การปรับให้เหมาะสมก็ยังมักเป็นเรื่องยากอยู่ดี (กรณีของ GitHub, Twitter, Instagram)
จุดที่ React Scan ดีกว่า React Devtools
- ข้อจำกัดของ React Devtools:
- ถูกออกแบบมาเป็นเครื่องมืออเนกประสงค์ จึงแยกความต่างระหว่างการเรนเดอร์ที่ไม่จำเป็นกับการเรนเดอร์ที่จำเป็นได้ไม่ชัดเจน
- ไม่มี API ที่ตั้งโปรแกรมได้ ทำให้การทำ performance debugging แบบอัตโนมัติทำได้ยาก
- ข้อไม่พอใจส่วนตัวต่อฟีเจอร์ไฮไลต์ของ React Devtools:
- ความล่าช้าในการตรวจจับการเรนเดอร์: React Devtools ประมวลผลการเรนเดอร์แบบเป็นชุด ทำให้คอมโพเนนต์ที่เรนเดอร์เร็วมากถูกแสดงเพียงประมาณ 1 ครั้งต่อวินาที
- ปัญหาการอัปเดตตำแหน่งกล่อง: เมื่อเลื่อนหน้าจอหรือปรับขนาด ตำแหน่งกล่องจะไม่อัปเดต
- การแสดงจำนวนครั้งที่เรนเดอร์ไม่เพียงพอ: ไม่แสดงจำนวนครั้งที่คอมโพเนนต์แต่ละตัวถูกเรนเดอร์
- แยกการเรนเดอร์ที่เป็นปัญหาได้ยาก: หากต้องการดูว่าเรนเดอร์ใดช้าหรือไม่มีประสิทธิภาพ ต้องไปตรวจคอมโพเนนต์ด้วยตนเอง
- ประสบการณ์ผู้ใช้ยังไม่ดีพอ: เมนูถูกซ่อนไว้ ทำให้การเปิดปิดฟีเจอร์ทำได้ยุ่งยาก และ UI ก็ไม่ได้ออกแบบมาเพื่อการดีบักประสิทธิภาพโดยเฉพาะ
- ไม่มี Program API: ใช้สำหรับทำดีบักอัตโนมัติหรือทำงานขั้นสูงไม่ได้
- จำกัดอยู่ที่ส่วนขยาย Chrome: ใช้ได้ไม่ทั่วทั้งเว็บ และต้องพึ่งพาส่วนขยายเบราว์เซอร์
- ปัญหาด้านดีไซน์เชิงอัตวิสัย: เส้นกรอบของกล่องดูพร่า และให้ความรู้สึกว่าทำงานช้า
- จุดแตกต่างของ React Scan:
- เป็นเครื่องมือเฉพาะทางที่ออกแบบมาเพื่อ performance debugging โดยสามารถระบุการเรนเดอร์ที่ไม่จำเป็นได้อย่างชัดเจน
- ใช้งานได้บนทุกแพลตฟอร์ม (เว็บ, สคริปต์, npm) และปรับประสบการณ์นักพัฒนาให้เหมาะสมที่สุด
- มีโรดแมปฟีเจอร์ที่ทะเยอทะยาน มอบความเป็นไปได้ที่ไปไกลกว่า React Devtools
3 ความคิดเห็น
อ่านง่ายดีครับ
ตัวอย่างการใช้งานที่เหมาะสมมาก
อาจเป็นเพราะเดโมเป็นแอปเล็ก ๆ เลยทำให้ตอบสนองได้เร็วครับ