[ Day 04 ] Virtual DOM ? ReactDOM ?

还记得我们在 Day 02 的时候有跟大家提到 React.js 是使用 Virtual DOM 的概念来进行渲染的吗？
那今天就一起来看看什麽是 Virtual DOM 吧！

Virtual DOM

一个存在於 Memory 当中的 JavaScript 物件，并且模拟了 DOM 本身的树状结构。当资料结构产生变更时，会比较新旧之间的差异有哪些？最後再将有差异的部分确实更新到该浏览器的 DOM 中。

Virtual 的中文翻译就是模拟，所以白话文来说就是指模拟 DOM 的意思。我们一般在使用 JavaScript 做撰写时很常会要绑定和操作许多的 DOM ，但是每次的操作都会让浏览器重新的渲染画面。而在现今的开发环境下， DOM 的数量都比以往还要更加的庞大，因此多次的页面渲染对於效能上肯定会造成影响。
所以这时候 Virtaul DOM 的存在就可以在大部分的情况下，大大解决网页渲染的效能问题。

为什麽需要 Virtual DOM ？

现今的主流框架和函式库使用了 Vitrual DOM 的概念，透过 Diff 演算法比较新旧 Virtual DOM 之间的差异後再去更新到实际的 DOM 上，主要是希望能够让网页的效能提升之外也让使用者体验更佳友善。
所以 React.js 中就是使用到这个 Virtual DOM 的概念来进行绑定和渲染而提高了效能和使用体验。不过它究竟是应用在哪一个部分呢？

React DOM

打开昨天 Day 03 中我们所建立的 React.js 专案中的 index.js 档案，我们可以看到以下这段程序码：

这段程序码中的 ReactDOM 函式就是 React.js 自己所产生的 Virtual DOM 物件。

刚刚上面有提到过，React.js 透过操作自己的 Virtual DOM（ 也就是 ReactDOM ）来取代实际操作浏览器本身的 DOM ， 因此 ReactDOM 其实就是我们整个 React.js App 的进入点。

进入点？

从上面 index.js 档案中的程序码可以发现，在 ReactDOM.render() 的函式中有一个 App 的元件被引入使用了。这时候我们打开 App.js 的档案来看看：

上面 App.js 中的内容现在都有确实呈现在浏览器的画面上，不过这是为什麽呢？

因为我们将该元件 App.js 引入到了 ReactDOM 中，而 ReactDOM 会将其函式内的元件或参数内容进行比对，并以此来判定需要重新渲染的部分为哪些？接着才会操作在实际 DOM 的位置上并完成渲染的动作。
所以进入点的概念就是指这个 App 内所有的元件或参数都是由这个函式来进行渲染，而且是绑定在一个 id 为 root 的 div 标签。

备注：可以打开 public 资料夹中的 index.html 档案就可以看到下面程序码中倒数第三行标签 div 的 id 名为 root 的进入点

现在大家对於 React.js 画面渲染的背後原理有了基本概念後，我们下一篇要来介绍如何在 React.js 中撰写元件内的 HTML 罗！
有任何问题的话还是一样都非常非常欢迎提出和指教～
那我们下篇见ʘ‿ʘ