建立 React 應用程式最小的單位是 element。 —— React 文件

這句話好像可以有兩種意思，

1. 在元件裡面只放一個 element，為 React DOM 的最小單位。
2. 每個 React element render 都有一個 HTML 的 root DOM node 為進入點，是 React 的最小單位。

瞭解更多 Hello World 的部分

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

之前有提到 Babel 會把 element 轉換成 React.createElement("h1", null, "Hello, world")，但 createElement 又是什麼？把他 console.log 出來看看，其實他會產生一個 ReactDOM 物件。

以下整理 React 產生 Hello World 的流程：

1. 在 HTML 上，有一個進入點 document.getElementById('root')
2. JSX 將透過 babel 轉成可以 render 的 ReactDOM
3. ReactDOM 再透過 ReactDOM.render 將產生的 element 加入 root 的子結點

關於畫出 Element

在知道如何產生的 React element 之後，有兩件值得注意的事

1. 一旦你建立一個 element，你不能改變它的 children 或是attribute。（了解不可變的 Immutable）
2. 所以每次的更新都會重畫畫面。雖然都會重新畫畫面，但 React 只更新必要的差異部分。

以下例子，“示意”每次 React 都會去重新畫畫面。

const thinkLists = ['Peter', "Sharan", "AJ", "John", "Alex"]

function tick() {
  let currentPerson = Math.floor(Math.random() * 1000)
 % thinkLists.length;
  const element = (
    <div>
      <h1> Thank you, { thinkLists[currentPerson] } !!</h1>
      <p> Thanks list: { thinkLists.join(", ") } </p>  
    </div>
  );
  // highlight-next-line
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

因為如過需要用 setInterval 持續更新太沒效率了，而且影響是整個程式的。所以文件裡也提到實際大部分 React 應用程式只呼叫 ReactDOM.render() 一次，並在後面的部分將 interval 改寫進元件中。而文件最後提到最重要的一句話是：「應該思考 UI 在任何時候應該如何呈現，而不是隨著時間的推移改變它」。

以上今天。

[突發奇想] 如果元件是空字串畫圖，document.querySelector("#root") 會不會抓到東西？結果是 null，但改純字串還是會有 root。

const element = "";
ReactDOM.render(element, document.getElementById('root'));

參考資料：
https://zh-hant.reactjs.org/docs/rendering-elements.html
Immutability in React