kazoogon / virtual_dom_from_scratch

👨‍🎨 create simple virtual DOM, like tiny React.js

😛 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 !!