React hook 相關內容

usereducer 可以傳給子元件個 dispatch 函式，子元件可以通過傳遞不同的 action，來達到不一樣的處理（比如加 1 或減 1），而用 usestate 就要定義多個並且傳遞多個

因為陣列只是定義了個順序，元件方要使用什麼名字都可以 ; 物件則定義死了 key，並且無法在乙個元件裡填寫多個，因為乙個元件的 state 命名要唯一

只要不是將資料轉成檢視，像是 ajax 請求，為 dom 元素新增事件，設定定時器

類元件缺少邏輯復用機制

包裹類元件，增加了元件層級，增加了除錯的難度以及執行效率

類元件經常會變得很複雜很難以維護

將一組相干的業務邏輯拆分到了多個生命週期函式中，比如建立與銷毀寫在不同的生命週期

在乙個生命週期函式內存在多個不相干的業務邏輯，比如又是 ajax 請求，又要設定標題

類成員方法不能保證this 指向的正確性

用於為函式元件引入狀態

引數除了是任意資料型別外，也可以是個函式，用於初始值是動態值的情況

函式只會被呼叫一次，相當於只會在元件初次渲染時執行，而在元件更新時並不會執行，用於初始值是由外部傳入的場景

const [count,setcount] = usestate(() =>)

如果在函式體裡寫成如下，那麼元件更新時，count 的值又會被設定為初始值，更新失效

const countnum = props.count || 0const [count,setcount] = usestate(countnum)

設定狀態值的方法可以是乙個值也可以是個函式，是非同步的

setcount(count =>)

比起 usestate，減少傳遞函式給子元件，通過引數的值來做不同的效果，而不像 usestate 的更改做的事情比較單一

不需要傳遞多個修改資料的方法，比如數值加1，或減1，而是直接將 dispatch(usereducer 的第二個引數)傳給子元件，子元件傳遞不同的 action 來觸發

在跨元件層級獲取資料時簡化獲取資料的**

相當於將 countcontext.consumer 簡化成 usecontext(countcontext)

第二個引數，不傳時任何資料發生改變都會觸發**函式，

傳遞陣列時，表示指定資料發生變化時才會觸發**函式

useeffect(() =>,[count])

useeffect 的引數函式不能是非同步函式，因為 useeffect 要返回清理資源的函式，如果是非同步函式就變成了返回 promise，可以改成自執行函式來解決

useeffect(() =>)()
})

監測某個值的變化，根據變化值計算新值

會快取計算結果，如果監測值沒有發生變化，即使元件重新渲染，也不會重新計算。此行為可以有助於避免在每個渲染上進行昂貴的計算

const result = usememo(() =>,[count])

效能優化，如果本元件中的資料沒有發生變化，阻止元件更新，類似於類元件中的 purecompoent 與 shouldcomponentupdate,但 memo 預設只能監聽 props 更改

function
counter() 
export 
default memo(counter)

效能優化，快取函式，使元件重新渲染時得到相同的函式例項

父子元件

const resetcount = usecallback(() => setcount(0),[setcount])

獲取 dom 元素物件，物件會有個 current 屬性指向 dom 元素

const username =useref()
return

儲存資料(跨元件週期)

即使元件重新渲染，儲存的資料仍然還在，

儲存的資料被更改不會觸發元件重新渲染

用處：在 useeffect 區別 didmount 還是 didupdate 時，

成員列表下拉載入更多時，

用於儲存 pageno 定時器

標準的封裝和共享邏輯的方式是個函式，

其名稱是以 use 開頭

其實就是邏輯和內建 hook 的組合

共享邏輯：有共同的業務邏輯，比如兩個元件都有獲取文章的需求，那麼就可以將獲取文章抽成自定義 hook

usehistory uselocation useroutematch useparams（路由引數）

//props 輸出的物件，有以下屬性

history

location

match

let state =;
let setters =;
let stateindex = 0;
function
createsetter (index) 
}function
usestate (initialstate) 
function
render ()

//
上一次的依賴值
let prevdepsary =;
let effectindex = 0;
function
useeffect(callback, depsary)  
else
//同步依賴值
prevdepsary[effectindex] =depsary;
effectindex++;
}}

function
usereducer (reducer, initialstate) 
return
[state, dispatch];
}

ORACLE相關內容

1 em,dbca,netca,netmgr出現亂碼方案 cd oracle home jre lib mv font.properties font.properties.bak mv font.properties.zh font.properties em,dbca,netca,netmgr詳...

JVM相關內容

本地 native code 每個因素對記憶體占用的影響又會隨著應用程式執行環境和系統平台的不同而變化，那怎樣計算總的記憶體佔用量？是的，想得到乙個準確的數字不是那麼容易，因為你很難控制本地 native 部分。你能控制的部分只有堆大小 xmx，類占用的記憶體 xx maxpermsize，還有...

指標相關內容

1.指標是變數，佔4位元組，存放的是位址 2.指標型別與零值比較 if n null 或者if n null 3.野指標 int p 空指標 int p null 避免野指標以char型別為例 char p char mallloc sizeof char 10 要包含標頭檔案 include 使...

React hook 相關內容

ORACLE相關內容

JVM相關內容

指標相關內容

相關推薦