React之元素渲染

2021-09-01 02:36:33 字數 869 閱讀 6441

元素渲染

元素是構成 react 應用的最小單位,它用於描述螢幕上輸出的內容。

const element = ;
與瀏覽器的 dom 元素不同,react 當中的元素事實上是普通的物件,react dom 可以確保 瀏覽器 dom 的資料內容與 react 元素保持一致。

將元素渲染到 dom 中

首先我們在乙個 html 頁面中新增乙個 id=「root」 的:

在此 div 中的所有內容都將由 react dom 來管理,將其稱之為 「根」 dom 節點。

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

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

const element = ;

reactdom.render(element, document.getelementbyid('root'));

更新元素渲染

react 元素都是不可變的。當元素被建立之後,你是無法改變其內容或屬性的。

目前更新介面的唯一辦法是建立乙個新的元素,然後將它傳入 reactdom.render() 方法:

來看一下這個計時器的例子:

render()

}function tick()

setinterval(tick, 1000);

React元素渲染

元素渲染 元素是構成react應用的最小單位。元素用來描述你在螢幕上看到的內容 const element 與瀏覽器的dom元素不同,react當中的元素事實上是普通的物件,reactdom可以確保瀏覽器的資料內容與react元素保持一致。頁面中新增乙個id root 的div 在此div中的所有內...

React學習 元素渲染

react 元素構成元件,元件又構成應用。react 元素就是普通的js物件 俗稱 虛擬dom react 元素不是真實的 dom 元素,所以也沒辦法直接呼叫 dom 上原生的 api。渲染過程 react元素 描述 虛擬dom,再根據 虛擬dom 渲染出 真實dom。1 虛擬 dom 就是用 js...

react學習經驗總結(元素渲染)

const element 與瀏覽器的 dom 元素不同,react 當中的元素事實上是普通的物件,react dom 可以確保 瀏覽器 dom 的資料內容與 react 元素保持一致。首先我們在乙個 html 頁面中新增乙個 id example 的 在此 div 中的所有內容都將由 react ...