๐ Build a Simple Virtual DOM from Scrath
To run
$ npm install
$ npm run dev
๐ Side Notes
all variable with
- $ - when referring to real doms, e.g
$div, $el, $app
- v - when referring to virtual doms, e.g
vDiv, vEl, vApp
๐บ The way how to show elements on browser
1. createElement.js
just create object
โผ like this plain object, this is virtual DOM
2.render.js
create actual DOM from virtual DOM object
โผ like this <div id='app'></div>
3.mount.js
set actual DOM to target element in html file
โผ then we can see on browser
โผ Problem
If I execute code which render every 1 sec, all elements re-render every sec as well
โผ look at that, input renders every second, so I cant write anything !!!
โ How to solve it
diff.js
1, find different node between old virtual DOM and new virtual DOM
2, return function the way how to change this node
โผ now input doesnt render, so we can write normaly!!
๐ Others
this algorithm of searching different node is "stack", this is not used in current React.js.
this "stack" has problem which need to search different node recursively from top node.
Now algorithm is called "Fiber". It is created by singly linked list, so it doesn't need to search different node recursively because each nodes are independent.
React FiberใฎใFiberใใจใฏใชใใชใฎใๅๅผทใใฆใฟใ
A deep dive into React Fiber internals
๐ reference
VIDEO - Building a Simple Virtual DOM from Scratch - Jason Yu
This video helped me sooooooooo much !!