[React Hooks 學習筆記] useState、useEffect

前言

這篇文章將會介紹 React Hooks，Hook 是 React 16.8 中增加的新功能。它讓我們不必寫 class Component 就能使用 state 以及其他 React 的功能。

下半部會列出本人目前在實際專案時，公司所提出的需求，哪針對這個需求，又是如何使用哪些 Hooks，來協助我們解決這些需求。

介紹 Hook - React

這裡附上官網說明，請參考。

useState - 元件狀態管理

useState：使 Functional Component 能夠使用 state。

基本結構用法：const [state, setState] = useState(initialState)

1. state 為我們要設置的狀態。
2. setState 為更新 state 的方法，命名依照專案的需求而定。
3. initialState 為初始的 state，可以是任意的資料型別，也可以是 callback Function，但要注意的是，最後要 return 回一個值。
4. 承上 3 點基本說明，以下是一個基礎範例說明。

範例 1

範例 2

useEffect - 副作用處理

useEffect：資料獲取、訂閱或手動方式修改 React Component DOM 都可以稱為副作用 (side effect)。useEffect正是用來處理這些副作用的。同時 useEffect也是 componentDidMount，componentDidUpdate和componentWillUnmount這幾個生命週期方法的統一。

基本使用

基本結構用法：useEffect(callback, array)

1. callback：回調函式，用於處理副作用邏輯。
2. array (可選)：一個陣列，用於控制與執行。

範例 3

callback 副作用邏輯

useEffect(callback, array)

callback (回調函式)是useEffect的第一個參數，我們所有的副作用邏輯都應該在這裡處理。另外，我們可以在 callback 中返回一個函式，用於清理工作。

範例 4

array 控制邏輯

useEffect(callback, array)

array (陣列)是useEffect的第二個參數，它可以用於控制useEffect是否執行。

另外，主要又會分為以下兩種情況：

1. 如果是空的陣列，則只會執行一次 (初次 render 之後)，相當於 componentDidMount。
2. 如果陣列內，我們有塞值進去，哪麼useEffect會在該陣列發生改變後執行。
3. 實際的情境下，這裡會有第三種情況，就是第二個參數陣列可以不填，這個useEffect會在每次畫面渲染時都會執行。

範例 5

useEffect 在什麼時候執行 ?

useEffect會在每一次render之後執行，包含初次render和更新render。

可以執行多個 useEffect 嗎 ?

是可以的，我們可以同時執行多個useEffect，如下所示：

範例 6

範例 7

useEffect 處理資料獲取

範例 8

範例 9

useEffect 清理機制

在 React 中有常見的兩種副作用，一種是需要清理的，另一種則是不需要清理的。

1. 網路請求、手動變更 DOM、和 logging 等…這些是不需要清理的，useEffect會自動處理。
2. 訂閱和取消訂閱，事件監聽和取消事件監聽，這種是需要清理的。

下面是useEffect清理機制：

1. useEffect 在每次執行之前都會自動清理之前的 effect。
2. effect 中可以返回一個函式用於清理工作。

範例 10

結論