虛擬dom:用js物件的形式,來虛擬頁面上dom巢狀關係;(虛擬dom是以dom物件的形式存在的;)
本質:用js物件,來模擬dom元素和巢狀關係;
目的:就是為了實現頁面元素的高效更新。
diff演算法:
tree diff :新舊兩課dom樹,逐層對比的過程,就是tree diff;
component diff:每一層,元件級別的對比
·如果對比前後,元件型別相同,則暫時認為此元件不需要被更新
·元件型別不相同,則移除舊元件,建立新元件,並追加到頁面上
element diff :進行元件對比的時候,如果元件型別相同,則進行元素級別的對比,
這就叫做element diff;
在專案中使用react
一、安裝配置react
二、開始使用
1.匯入 react包
import react from 'react'//這個包用來建立元件,虛擬dom元素,生命週期
import reactdom from 'react-dom'//把建立好的元件 和虛擬dom 放到頁面上展示的
2.建立虛擬dom元素
最基本的三個引數
react.createelement('')
引數1:建立元素的型別,字串,表示元素的名稱
引數2:是乙個物件或null,表示當前這個dom的元素的屬性
引數3:子節點(包括 其他虛擬dom 或者 其他文字子節點)
引數n:其他子節點
const myh1=react.createelement('h1',,'這是乙個h1')
3.使用reactdom把虛擬dom渲染到頁面上 react學習六 react路由
react router 安裝包yarn add react router dom匯入路由模組 import reactdom from react dom route 表示乙個路由規則,在 route 上,有兩個比較重要的屬性,path component link 表示乙個路由的鏈結 就好比 v...
React學習 一 安裝React環境
建議碼友們一定要看react官方文件哦!1.node.js安裝 如果沒有安裝的小夥伴,看這裡node安裝教程 安裝之後一定要檢驗一下版本號是否出來了 2.安裝 簡單說一下 npx 的作用如 1.預設情況下,首先檢查路徑中是否存在要執行的包 即在專案中 2.如果存在,它將執行 3.若不存在,意味著尚未...
react獲取全域性 react學習筆記
個人之前也粗略看過react的文件,但是程式設計師最怕的就是沒有專案實操,看完後一段時間就全忘了,但是現在市面上react的使用又很多 我太難了 最近因為疫情只能呆在家裡,剛好利用這段時間搞一搞。當然也是粗略的搞,做完乙個大屏展示後,發現react上手確實比vue要難點。react沒有vue一樣的模...