这篇文章主要介绍“自定义Hook的方法有哪些”，在日常操作中，相信很多人在自定义Hook的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”自定义Hook的方法有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联-专业网站定制、快速模板网站建设、高性价比九原网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式九原网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖九原地区。费用合理售后完善，十载实体公司更值得信赖。

React hooks

React hooks 已经在16.8版本引入到库中。它允许我们在函数组件中使用状态和其他React特性，这样我们甚至不需要再编写类组件。

实际上，Hooks 远不止于此。

Hooks 可以将组件内的逻辑组织成可重用的独立单元。

Hooks 非常适合 React 组件模型和构建应用程序的新方法。Hooks  可以覆盖类的所有用例，同时在整个应用程序中提供更多的提取、测试和重用代码的灵活性。

构建自己的自定义React钩子，可以轻松地在应用程序的所有组件甚至不同应用程序之间共享特性，这样我们就不必重复自己的工作，从而提高构建React应用程序的效率。

现在，来看看我在开发中最常用的5个自定义钩子，并头开始重新创建它们，这样你就能够真正理解它们的工作方式，并确切地了解如何使用它们来提高生产率和加快开发过程。

我们直接开始创建我们的第一个自定义React Hooks。

useFetch

获取数据是我每次创建React应用时都会做的事情。我甚至在一个应用程序中进行了好多个这样的重复获取。

不管我们选择哪种方式来获取数据，Axios、Fetch API，还是其他，我们很有可能在React组件序中一次又一次地编写相同的代码。

因此，我们看看如何构建一个简单但有用的自定义 Hook，以便在需要在应用程序内部获取数据时调用该 Hook。

okk,这个 Hook 我们叫它 useFetch。

这个 Hook 接受两个参数，一个是获取数据所需查询的URL，另一个是表示要应用于请求的选项的对象。

import { useState, useEffect } from 'react';  const useFetch = (url = '', options = null) => {};  export default useFetch;

获取数据是一个副作用。因此，我们应该使用useEffect Hook 来执行查询。

在本例中，我们使用 Fetch API来发出请求。我们会传递URL和 options。一旦 Promise  被解决，我们就通过解析响应体来检索数据。为此，我们使用json()方法。

然后，我们只需要将它存储在一个React state 变量中。

import { useState, useEffect } from 'react';  const useFetch = (url = '', options = null) => {   const [data, setData] = useState(null);    useEffect(() => {     fetch(url, options)       .then(res => res.json())       .then(data => setData(data));   }, [url, options]); };  export default useFetch;

这里，我们还需要处理网络错误，以防我们的请求出错。所以我们要用另一个 state 变量来存储错误。这样我们就能从 Hook  中返回它并能够判断是否发生了错误。

import { useState, useEffect } from 'react';  const useFetch = (url = '', options = null) => {   const [data, setData] = useState(null);   const [error, setError] = useState(null);    useEffect(() => {     fetch(url, options)       .then(res => res.json())       .then(data => {         if (isMounted) {           setData(data);           setError(null);         }       })       .catch(error => {         if (isMounted) {           setError(error);           setData(null);         }       });   }, [url, options]); };  export default useFetch;

useFetch返回一个对象，其中包含从URL中获取的数据，如果发生了任何错误，则返回错误。

return { error, data };

最后，向用户表明异步请求的状态通常是一个好做法，比如在呈现结果之前显示 loading。

因此，我们添加第三个 state 变量来跟踪请求的状态。在请求之前，将loading设置为true，并在请求之后完成后设置为false。

const useFetch = (url = '', options = null) => {   const [data, setData] = useState(null);   const [error, setError] = useState(null);   const [loading, setLoading] = useState(false);    useEffect(() => {     setLoading(true);      fetch(url, options)       .then(res => res.json())       .then(data => {         setData(data);         setError(null);       })       .catch(error => {         setError(error);         setData(null);       })       .finally(() => setLoading(false));   }, [url, options]);    return { error, data }; };

现在，我们可以返回 loading 变量，以便在请求运行时在组件中使用它来呈现一个 loading，方便用户知道我们正在获取他们所请求的数据。

return { loading, error, data };

在使用 userFetch 之前，我们还有一件事。

我们需要检查使用我们 Hook 的组件是否仍然被挂载，以更新我们的状态变量。否则，会有内存泄漏。

import { useState, useEffect } from 'react';  const useFetch = (url = '', options = null) => {   const [data, setData] = useState(null);   const [error, setError] = useState(null);   const [loading, setLoading] = useState(false);    useEffect(() => {     let isMounted = true;      setLoading(true);      fetch(url, options)       .then(res => res.json())       .then(data => {         if (isMounted) {           setData(data);           setError(null);         }       })       .catch(error => {         if (isMounted) {           setError(error);           setData(null);         }       })       .finally(() => isMounted && setLoading(false));      return () => (isMounted = false);   }, [url, options]);    return { loading, error, data }; };  export default useFetch;

接下就是怎么用了?

我们只需要传递我们想要检索的资源的URL。从那里，我们得到一个对象，我们可以使用它来渲染我们的应用程序。

import useFetch from './useFetch';  const App = () => {   const { loading, error, data = [] } = useFetch(     'https://hn.algolia.com/api/v1/search?query=react'   );    if (error) return 
Error!
;   if (loading) return 
Loading...
;    return (     
       
         {data?.hits?.map(item => (                        {item.title}                    ))}       
     
   ); };

useEventListener

这个 Hook 负责在组件内部设置和清理事件监听器。

这样，我们就不需要每次添加事件监听器,做重复的工作。

这个函数有几个参数，eventType 事件类型，listener 监听函数，target 监听对象，options 可选参数。

import { useEffect, useRef } from 'react';  const useEventListener = (   eventType = '',   listener = () => null,   target = null,   options = null ) => {};  export default useEventListener;

与前一个 Hook 一样，用 useEffect 来添加一个事件监听器。首先，我们需要确保target  是否支持addEventListener方法。否则，我们什么也不做。

import { useEffect, useRef } from 'react';  const useEventListener = (   eventType = '',   listener = () => null,   target = null,   options = null ) => {    useEffect(() => {     if (!target?.addEventListener) return;   }, [target]); };  export default useEventListener;

然后，我们可以添加实际的事件监听器并在卸载函数中删除它。

import { useEffect, useRef } from 'react';  const useEventListener = (   eventType = '',   listener = () => null,   target = null,   options = null ) => {   useEffect(() => {     if (!target?.addEventListener) return;      target.addEventListener(eventType, listener, options);      return () => {       target.removeEventListener(eventType, listener, options);     };   }, [eventType, target, options, listener]); };  export default useEventListener;

实际上，我们也会使用一个引用对象来存储和持久化监听器函数。只有当监听器函数发生变化并在事件监听器方法中使用该引用时，我们才会更新该引用。

import { useEffect, useRef } from 'react';  const useEventListener = (   eventType = '',   listener = () => null,   target = null,   options = null ) => {   const savedListener = useRef();    useEffect(() => {     savedListener.current = listener;   }, [listener]);    useEffect(() => {     if (!target?.addEventListener) return;      const eventListener = event => savedListener.current(event);      target.addEventListener(eventType, eventListener, options);      return () => {       target.removeEventListener(eventType, eventListener, options);     };   }, [eventType, target, options]); };  export default useEventListener;

我们不需要从此 Hook 返回任何内容，因为我们只是侦听事件并运行处理程序函数传入作为参数。

现在，很容易将事件侦听器添加到我们的组件(例如以下组件)中，以检测DOM元素外部的点击。如果用户单击对话框组件，则在此处关闭对话框组件。

import { useRef } from 'react'; import ReactDOM from 'react-dom'; import { useEventListener } from './hooks';  const Dialog = ({ show = false, onClose = () => null }) => {   const dialogRef = useRef();    // Event listener to close dialog on click outside element   useEventListener(     'mousedown',     event => {       if (event.defaultPrevented) {         return; // Do nothing if the event was already processed       }       if (dialogRef.current && !dialogRef.current.contains(event.target)) {         console.log('Click outside detected -> closing dialog...');         onClose();       }     },     window   );    return show     ? ReactDOM.createPortal(                                                What's up{' '}                                YouTube                              ?