HOOK是React的新增特性，它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。Hook 是一些可以讓你在函數(shù)組件里“鉤入” React state 及生命周期等特性的函數(shù)。下面主要介紹一下useState和useEffect 的使用。

useState

通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部 state。useState 會返回一對值：當(dāng)前狀態(tài)和一個(gè)讓你更新它的函數(shù)，你可以在事件處理函數(shù)中或其他一些地方調(diào)用這個(gè)函數(shù)。useState 唯一的參數(shù)就是初始 state。這個(gè)初始 state 參數(shù)只有在第一次渲染的時(shí)候會被用到。

useState簡單實(shí)例

使用useState可以聲明多個(gè)state變量

實(shí)例-聲明多個(gè)state變量

useEffect

useEffect （副作用函數(shù)）是一個(gè) Effect Hook，給函數(shù)組件增加了操作副作用(在 React 組件中進(jìn)行數(shù)據(jù)獲取、訂閱或者手動修改 DOM等)的能力。它跟 class 組件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不過被合并成了一個(gè) API，默認(rèn)情況下，React 會在每次渲染后調(diào)用副作用函數(shù) ，包括第一次渲染的時(shí)候。

useEffect簡單實(shí)例

通過使用 Hook，你可以把組件內(nèi)相關(guān)的副作用組織在一起（例如創(chuàng)建訂閱及取消訂閱），而不要把它們拆分到不同的生命周期函數(shù)里。

上面實(shí)例每次重新渲染都要執(zhí)行一遍useEffect，如果你在useEffect中使用了useState則會導(dǎo)致無限循環(huán)，這樣顯然是影響性能的。為了處理這個(gè)問題，我們可以給useEffect傳第二個(gè)參數(shù)。用第二個(gè)參數(shù)來告訴react只有當(dāng)這個(gè)參數(shù)的值發(fā)生改變時(shí)，才執(zhí)行我們傳的副作用函數(shù)（即第一個(gè)參數(shù)）。

useEffect-第二個(gè)參數(shù)

當(dāng)我們第二個(gè)參數(shù)傳一個(gè)空數(shù)組[]時(shí)，相當(dāng)于只在首次渲染的時(shí)候執(zhí)行。

第二個(gè)參數(shù)傳一個(gè)空數(shù)組

在這里只是簡單的介紹了HOOK中useState和useEffect的使用，其實(shí)HOOK特性還有很多內(nèi)容值得我們?nèi)W(xué)習(xí)去探索。