【Day03】渲染元素 Rendering Element

React 的核心之一是 JSX 语法，
这意味着整个网页内容，包含 HTML 与 CSS，
基本上都是由 JS 产生的。

用 React 撰写的程序中，
所有介面都会以一个「root DOM node」为起点。

<div id="root"></div>

如果要在画面上渲染出如下，
以 JSX 撰写成的 React 元素

const element = <h1>Hello, world</h1>;

使用以下语法，
就能将 element 显示到页面的 #root tag 中

import ReactDOM from 'react-dom'

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

关於 React 的元件渲染

• React element 是不可变（immutable）物件，一旦建立後就不能再修改
• 更新 UI 唯一的方式是建立一个新的 element，并重新传入 ReactDOM.render()
• render 时， React 会比较 element 前後状态，并只更新需要变动的 DOM 以避免不必要的资源浪费

可参照以下官网范例，最小的 render 单位不是被宣告的 element，而是 DOM 节点，因此以下程序码 render 出来的 UI，只有 h2 标签会改变

function tick() {
  const element = (
	<div>
	  <h1>Hello, world!</h1>
	  <h2>It is {new Date().toLocaleTimeString()}.</h2>
	</div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);