DOM เสมือนคืออะไร

เมื่อเร็ว ๆ นี้ฉันดูกรอบการตอบสนองของ Facebook ใช้แนวคิดที่เรียกว่า "Virtual DOM" ซึ่งฉันไม่เข้าใจจริงๆ

DOM เสมือนคืออะไร ข้อดีคืออะไร

React สร้างแผนผังของวัตถุที่กำหนดเองซึ่งเป็นส่วนหนึ่งของ DOM ตัวอย่างเช่นแทนที่จะสร้างองค์ประกอบ DIV จริงที่มีองค์ประกอบ UL มันจะสร้างวัตถุ React.div ที่มีวัตถุ React.ul มันสามารถจัดการกับวัตถุเหล่านี้ได้อย่างรวดเร็วโดยไม่ต้องสัมผัส DOM จริงหรือผ่าน DOM API จากนั้นเมื่อมันแสดงส่วนประกอบมันจะใช้ DOM เสมือนนี้เพื่อหาว่ามันต้องทำอย่างไรกับ DOM จริงเพื่อให้ต้นไม้สองต้นตรงกัน

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

ลองยกตัวอย่าง - แม้ว่าจะเป็นคนที่ไร้เดียงสามาก: ถ้าคุณมีบางอย่างที่ยุ่งเหยิงในห้องในบ้านของคุณและคุณต้องทำความสะอาดมันจะเป็นขั้นตอนแรกของคุณอย่างไร? คุณจะทำความสะอาดห้องของคุณที่เลอะหรือบ้านทั้งหลังหรือไม่? คำตอบคือแน่นอนว่าคุณจะต้องทำความสะอาดเฉพาะห้องที่ต้องมีการทำความสะอาด นั่นคือสิ่งที่ DOM เสมือนทำ

JS ธรรมดาทำการสำรวจหรือแสดงผล DOM ทั้งหมดแทนที่จะแสดงเฉพาะส่วนที่ต้องมีการเปลี่ยนแปลง

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

DOM เสมือนคืออะไร

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

มันเป็นขั้นตอนที่เกิดขึ้นระหว่างฟังก์ชั่นการแสดงภาพที่ถูกเรียกและการแสดงองค์ประกอบบนหน้าจอ

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

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

แหล่งที่มาจาก Intro ถึง React # 2

virtual DOM(VDOM) ไม่ได้เป็นแนวคิดใหม่: https://github.com/Matt-Esch/virtual-dom

VDOM ใช้กลยุทธ์ในการอัพเดท DOM โดยไม่ต้องเขียนซ้ำโหนดทั้งหมดในแอปพลิเคชันหน้าเดียว การค้นหาโหนดในโครงสร้างแบบต้นไม้นั้นง่าย แต่ทรี DOM สำหรับแอป SPA สามารถมีขนาดใหญ่มาก การค้นหาและอัปเดตโหนด / โหนดในกรณีที่เหตุการณ์ไม่มีประสิทธิภาพ

VDOM แก้ปัญหานี้ด้วยการสร้างนามธรรมที่เป็นจริงของ dom VDOM เป็นการนำเสนอต้นไม้ในหน่วยความจำที่มีน้ำหนักเบาระดับสูงของ DOM ที่แท้จริง

ตัวอย่างเช่นให้พิจารณาเพิ่มโหนดใน DOM ทำปฏิกิริยาเก็บสำเนาของ VDOM ในหน่วยความจำ

1. สร้าง VDOM ด้วยสถานะใหม่
2. เปรียบเทียบกับ VDOM รุ่นเก่าโดยใช้ diffing
3. อัพเดตเฉพาะโหนดที่แตกต่างกันใน DOM จริง
4. กำหนด VDOM ใหม่เป็น VDOM ที่เก่ากว่า

นี่เป็นคำอธิบายสั้น ๆ และการกล่าวซ้ำของ DOM เสมือนจริงที่กล่าวถึงข้าง ๆ ReactJS

DOM (Document Object Model) เป็นนามธรรมของข้อความที่มีโครงสร้างซึ่งหมายความว่ามันทำจากรหัส HTML และ CSS องค์ประกอบ HTML เหล่านี้กลายเป็นโหนดใน DOM มีข้อ จำกัด สำหรับวิธีการก่อนหน้านี้ในการจัดการ DOM Virtual DOM เป็นนามธรรมของ HTML DOM ที่สร้างขึ้นจริงก่อน React ถูกสร้างหรือใช้ แต่สำหรับวัตถุประสงค์ของเราเราจะใช้ร่วมกับ ReactJS DOM เสมือนจริงมีน้ำหนักเบาและแยกออกจากการใช้งาน DOM ในเบราว์เซอร์ Virtual DOM นั้นเป็นภาพหน้าจอ (หรือคัดลอก) ของ DOM ในเวลาที่กำหนด วิธีการดูจากมุมมองของนักพัฒนาคือ DOM คือสภาพแวดล้อมการผลิตและ Virtual DOM คือสภาพแวดล้อมท้องถิ่น (dev) ทุกครั้งที่ข้อมูลมีการเปลี่ยนแปลงในแอป React การสร้าง Virtual DOM ใหม่ของส่วนติดต่อผู้ใช้จะถูกสร้างขึ้น

วิธีการพื้นฐานที่สุดที่จำเป็นในการสร้างส่วนประกอบแบบคงที่ใน ReactJS คือ:

คุณต้องส่งคืนรหัสจากวิธีการแสดงผล คุณต้องแปลงทุกคลาสเป็น className เนื่องจากคลาสสงวนคำใน JavaScript นอกเหนือจากการเปลี่ยนแปลงที่สำคัญยิ่งกว่านั้นยังมีความแตกต่างเล็กน้อยระหว่าง DOM สองตัวรวมถึงสามแอททริบิวที่ปรากฏใน DOM เสมือน แต่ไม่ได้อยู่ใน HTML DOM (คีย์การอ้างอิงและ harmlySetInnerHTML)

สิ่งสำคัญที่ต้องเข้าใจเมื่อทำงานกับ Virtual DOM คือความแตกต่างระหว่าง ReactElement และ ReactComponent

ReactElement

• ReactElement เป็นการนำเสนอองค์ประกอบ DOM แบบเสมือนแสงไร้สัญชาติไร้รูปแบบ
• ReactElement - นี่คือประเภทหลักในการตอบสนองและอยู่ใน DOM เสมือน

• ReactElements สามารถสร้างการแสดงผลเป็น HTML DOM

  var root = React.createElement('div'); ReactDOM.render(root, document.getElementById('example'));

• JSX รวบรวมแท็ก HTML ลงใน ReactElements

  var root = <div/>; ReactDOM.render(root, document.getElementById('example'));

ReactComponent

• ReactComponent - ReactComponent เป็นส่วนประกอบที่เป็นของรัฐ
• React.createClass ถือเป็น ReactComponent
• เมื่อใดก็ตามที่สถานะการเปลี่ยนแปลงองค์ประกอบจะถูกแสดงซ้ำ

เมื่อใดก็ตามที่ ReactComponent มีการเปลี่ยนแปลงสถานะเราต้องการเปลี่ยน HTML DOM ให้น้อยที่สุดเท่าที่จะทำได้ดังนั้น ReactComponent จะถูกแปลงเป็น ReactElement ซึ่งสามารถแทรกลงใน DOM เสมือนจริงเปรียบเทียบและอัปเดตได้อย่างรวดเร็วและง่ายดาย

เมื่อ React รู้จักส่วนต่าง - มันจะถูกแปลงเป็นรหัสระดับต่ำ (HTML DOM) ซึ่งจะถูกดำเนินการใน DOM

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

ถ่ายจากที่นี่

Virtual DOM เป็นนามธรรมของ HTML DOM ที่แสดงผลย่อยของโหนดตามการเปลี่ยนแปลงสถานะ มันจัดการ DOM น้อยที่สุดเท่าที่จะเป็นไปได้เพื่อให้คอมโพเนนต์ของคุณทันสมัย

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

คำตอบทั้งหมดนั้นยอดเยี่ยม ฉันเพิ่งมาพร้อมกับการเปรียบเทียบซึ่งอาจให้คำอุปมาในโลกแห่งความจริง

DOM ที่แท้จริงนั้นเหมือนห้องของคุณโหนดเป็นเฟอร์นิเจอร์ในห้องของคุณ DOM เสมือนเป็นเหมือนเราวาดพิมพ์เขียวของห้องปัจจุบันนี้

เราทุกคนมีประสบการณ์ในการเคลื่อนย้ายเฟอร์นิเจอร์มันเหนื่อยมาก (แนวคิดเดียวกับการปรับปรุงมุมมองในคอมพิวเตอร์) ดังนั้นเมื่อใดก็ตามที่เราต้องการเปลี่ยนตำแหน่ง / เพิ่มเฟอร์นิเจอร์ (โหนด) เราต้องการเปลี่ยนแปลงที่จำเป็นเท่านั้น

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

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

มาทำความกระจ่างในเรื่องนี้กันเถอะ React (หรือไลบรารี่อื่น ๆ ) คือ "layer" บน javascript

ไม่มีสิ่งนั้นเป็นเสมือนโดมไม่มีโดมที่ไม่มีคนอยู่

ให้ฉันอธิบายใน javascript ง่าย ๆ :

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

ณ จุดนี้เราได้สร้าง Div ซึ่งไม่แสดงบน dom เพราะยังไม่ได้แนบ

แต่เราสามารถเข้าถึงได้เพิ่มคุณสมบัติค่าเปลี่ยนแปลง ฯลฯ

เมื่อเราโทร: (สำหรับอดีตเพิ่มไปยังเนื้อหา)

    document.body.appendChild(vDom['newDiv'])

จากนั้นเราจะเห็นมัน

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)