全域性安裝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 定...