React Render Element

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

與瀏覽器的 DOM element 不同，React element 是單純的 object，而且很容易被建立。React DOM 負責更新 DOM 來符合 React element。

注意：

大家可能會將 element 與更廣為人知的「component」概念混淆。Component 是由 element 所「組成」的。 

React element 是 immutable 的。一旦你建立一個 element，你不能改變它的 children 或是 attribute。 

An element is like a single frame in a movie: it represents the UI at a certain point in time.With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render().

Consider this ticking clock example:

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);

基本上就是要透過這個setInterval的方法去更新ReactDom render的element

React Only Updates What’s Necessary

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

以上例來說,React 會比較整個element跟children 與之前哪裡不同, 只更新不同的部分