การใช้ React Virtual Dom คืออะไร

การใช้ React Virtual Dom: 1. ปรับปรุงประสิทธิภาพของโค้ด React DOM เสมือนเป็นวัตถุ js การสร้างวัตถุ js สิ้นเปลืองประสิทธิภาพน้อยกว่าการสร้าง DOM จริงมาก DOM จะมีผลกระทบอย่างมาก 2. เพื่อให้บรรลุแอปพลิเคชันข้ามเทอร์มินัล DOM เสมือนจะถูกแปลงเป็นโหนด DOM ของเบราว์เซอร์แต่ละตัวหรือสามารถแปลงเป็นส่วนประกอบของแอปพลิเคชันดั้งเดิมเพื่อใช้งานข้ามเทอร์มินัล การใช้งาน

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, รีแอคเวอร์ชัน 17.0.1, คอมพิวเตอร์ Dell G3

การใช้ React Virtual Dom คืออะไร

1. ประสิทธิภาพที่ดีขึ้นอย่างมาก

2. เปิดใช้งานแอปพลิเคชันข้ามสาย (React Native) ทางฝั่งเบราว์เซอร์ DOM เสมือนจะถูกแปลงเป็นโหนด DOM ของเบราว์เซอร์แต่ละโหนด นอกจากนี้ยังสามารถแปลงเป็นส่วนประกอบของแอปพลิเคชันเนทิฟ และแอปพลิเคชันข้ามเซกเมนต์สามารถรับรู้ได้

เหตุใดจึงปรับปรุงประสิทธิภาพ

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

มันแตกต่างกับ DOM เสมือน การสร้างวัตถุ js สิ้นเปลืองประสิทธิภาพน้อยกว่าการสร้าง DOM จริงมาก การแทนที่การสร้าง DOM จริงด้วยการสร้าง DOM เสมือนจะมีการปรับปรุงประสิทธิภาพอย่างมาก

DOM เสมือน

Virtual DOM เป็นวัตถุ js

กระบวนการโหลดและอัปเดตหน้า

1.ข้อมูลสถานะ

เทมเพลต 2.jsx

3. ข้อมูล + เทมเพลตสร้าง DOM เสมือน

4. ใช้ DOM เสมือนเพื่อสร้าง DOM จริง

5.การเปลี่ยนแปลงสถานะ

6. ข้อมูล + เทมเพลตสร้าง DOM เสมือนใหม่

7. เปรียบเทียบ DOM เสมือนดั้งเดิมและ DOM เสมือนใหม่ (อัลกอริธึมความแตกต่าง)

8. ใช้งาน DOM โดยตรงและเปลี่ยนสถานที่ต่าง ๆ

ขยายความรู้ของคุณ:

วัตถุประสงค์ของ DOM เสมือนคืออะไร?

เพื่อให้บรรลุการอัปเดตองค์ประกอบ DOM ในหน้าได้อย่างมีประสิทธิภาพ

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

วัตถุประสงค์ของ DOM เสมือนคือการสะสมการดำเนินการทั้งหมด คำนวณการเปลี่ยนแปลงทั้งหมดทางสถิติ และอัปเดต DOM อย่างสม่ำเสมอ

ประสิทธิภาพที่ดีขึ้นอย่างมาก

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

ความแตกต่างระหว่าง DOM และ DOM เสมือน

1. DOM เสมือนจะไม่ดำเนินการเรียงพิมพ์และดำเนินการวาดใหม่

2. แก้ไข DOM เสมือนบ่อยครั้ง จากนั้นเปรียบเทียบและแก้ไขส่วนที่จำเป็นต้องเปลี่ยนใน DOM จริงในครั้งเดียว (หมายเหตุ!) และสุดท้ายดำเนินการเรียงพิมพ์และวาดใหม่ใน DOM จริงเพื่อลดการสูญเสียการเรียงพิมพ์และการวาดใหม่มากเกินไป โหนด DOM

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

4. Virtual DOM ช่วยลดการวาดใหม่และเรียงพิมพ์พื้นที่ขนาดใหญ่ (โหนด DOM จริง) ได้อย่างมีประสิทธิภาพ เพราะสุดท้ายแล้วจะแตกต่างจาก DOM จริงและสามารถแสดงผลได้เพียงบางส่วนเท่านั้น