useState使用和原理

2022-06-28 16:09:15 字數 1744 閱讀 4738

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 存在的時候就有問題了,只能變乙個狀態了。

function

counter()

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支援請...