渲染（render）元件

我們知道了JSX的語法寫出元件的結構，也知道如何宣告元件了， 現在來學如何把元件渲染到畫面上吧！

利用react-dom提供的ReactDOM.render()方法將JSX的樣板語法轉為HTML語法。

ReactDOM.render(element, container[, callback])

第一個參數：顯示的React element元素物件
最小單位是元素或使React的元件。(元件是由很多子元素所組成)

第二個參數：指定渲染的DOM節點容器
會從在index.html上對應id的節點做為容器渲染元件。

第三的參數(選填)：回調函式
如果第三個參數有回條函式，在渲然完元件後，便會使用這個函式。

在先前建立的專案中，是在src / index.js的檔案中渲染我們最基底的App.js裡的元件（component）

src / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
	() => {console.log('渲染完成')} //在這裡另外加入了回調函式，當渲染完成後會執行
);

public / index.html

<div id="root"></div> //渲染React element的節點

渲染完的畫面如下

更新被渲染（render）的元件

建立出來的React element是描述虛擬DOM(Virtual DOM)的屬性的樹狀物件，是狀態和內容都無法變動的。所以當資料狀態被更新時，React會重新創建一個React element供給畫面做渲染。

這樣看的話每次要重新渲染不是很耗費效能？別擔心

React 只更新畫面上有變動element

透過比對在資料狀態改變前後 Virtual DOM 來判斷是否更新創建element、建立真的 DOM，只去做到最小程度的渲染，藉此優化效能。