渲染（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，只去做到最小程度的渲染，藉此优化效能。