iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

看初心者怎麼學React系列 第 9

Day9 渲染元件

渲染(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的節點

渲染完的畫面如下

https://ithelp.ithome.com.tw/upload/images/20210924/20140303tArnfC1oK5.png


更新被渲染(render)的元件

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

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

React 只更新畫面上有變動element

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


上一篇
Day8 撰寫JSX
下一篇
Day10 React Props
系列文
看初心者怎麼學React30

尚未有邦友留言

立即登入留言