Render Element（Day3）

建立 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