hooks 系列八：hooks 小結

快來加入咱們吧！

"小和山的菜鳥們"，爲前端開發者提供技術相關資訊以及系列基礎文章。爲更好的用戶體驗，請您移至咱們官網小和山的菜鳥們 ( xhs-rookies.com/ ) 進行學習，及時獲取最新文章。

"Code tailor" ，若是您對咱們文章感興趣、或是想提一些建議，微信關注 「小和山的菜鳥們」 公衆號，與咱們取的聯繫，您也能夠在微信上觀看咱們的文章。每個建議或是贊同都是對咱們極大的鼓勵！

Hooks 小結

到此爲止，咱們的 hooks 系列只剩下最後一個大案例了。如今咱們來對以前的內容作一個回顧。

咱們首先介紹了 hooks

什麼是 hooks

hooks 是 React 16.8 新增的特性，它能夠在不編寫 類組件 的狀況下使用 state 以及其餘的 React 特性

爲何引入 hook

• 在組件之間複用狀態邏輯很難
• 複雜組件變得難以理解（生命週期內有不相關的邏輯
• 類組件中 this 指向問題不容易理解

介紹了 useState

useState() 用於爲函數組件引入狀態。純函數不能有狀態，因此使用鉤子來引入狀態。

建立和使用

const [count, setCount] = useState(defaultValue) // 假設 defaultValue 爲 0
複製代碼

useState 返回的是一個數組，通常直接使用解構賦值取出兩個值，state 以及 修改 state 的函數 。這兩個值是須要成對獲取的。

使用多個 useState 就能夠定義多個 state 變量。

介紹了 useEffects

Effect Hook 可讓你在函數組件中執行反作用操做，換句話說能夠完成一些相似 Class 中生命週期的功能。

建立和使用

useEffect(() => {
   // 執行一些反作用操做
}，[]);
複製代碼

useEffect 至關於 class 中三個生命週期的組合。在 class 中不一樣，每個生命週期，都會有一些不相關的邏輯代碼，useEffect 將這些代碼進行了更好的拆分。

介紹了 useRefs

useRef 返回一個可變的 ref 對象，其 .current 屬性被初始化爲傳入的參數（initialValue）。返回的 ref 對象在組件的整個生命週期內保持不變。

const refContainer = useRef(initialValue)
複製代碼

它返回的 ref 對象在組件的整個生命週期保持不變，讓咱們在函數組件中，也能夠像 Class 組件同樣保存一些實例屬性，爲咱們開發帶來了許多可能性，除了這些新奇的功能，不要忘記 ref 開始獲取 DOM 屬性的功能，由於在 useRef 一樣能夠適用。

介紹了 useCallback

• useCallback 給咱們帶來了記憶函數，結合子組件和 useMemo 能夠達到優化組件加載的效果。
• 若是子組件接受了一個方法做爲屬性，咱們在使用 React.memo 這種避免子組件作不必的渲染時候，就須要用 useCallback 進行配合，不然 React.memo 將無心義。

講述了 hook 的規則

• 只能在最頂層使用 Hook
  • 不要在循環，條件或嵌套函數中調用 Hook
• 只能在 React 函數中調用 Hook
  • 不要在普通的 JavaScript 函數中調用 Hook

介紹了自定義 hook

自定義 Hook 是一個函數，其名稱以 "use" 開頭，函數內部能夠調用其餘的 Hook

在文章中，咱們使用兩個簡單的案例，講述了 自定義 hook 的建立和使用。

const useMyHook = (initValue) => {
  const [value, setValue] = useState(initValue || '')
  return value
}
複製代碼

這就是咱們的簡單建立，而使用方式與 useState 相似，只須要建立時取出值就能夠進行使用。

function App() {
  const myHookValue = useMyHook('myHook')
  return <div className="app">{myHookValue}</div>
}
複製代碼

下節預告

咱們在後續，還會有一個案例，對 hooks 系列文章中的所學內容進行嘗試。使用了一個留言功能的案例。