Virtual DOM และ React

เริ่มต้นด้วยคำจำกัดความใน reactjs.org

DOM เสมือน (VDOM) เป็นแนวคิดการเขียนโปรแกรมที่มีการนำเสนอ UI ในอุดมคติหรือ "เสมือน" ไว้ในหน่วยความจำและซิงค์กับ DOM "ของจริง" โดยไลบรารี เช่น ReactDOM กระบวนการนี้เรียกว่าการกระทบยอด

นั่นเป็นคำจำกัดความที่แย่มาก เรามาลองทำความเข้าใจกัน

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

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

React ใช้อัลกอริธึม Diff เพื่อเปรียบเทียบการเปลี่ยนแปลงระหว่างทรีใหม่กับทรีล่าสุด (ทรีที่นี่ไม่มีอะไรนอกจากการอ้างอิงถึงการเปลี่ยนแปลงที่ทำขึ้นซึ่งเป็น VDOM ใหม่และ VDOM ล่าสุด) กระบวนการเปรียบเทียบนี้เรียกว่าการกระทบยอด

React แยกวิเคราะห์ต้นไม้โดยใช้การค้นหาแบบกว้างก่อน (BFS)

จำไว้เสมอว่า Virtual DOM ไม่มีอยู่จริง แต่เป็นการแสดงในหน่วยความจำหรือพิมพ์เขียวของ Real DOM

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

ทำไมต้อง DOM เสมือน ง่าย ๆ นี่คือสิ่งที่ทำให้ตอบสนองอย่างรวดเร็ว มันทำสิ่งนี้โดย DOM เสมือนที่แตกต่าง เปรียบเทียบต้นไม้เสมือนสองต้นทั้งเก่าและใหม่ จากนั้นทำการเปลี่ยนแปลงที่จำเป็นใน DOM จริงเท่านั้น

อย่าสับสนว่า VDOM ได้รับการพัฒนาโดย React js แต่ VDOM เป็นแนวคิดที่ React js ใช้อยู่ DOM เสมือนเป็นภาพหน้าจอของ DOM ในเวลาที่กำหนด เมื่อใดก็ตามที่มีการเปลี่ยนแปลงส่วนประกอบจะแสดงผลใหม่เพื่อสร้าง VDOM ใหม่

Virtual DOM ได้รับความนิยมเนื่องจากทำให้แอปพลิเคชันของคุณรวดเร็วและลบการแสดงผลทั้งหน้าโดยไม่จำเป็น ซึ่งช่วยประหยัดทั้งเวลาและเงิน

ฉันหวังว่าคุณจะสนุกกับบทความนี้และพบว่ามีประโยชน์ หากฉันพลาดบางสิ่งโปรดแจ้งให้เราทราบในส่วนความคิดเห็น