經過昨天對Hook有個初步的認識之後，下方介紹幾個Hook的範例。

Hook 的規則

• 建議只在最上層呼叫 Hook。不在迴圈、判斷式、或是function 中呼叫 Hook。
• 除去客製化Hook之外，只在 React function component中呼叫 Hook。不要在一般JavaScript function中呼叫 Hook。

State Hook

下面用計時器作介紹

import React, { useState } from 'react';

function Example() {
  // 宣告一個新的 state 變數，名字叫做「count」，類似於class中的
  // this.state = {
      count: 0
    };
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState:回傳目前state數值(count)和一個更新state數值的function(setCount)。
state裡面可以放字串、物件、陣列，且state可以拆成多個useState()，或是全部塞在同一個useState()裡面。

function ExampleWithManyStates() {
  // 宣告多個 state 變數!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

Effect Hook

Effect(副作用)從字面上可以解釋為除了主要作用之外，所產生出的額外作用。用JS的表達式作例子的話，會變動原本的變數的值的話，便稱作帶副作用的表達式。如counter++、x += 3等。
Hook中useEffect便是帶有副作用的function，會依據每次變數的變化，刷新useEffect裡面的function，下面的計時器例子中便是在每次點擊按鈕時除了刷新點擊次數外，瀏覽器的titlt也會不斷刷新。

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 每次點擊時更新文件標題
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}