React Hook vs Normal function?

什麼是 React Hook？和一般的函式又差在哪？

@ React

前言

有六角學院的同學問：「要如何區分 Hook 與方法的差別？什麼情況下在 React 裡稱為 Hook？什麼時候才只能稱為方法？」於是寫這篇文章來解釋清楚。

什麼是 React Hook？

可以先從 React 官方說明🔗來看：

讓你可以從 function component『hook into』React state 與生命週期功能

簡單來說 React 是一台大機器，透過 Hook API 我們可以與內部的資料和邏輯互動。就是 React 將他們的 API 稱作 Hook 而已，就是這麼簡單 😎。此外除了使用 React 提供的 Hook 之外也可以自製 Hook，只需要創建一個以「use」為開頭命名的 JavaScript Function，並遵循 Hook 的使用規則🔗 即可。

舉例來說，你寫膩了每次都要使用 useEffect 來戳外部 API，因此製作了一個 useFetch🔗 的自訂 Hook ，來消除重複的代碼，並且整理這部分的邏輯為一個 Hook。

總結

React Hook 是 React 的 API 稱呼，自訂 React Hook 就是使用了 React Hook 的函式。

  • 物件中的函式通常都會被稱作「方法」。
  • React Hook 就是 React 的 API ，使用它來與 React 互動。
  • 自訂 React Hook 就是使用 React Hook 來撰寫自訂的功能的函式。