react安裝極其了解

2022-02-16 01:28:33 字數 1350 閱讀 7152

全域性安裝react腳手架工具

1.//換源 npm config set registry

2.//配置後通過以下方法驗證是否成功 npm config get registry

react的render方法:

對於元件而言:

建立時執行

state發生變化

props發生變化執行

forceupdate

對於整個專案而言:

建立時執行

setstate

forceupdate

1.state props 資料

2.jsx 模板

3.資料+模板結合。生成真實的dom。顯示在頁面中

4.setstate 發生變化

5.資料+模板結合。生成真實的dom。替換原有的dom

缺點:第一次建立完整的真實的dom

第二次建立完整的真實的dom,替換原有的dom

1.第二次建立真正dom效能消耗非常高

2.替換dom效能消耗非常高

1.state props 資料

2.jsx 模板

3.資料+模板結合。生成真實的dom。顯示在頁面中

4.setstate 發生變化

5.資料+模板結合。生成真實的dom。不進行替換原有的dom

6.新的dom和原來dom進行比對,找到差異。(消耗效能)

7.只替換發生變化的dom。

缺點:效能提公升並不明顯

虛擬dom的概念:

1.state props 資料

2.jsx 模板

3.資料+模板結合,生成虛擬dom(js物件)。

jsx模板 <

div><

span

>hello world

span

>

div>

createelement

生成真實dom

4.生成真實的dom。顯示在頁面中

5.setstate 發生變化

6.資料+模板結合。生成虛擬dom

7.原來的虛擬dom和新的虛擬dom,進行比較找到差異。(diff演算法,同級比較)

8.只替換發生變化的dom。

優點:1.提公升了效能

2.可以跨平台,有了react native

package.json配置項 

,"scripts":

}index.html

<

link

rel="manifest"

href="%public_url%/manifest.json"

> //有利於搜尋引擎搜尋,manifest.json配置

當專案沒有引入js檔案時顯示頁面上

react 01 簡單了解react

1 單向資料流 view actions state view state 驅動應用的資料來源,狀態 view 以宣告的方式將state對映到檢視 actions 響應在view上的使用者輸入導致的狀態變化 單項資料流過程 簡單的單向資料流是只使用者訪問view,view發出使用者互動的action...

了解 React 之 hooks(三)

在前面的文章 了解 react 之 hooks 二 中介紹了 hooks 的 3 個效能優化 api,分別為 react.memo react.usecallback react.memo。本文主要介紹 useeffect 的第二個引數。1.使用 useeffect,不給第二個引數 import r...

react 的定義元件(了解)

react 中定義元件的方法 1.定義元件 react.createclass 被淘汰了 定義元件中的函式 methods 的中的 this 統統指向 元件 2.函式定義元件 定義的元件時無狀態的,沒有 state 的狀態,沒有生命週期,就是乙個純粹的靜態頁面,不能訪問 this 3.class 定...