2018 11 18 react 學習筆記

2021-09-01 06:19:42 字數 1074 閱讀 5284

虛擬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一樣的模...