React.js 目前是前端開發人員十分流行的 JavaScript 庫。它由 Facebook 發明，但作為開源項目提供給世界各地的開發人員和企業使用。

React 真正改變了我們構建單頁面應用程序的方式，其中最大的特點之一是函數組件的應用。Hooks 是19年推出的，使我們能夠在處理狀態時使用函數組件而不是基於類的組件。除了內置的 hooks 外，React 還提供了實現自定義 hooks 的方法。

這裏是一些我最喜歡的自定義 hooks 實現，您也可以在自己的應用程序和項目中使用。

useTimeout

使用這個hooks，我們可以使用聲明式方法來實現setTimeout。首先，我們創建一個自定義hooks子，其中包含回調函數和延遲參數。然後，我們使用useRef hooks為回調函數創建一個引用。最後，我們兩次使用useEffect，一次用於記住上次的回調函數，一次用於設置超時並清理。

以下是一個計時器的實現示例：

import {useEffect} from 'react'
const useTimeout = (callback,delay)=>{
  const savedCallback=React.useRef();
  useEffect(()=>{
      savedCallback.current=callback
  },[callback]);
  
  useEffect(()=>{
      const tick=()=>{
          savedCallback.current();
      }
      if(delay!==null){
          let id=setTimeout(tick,delay);
          return ()=>clearTimeout(id);
      }
  },[delay])
}

useInterval

如果你想以聲明性的方式實現setInterval，你可以使用名為useInterval的hooks。

首先，我們需要創建一個自定義hooks，接受一個回調函數和一個延遲時間作為參數。然後，我們使用useRef為回調函數創建一個ref。最後，我們使用useEffect來記住最新的回調函數，並設置和清除間隔。

該示例展示了自定義ResourceCounter的實現。

import {useRef,useEffect} from 'react';

const useInterval = (callback,delay)=>{
  const savedCallback=React.useRef();
  useEffect(()=>{
      savedCallback.current=callback
  },[callback]);
  
  useEffect(()=>{
      const tick=()=>{
          savedCallback.current();
      }
      if(delay!==null){
          let id=setInterval(tick,delay);
          return ()=>clearInterval(id);
      }
  },[delay])
}

usePrevious

這是另一個可以在我們的應用程序中使用的很棒的自定義鈎子。通過它，我們可以存儲props或先前的狀態。首先，我們創建一個接受值的自定義鈎子。然後，我們使用useRef鈎子為該值創建一個ref。最後，我們使用useEffect來記住最新的值。
這個示例展示了一個計數器的實現。

import {useRef,useEffect} from 'react';

const usePrevious=value=>{
    const ref=useRef();
    useEffect(()=>{
        ref.current=value
    })
    return ref.current;
}

useClickInside

如果你需要處理包裝組件內部的點擊事件處理，那麼useClickInside hooks就是適合你的選擇。首先，我們創建一個自定義hooks，它接受一個ref和一個回調函數來處理點擊事件。然後，我們使用useEffect來附加和清除點擊事件。最後，我們使用useRef為需要被點擊的組件創建一個ref，並將其傳遞給useClickInside hooks。

import {useEffect} from 'react';

const useClickInside = (ref,callback)=>{
    const handleClick=e=>{
        if(ref.current&&ref.current.contains(e.target)){
            callback();
        }
    };
    useEffect(()=>{
        document.addEventListener('click',handleClick);
        return ()=>{
            document.removeEventListener('click',handleClick);
        }
    })
}

useClickOutside

useClickOutside hooks與useClickInside hooks非常相似，但它處理的是在包裝組件外部的點擊，而不是內部的點擊。因此，我們再次創建一個自定義hooks，它接受一個ref和一個回調函數來處理點擊事件。然後，我們使用useEffect來附加和清除點擊事件。最後，我們使用useRef為組件創建一個ref，並將其傳遞給useClickOutside hooks。

import {useEffect}from 'react';
const useClickOutside = (ref,callback)=>{
    const handleClick=e=>{
        if(ref.current&&!ref.current.contains(e.target)){
            callback();
        }
    };
    useEffect(()=>{
        document.addEventListener('click', handleClick);
        return ()=>{
          document.removeEventListener('click', handleClick);
        }
    })
}

參考文章

8 Awesome React Hooks -- Simon Holdorf