前面的筆記里面說(shuō)過(guò)在React16.8之前，函數(shù)式組件里你沒(méi)辦法初始化并使用狀態(tài)（state），在React16.8之后，useState就很好的解決了這個(gè)問(wèn)題，它可以讓你在函數(shù)式組件里面使用state。

簡(jiǎn)單地說(shuō)，你就把它當(dāng)做函數(shù)組件里的setState來(lái)用就行了 基本用法：

用法很簡(jiǎn)單，代碼如下：

圖片

如上所示，你只需要useState傳入一個(gè)初始值，然后它返回一個(gè)數(shù)組，數(shù)組第一個(gè)變量是state，數(shù)組第二個(gè)變量就是類似setState的方法 我自己整理了一些使用useState需要注意的地方，可能你也需要。

注意點(diǎn)

初始值傳入方法

這個(gè)問(wèn)題是有次在我的技術(shù)群里粉絲問(wèn)到的，大概就是在公司的歷史代碼里看到useState初始化的時(shí)候傳入了一個(gè)function，感覺(jué)到這種用法很少見(jiàn)，后來(lái)我查閱了文檔，發(fā)現(xiàn)這個(gè)確實(shí)很有意思。

先看看這個(gè)官方例子：

圖片

上面這個(gè)例子中，state的初始化我們是使用createInitialTodos這個(gè)方法來(lái)完成的。

看下控制臺(tái)，你會(huì)發(fā)現(xiàn)有個(gè)問(wèn)題，每次todolist組件重新渲染的時(shí)候，createInitialTodos方法都會(huì)重新運(yùn)行一次，但是，只有第一次的返回結(jié)果被useState使用，如果createInitialTodos在做非常耗時(shí)的計(jì)算的話，這就很消耗性能了。

所以，這里需要注意的是如果使用方法來(lái)初始化state，直接把它自身傳進(jìn)去就行了，不用運(yùn)行它，也就是下面這樣寫代碼：

基于最新的state來(lái)改變state

這個(gè)問(wèn)題在類組件的setState中也比較常見(jiàn)，直接看代碼：

上面這個(gè)例子，你以為調(diào)用了setAge三次，它就會(huì)從0加到3，那就大錯(cuò)特錯(cuò)了。

事實(shí)上，state這個(gè)東西你可以把它理解為一個(gè)快照（snapshot），你更新了它，但是它只會(huì)在下次render的時(shí)候才改變，也就是說(shuō)你這樣連著調(diào)用三次setAge(age+1)，每次取得都是當(dāng)前render中的快照，相當(dāng)于每次都是setAge(42+1)，所以，最終結(jié)果是43，并不是45。

那么如果我就想基于最新的state來(lái)改變state，代碼可以這樣寫：

也就是給setAge傳入方法，這個(gè)方法接受上一個(gè)狀態(tài)，返回新的狀態(tài)。

連續(xù)傳入三次方法，這三個(gè)方法就會(huì)進(jìn)入隊(duì)列中并且依次執(zhí)行，執(zhí)行完畢之后得到45，最后就拿著45去更新age。

這個(gè)在官方文檔里面也叫做批量更新state，都是使用給狀態(tài)更新方法傳入回調(diào)來(lái)實(shí)現(xiàn)的。