講到Function Component 一定是會講到Hook的!

Hook 讓我們可以不用改變Component的階層就可以重用stateful的邏輯。

Hook 是在React版本16.8所增加的功能，雖然說相較Class Component，
Function Component的生命週期比較單純，但目前React沒有計畫要移除Class Component，
所以我們也許會碰到只使用Class Component的專案、只使用Function Component的專案又或是兩種並存的專案(因為Hook是可以和既有的程式碼一起運作)。

前面在繪製我們的簡單計數器時，有稍稍的使用到Hook來去建立我們在function裡的state，
還記得前面用到的useState嗎 !? 對! 那就是Hook用來建立state的方式。

useState的概念類似Class Component裡的 this.setState，
但它不會把舊的和新的state併在一起。

傳入的參數是state的初始狀態 (不像this.state一樣一定要是物件)

function App() {
  	const [count, setCount] = React.useState(0);
  }

Function Component的生命週期 是使用 useEffect來執行，
useEffect會在每次render後執行，包含第一次的render，
且useEffect跟useState一樣可以同時使用很多個!

useEffect的第一個參數傳入的是要執行的程式碼，第二個參數傳入的是一個陣列，
陣列裡可以放入上層的props，可以去偵測props是否變動，來去執行effect。

Hook的規則

• 只在最上層呼叫Hook，不能在迴圈、判斷式、或是Function內的變數function使用
• 只在Function Component呼叫Hook，不要在一般的JS Function裡呼叫Hook (除了刻製化的Hook)
• 自己刻製化的Hook 可以在function內使用
• Hook是重複使用stateful邏輯的方式，不是state本身，其實，每次呼叫一個Hook都會有個完全獨立而且隔離的state，甚至可以在一個Component裡使用同一個刻製化Hook多次

咦!? 各位看官可能覺得上述提到的好像只有類似Class Component裡面的componentDidMount和componentDidUpdate 呀 ， 那我如果要在Hook裡用componentWillUnMount怎麼辦 !?

在useEffect裡，我們可以透過回傳一個function的方式來代替componentWillUnMount

  useEffect(() => {
   
   //要執行的程式碼
   
      //在這個effect之後進行清除
    return function cleanup() {
     
    };
  });

以上是 Function Component裡會用到的Hook及生命週期(Effect)，

小菜鳥已經竭盡所能地用最短的文字去敘述了，希望還算簡潔清楚 இдஇ

下一篇，要前往保管全局states的Redux了 (稍稍難一些些) ，快了!快結束了，撐住R ~~