Skip to main content

VDOM ↔ Intermediate Abstraction layer between Source Code & DOM API , data structure to mirror DOM API comprised of Fiber (React Element)

aka VDOM, Virtual-Document-Object-Model, Virtual-DOM

image

VDOM designed for more efficient DOM Traversal, change detection & DOM mutation

Fiber​

internal React Object to rep each Node of DOM Tree

ReactDOM​

Renderer for React, to handle DOM updates

Diffing​

React HeuristicAlgorithm to reconcile change in state vs view & handle update to DOM

Applies Diffing to intelligently & efficiently push updates to DOM API for better performance

References​

  1. Stack Reconciler ↔ deprecated Reconciliation Algorithm used for VDOM from React 15.

  2. ReactDOM API ↔ core react library to render VDOM

  3. Declarative ↔ You tell React HOW you want the final web page to LOOK & let VDOM Abstracts & handle DOM manipulation more efficiently

  4. ReactDOMElement ↔ Type for react VDOM rep of element

  5. key ↔ special prop as string UID for VDOM to track/Diff list elements