hooks 是 react 16 中的特性,解決函式元件想使用類元件的一些特性。
usestate
之前是在類元件中使用狀態通過 state 定義,大概**是這樣的。
import react from 'react';class counter extends react.component
handleclick = () =>)
}
render()
onclick=>改數字
);
}
}
function
render()
render()
但是函式元件沒有例項,也沒有狀態。函式元件使用狀態需要使用 usestate 鉤子。
關於 usestate 的用法是,需要傳入乙個引數作為狀態的初始值,當函式執行後會返回兩個值,乙個是當前狀態的屬性,乙個是修改狀態的方法。
我們通過乙個計數器的例子,當點選按鈕表示狀態加1。
import react, from 'react';function
counter()
onclick=
>改數字
)
}
function
render()
render()
現在我們已經掌握了它的用法,那麼我們開始分析它的原理。
原理我們需要寫乙個 usestate 方法,會返回當前狀態的屬性和設定狀態的方法,每當狀態改變之後,方法中會呼叫重新整理檢視的 render 方法。
let memoizedstate;function
usestate (initialstate)
return
[memoizedstate, setstate]
}
再次嘗試之前的**,依然可以正常使用,但是當多個 usestate 存在的時候就有問題了,只能變乙個狀態了。
functioncounter()
onclick=
>改數字
onclick=`)
}
>改標題
)
}
現在我們需要優化我們的 hooks ,解決多個 usestate 同時使用的問題,當多個狀態存在的時候,我們需要使用陣列儲存狀態。
let memoizedstates =let index = 0
function
usestate (initialstate)
return [memoizedstates[index++], setstate]
}
function
counter()
onclick=
>改數字
onclick=`)
}
>改標題
)
}
function
render()
render()
現在已經完成了 usestate 的基本原理,當你了解原理之後,使用 hooks 就變得更加容易了。
SDWebImage原理和使用
使用場景 以下 在需要監聽網路狀態的方法中使用 afnetworkreachabilitymanager mgr afnetworkreachabilitymanager sharedmanager setitem customitem item setitem customitem item el...
TCP Fast Open原理和使用
tcp建立連線需要三次握手,這個大家都知道。但是三次握手會導致傳輸效率下降,尤其是http這種短連線的協議,雖然http有keep alive來讓一些請求頻繁的http提高效能,避免了一些三次握手的次數,但是還是希望能繞過三次握手提高效率,或者說在三次握手的同時就把資料傳輸的事情給做了,這就是我們這...
Hystrix原理和使用
構造乙個 hystrixcommand或hystrixobservablecommand物件,用於封裝請求,並在構造方法配置請求被執行需要的引數 執行命令,hystrix提供了4種執行命令的方法,後面詳述 判斷是否使用快取響應請求,若啟用了快取,且快取可用,直接使用快取響應請求。hystrix支援請...