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