Virtual DOM Diffing Algorithm Demonstration Project
This demo website provides a simple visualization of how React.js implements
the virtual DOM (Document Object Model).
The boxes on the left-hand side are different variations of a simple todo list. Clicking on any two will
show their corresponding vDOM representations in the right-hand boxes.
After clicking Diff vDOMs the differences between the two will be highlighted
to show how elements have been added, removed or modified.
Click Reset to try again.
All of these vDOM comparisons are being made in the moment by a simplified
recreation of the virtual DOM diffing algorithm (link to source code below).
A virtual DOM Node is a POJO (Plain Old Javascript Object) containing a few
pieces of key information:
Type: The type of HTML element being represented
Props: HTML attributes or React data being passed into element
Children: (Key in Props object) An array of vDOM nodes nested in the element
Key: Used to distinguish vDOM nodes in lists (not used by HTML)
Ref: A pointer to the corresponding HTML DOM Node
$$typeof: (Not used in my version) React.js uses this to protect against
malicious user input