React Hooks (上)-useState&useEffect

photo by @joshuaearle

當functional component 遇上React Hooks，就好像白雪公主遇到她的王子…（我想不到更好的比喻了）有了Hooks，讓functional component也能擁有自己的state 、lifecycle，而且寫法也比原本的class component更加簡化

React Hooks的方法都以use開頭，也可以自己定義Hooks，至於為什麼要叫做Hooks? — 需要用到的時候，透過鉤子Hooks將功能勾進來使用

useState

能夠讓functional component建立自己的state，useState裡面傳入的是state的初始值，然後會回傳一個陣列，透過解構拿到state的當前值以及更新state的setState方法，可以在functional component建立多個useState！跟之前class component setState比起來，個人比較喜歡這種寫法，每次更新值都是針對當前的值，而不是一個對state物件裡的屬性操作，較為單純。

useState也可以傳入函式，但必須回傳值

const [count, setCount] = useState(()=> return 0})

點擊按鈕數字就會自動加1

此時發生一點小插曲，存檔之後，想看一下畫面發現報錯了！

反覆看了程式碼真的一頭霧水，只好求救google大神，才發現我的React不小心包在大括號裡面， 因為React預設為export default，所以一定要放在大括號外面，明明已經寫過很多遍，但是恍神的時候還是有可能寫錯，而且一時半刻找不出問題在哪裡orz

import React, {useState, Fragment} from 'react';

useEffect

useEffect用來處理副作用（side effect) ，什麼是副作用?就要先了解pure function

什麼是pure function?

一個funciton輸入相同的參數，會輸出相同的結果，以React來說就是給予相同的props，會渲染出相同的畫面

什麼是副作用（Side Effect）？

任何與function回傳值沒有相關的操作，像是ajax請求、監聽事件、手動修改DOM等等，可能會造成預期之外的影響

透過監聽state、 props的變化，來決定要不要更新 ，可以說是生命週期componentDidMount、componentDidUpdate、componentWillUnmount的集合版，會接受兩個參數，第一個參數是非同步的操作的函式，有點像是callback function的概念，在component進到哪個週期需要執行的動作

第二個參數為一個陣列，是給useEffect判斷要不要執行函式的變數，如果這個參數有更動才會執行function，第二個參數如果放一個空陣列，等同於是componentDidMount，如果放的不是空陣列，初始渲染會執行一次，陣列裡面的資料有異動會在執行一次(componentDidUpdate)。

userEffect(()=>{
//初始渲染執行一次，資料有變化再更新一次等於componentDidUpdate
},[data])

下面的例子是在componentDidMount階段呼叫api取得資料，然後再渲染到頁面上

假如第二個參數什麼都沒傳，就會變成每次渲染都會觸發，可能會發生無窮迴圈的問題

useEffect也可以回傳一個clean up的函式來執行component銷毀前要做的事情，像是清除計時器、取消api請求等等，等同於componentWillUnmount

可以同時使用多個useEffect沒問題，接下來會繼續介紹useContext、useRedux