如果想快速使用 Hook ，其實就參考 Hook 概觀分的五個面向，包含一定會用也最常用的 State Hook、Effect Hook，以下羅列：

• State Hook
• Effect Hook
• Hook 的規則
• 打造你自己的 Hook
• 其他 Hook

複習一下 Hook 是什麼?

Hook 是 function，他讓你可以從 function component「hook into」React state 與生命週期功能。

State Hook

我們在 function component 中呼叫 State Hook 用來加入一些 local state。但為什麼不直接宣告一個變數或物件儲存就好了? 因為需要進行資料的追蹤，所以還會搭配 set 事件，以下舉例。

在上一篇 Hello Hook 已經舉過單一個 State Hook 的例子，在這裡補充多個的宣告。例如設定 fruit，setFruit 進行 fruit 資料的儲存跟修改。

function OneMeal() {
  // 宣告多個 state 變數!
  const [bento, setBento] = React.useState("???");
  const [fruit, setFruit] = React.useState("?");
  const [beverage, setBeverage] = React.useState([{ text: '?' }, { text: '?' }, { text: '?' }]);
  
  return (
    <div>
      <h1>Hello useState</h1>
      <p> { bento } </p>
      <p> { fruit } </p>
      <ul>
          { 
            beverage.map((item)=>{
               return <li key={item.text}>{ item.text }</li>
            })
          }
      </ul>
      <button onClick={()=>{setFruit(fruit + '?')}}>Add Fruits</button> 
    </div>
  )
}

\\略

Codepen 附完整代碼

Effect Hook

記得在生命週期有學到 componentDidMount，componentDidUpdate，與 componentWillUnmount ，而 Effect Hook 把這些功能整合在一起，React component 把 fetch 資料、訂閱、或手動改變 DOM 視作基本渲染以外的 「副作用」，定針對這些處理寫了一個 Effect Hook 來集中我們這些 「副作用」的關注點。

function TestUseState() {
  const [title, setTitle] = React.useState("I am waiting...");
  
  React.useEffect(() => {
    
    async function getTitle() {
      let response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
      response = await response.json()
      setTitle(response.title)
    }
  
   getTitle()
  });

  return (
    <div>
      <h3>Hello UseEffect Hook</h3>
      <p>{ title }</p>
    </div>
  )
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <TestUseState />
      </div>
    );
  }
}

//略

Codepen 附完整代碼

官方訂定的 Hook 規則

• 只在最上層呼叫 Hook。不要在迴圈、判斷式、或是嵌套 function 中呼叫 Hook。
• 只在 React function component 呼叫 Hook。不要在一般 JavaScript function 中呼叫 Hook。（只有一個其他有效的地方可以呼叫 Hook——你自己的客製化 Hook。）

打造你自己的 Hook

當幾個元件使用了同樣的邏輯時，我們可以抽出並定義一個共通邏輯的 function 。在 Hook 出現以前，使用的解法都是 higher-order components 與 render props (後續文章補充)。以下舉例 setimeout 的共用邏輯，定可設定不同的 delay 時間。

function myTimeout(delay) {
  const [show, setShow] = React.useState(false);

  React.useEffect(
    () => {
      let timer1 = setTimeout(() => setShow(true), delay * 1000);
      return () => {
        clearTimeout(timer1);
      };
    },
    []
  );

  return show;
}

function Vender() {
  const [banana, takeBanana] = React.useState(0);
  const timer1 = myTimeout(1)
  const timer2 = myTimeout(3)

  return (
    //略
  );
}

Codepen 附完整代碼

其他 Hook

在 API 文件裡，其實還提供其他官方定義的 Hook ，例如 useContext、useReducer、useRef 等，可供用進一步的需求使用。可參考 Hook API 。

以上今天。

參考資料：
https://zh-hant.reactjs.org/docs/hooks-overview.html

使用工具：
Fake API https://jsonplaceholder.typicode.com/