$ npm install
$ npm run dev
all variable with
- $ - when referring to real doms, e.g
$div, $el, $app
- v - when referring to virtual doms, e.g
vDiv, vEl, vApp
just create object
โผ like this plain object, this is virtual DOM
create actual DOM from virtual DOM object
โผ like this <div id='app'></div>
set actual DOM to target element in html file
โผ then we can see on browser
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 !!! ๐ฑ
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!!
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
VIDEO - Building a Simple Virtual DOM from Scratch - Jason Yu
This video helped me sooooooooo much !!