关于前端:五个好用的Hooks

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