[官網學 React] Docs：Rendering Elements 渲染元素
網址（英文）：https://reactjs.org/docs/rendering-elements.html
網址（中文）：https://zh-hant.reactjs.org/docs/rendering-elements.html
元素（element）是 React 應用程式中最小的單位，組件（component）就是由元素組成的。
一個元素描述出你想在螢幕上看到什麼：
跟瀏覽器的 DOM 元素不同，React 元素是物件，且很簡單創造。
React DOM會負責更新 DOM，讓它跟 React 的元素相符。
將一個元素渲染到 DOM
首先，在 HTML 需要一個 root 元素：
所有在 root DOM 節點內的東西，都是由 React DOM控管。
通常只用 React 建立的應用程式，會有一個單一的 root DOM 節點。
而如果你是將 React 組合進現有應用程式，可能就會有幾個獨立的 root DOM 節點，看你怎麼組合。
再來，運用 ReactDOM.render() 將 React 元素渲染進 root DOM 節點即完成：
更新渲染過的元素
React 元素是不變的（ immutable）。
一旦你建立好一個 React 元素，你就不能更改它的 children 或屬性。
一個 React 元素就像影片中的一個畫面，它顯現的是這個切確時間點的使用者介面（UI）。
截至目前我們從官網 Docs 學到的，如果想更新 UI，只能建立一個新的 React 元素，並傳給
ReactDOM.render()。
大部分 React 應用程式只呼叫 ReactDOM.render() 一次。
之後我們將會學習如何將這些程式碼封裝到 stateful component。
不過想想以下這個例子：
這個例子則會每一秒透過 setInterval() callback 呼叫一次 ReactDOM.render()，所以畫面上的時間是會每秒更新的。
React 只更新必要的元素
React DOM 會比較現有的元素和元素的 children 與先前的元素和元素的 children，接著就只更新必要的 DOM，達到想要的狀態。
官網說根據他們的經驗，選擇考慮 UI 在任何給定時刻應該要有的樣子，而不是如何隨時間更改它，可以消除一整類 bug。
就是只有在 UI 有變化需要渲染時才做選染，而不是依據一段一段的時間固定做渲染。
這樣對效能應該也是比較好的！
例如剛上面的 ticking clock 例子，透過瀏覽器工具檢視，會看到只有呼叫 callback 的部分有被重新渲染：
