八大绝妙的React Hook

图片来自Colton Dean Marshall/Unsplash

React.js是目前最受前端开发人员欢迎的JavaScript库。它由Facebook开发，但可作为开放源码项目使用，全世界的开发者和公司都在使用它。

React真正改变了构建单页应用的方式，其最明显的特性之一就是hook。hook于去年引入，使我们能够在处理状态时使用功能组件而不是类组件。除了内置的hook，React还支持自定义hook。

以下是笔者最喜欢的自定义hook及其实例，读者也可以在自己的应用程序和项目中使用。

1. useTimeout

有了这个hook，可以使用描述性方法实现setTimeout。首先创建一个带有回调和延迟的自定义hook。然后使用useRef为回调函数创建一个ref。最后两次使用useEffect。一次用于记忆上次回调，一次用于设置timeout和清理。

下例展示了定时器的实现:

2. usePrevious

这是另一个可以在应用程序中使用的很棒的自定义hook。有了它，就可以存储props或者之前的状态。首先创建一个接受值的自定义hook。然后使用useRef为该值创建一个ref。最后使用useEffect来记忆最新的值。

下例展示了计数器的实现：

3. useClickInside

如果在wrapped components内部进行click事件，那么useClickInside是正确的选择。首先创建一个自定义hook，可以使用一个ref和一个回调来处理click事件。然后使用useEffect来追加和清理click事件。 最后使用useRef为要click的组件创建一个ref，并将其传递给useClickInside。

4. useClickOutside

useClickOutside与useClickInside非常相似，但它负责在wrapped component外部而不是内部处理click事件。因此，再次创建一个自定义hook，可以使用一个ref和一个回调来处理click事件。然后使用useEffect来追加和清理click事件。最后使用useRef为组件创建一个ref，并将其传递给useClickOutside。

5. useFetch

可以使用useFetch以描述性方法实现fetch。首先使用useState初始化响应和错误状态变量。然后使用useEffect异步调用fetch并更新状态。最后返回一个包含响应或者错误变量的对象。

下例展示了从星球大战API获取字符并呈现其名称的方法:

6. useInterval

如果想要以描述性方法实现setInterval，可以使用useInterval。

首先必须创建一个自定义hook，使用回调和延迟。然后使用useRef为回调创建一个ref。最后使用useEffect来记忆最新的回调，并设置间隔和清理。

下例展示了可用于浏览器游戏的自定义资源计数器。

7. useComponentDidMount

这个hook体现了如何在安装组件后立即执行回调。对于第二个参数，只需使用带空数组的useEffect，在安装组件后立即执行一次提供的回调。

8. useComponentWillUnmount

useComponentWillUnmount与上例类似，但一旦卸载组件，将立即执行回调。因此，再次使用带有空数组的useEffect作为第二个参数，以便在清理之前执行提供的回调。

这些是笔者最喜欢的自定义React hook示例，读者可以在应用程序中使用。