React.js 實戰之 元素渲染

摘要： 元素是構成 React 應用的最小單位 元素用來描述在螢幕上看到的內容 與瀏覽器的 DOM 元素不同，React 當中的元素事實上是 普通的物件 React DOM 可以確保 瀏覽器 DOM 的資料內容與 React 元素保持一致 注意: 初...

元素是構成 React 應用的最小單位

元素用來描述在螢幕上看到的內容

與瀏覽器的 DOM 元素不同，React 當中的元素事實上是 普通的物件

React DOM 可以確保 瀏覽器 DOM 的資料內容與 React 元素保持一致

注意:

初學者很可能把元素的定義和一個內涵更廣的定義“元件”給搞混了

會在下節當中對元件進行詳細的介紹

元素事實上只是構成元件的一個部分

將元素渲染到 DOM 中

首先我們在一個 HTML 頁面中新增一個 id="root" 的 <div>

在此 div 中的所有內容都將由 React DOM 來管理，所以我們將其稱之為 “根” DOM 節點

我們用React 開發應用時一般只會定義一個根節點

但如果你是在一個已有的專案當中引入 React 的話，你可能會需要在不同的部分單獨定義 React 根節點

要將React元素渲染到根DOM節點中，我們通過把它們都傳遞給 ReactDOM.render() 的方法來將其渲染到頁面上