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

useState

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

useState簡單實例

使用useState可以聲明多個state變量

實例-聲明多個state變量

useEffect

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

useEffect簡單實例

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

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

useEffect-第二個參數

當我們第二個參數傳一個空數組[]時，相當于只在首次渲染的時候執行。

第二個參數傳一個空數組

在這里只是簡單的介紹了HOOK中useState和useEffect的使用，其實HOOK特性還有很多內容值得我們去學習去探索。