React.js 實戰之 元素渲染

JavaEdge發表於2018-11-30

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

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

React.js 實戰之 元素渲染

與瀏覽器的 DOM 元素不同,React 當中的元素事實上是普通的物件
React DOM 可以確保 瀏覽器 DOM 的資料內容與 React 元素保持一致

注意:
初學者很可能把元素的定義和一個內涵更廣的定義“元件”給搞混了
會在下節當中對元件進行詳細的介紹
元素事實上只是構成元件的一個部分

將元素渲染到 DOM 中

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


React.js 實戰之 元素渲染

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

我們用React 開發應用時一般只會定義一個根節點
但如果你是在一個已有的專案當中引入 React 的話,你可能會需要在不同的部分單獨定義 React 根節點

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

相關文章