React元素渲染

2022-08-25 17:51:28 字數 1015 閱讀 1353

元素渲染

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

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

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

頁面中新增乙個id="root"div:

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

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

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

const element = ;

reactdom.render(

element,

document.getelementbyid('root')

);

react元素都是immutable不可變的。當元素被建立之後,你是五大改變其內容或屬性的。乙個元素就好像是動畫裡的一幀,它代表應用介面在某一時間點的樣子。

根據我們現階段了解的有關react知識,更新介面的唯一辦法是建立乙個新的元素,然後將他們傳入reactdom。render(方法:

//計時器的例子

function tick()

settimeinterval(tick(),1000);

即便我們美妙都建立了乙個描述整個ui樹的新元素,react dom也只會更新渲染文字節點中發生變化的內容。

根據我們以往的經驗,將介面視為乙個個特定時刻的固定內容(就像一幀一幀的動畫),而不是隨時處於變化之中(而不是隨時處於變化之中的一整段動畫),將會有利於我們理清開發思路,減少各種bug。

React學習 元素渲染

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

React之元素渲染

元素渲染 元素是構成 react 應用的最小單位,它用於描述螢幕上輸出的內容。const element 與瀏覽器的 dom 元素不同,react 當中的元素事實上是普通的物件,react dom 可以確保 瀏覽器 dom 的資料內容與 react 元素保持一致。將元素渲染到 dom 中 首先我們在...

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

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