重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
自定义Hook的方法有哪些
这篇文章主要介绍“自定义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 ? useLocalStorage
这个 Hook 主要有两个参数，一个是 key，一个是 value。
import { useState } from 'react'; const useLocalStorage = (key = '', initialValue = '') => {}; export default useLocalStorage;然后，返回一个数组，类似于使用 useState 获得的数组。因此，此数组将包含有状态值和在将其持久存储在localStorage 中时对其进行更新的函数。
首先，我们创建将与 localStorage 同步的React状态变量。
import { useState } from 'react'; const useLocalStorage = (key = '', initialValue = '') => { const [state, setState] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { console.log(error); return initialValue; } }); }; export default useLocalStorage;在这里，我们使用惰性初始化来读取 localStorage 以获取键的值，如果找到该值，则解析该值，否则返回传入的initialValue。
如果在读取 localStorage 时出现错误，我们只记录一个错误并返回初始值。
最后，我们需要创建 update 函数来返回它将在localStorage 中存储任何状态的更新，而不是使用useState 返回的默认更新。
import { useState } from 'react'; const useLocalStorage = (key = '', initialValue = '') => { const [state, setState] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { return initialValue; } }); const setLocalStorageState = newState => { try { const newStateValue = typeof newState === 'function' ? newState(state) : newState; setState(newStateValue); window.localStorage.setItem(key, JSON.stringify(newStateValue)); } catch (error) { console.error(`Unable to store new value for ${key} in localStorage.`); } }; return [state, setLocalStorageState]; }; export default useLocalStorage;此函数同时更新React状态和 localStorage 中的相应键/值。这里，我们还可以支持函数更新，例如常规的useState hook。
最后，我们返回状态值和我们的自定义更新函数。
现在可以使用useLocalStorage hook 将组件中的任何数据持久化到localStorage中。
import { useLocalStorage } from './hooks'; const defaultSettings = { notifications: 'weekly', }; function App() { const [appSettings, setAppSettings] = useLocalStorage( 'app-settings', defaultSettings ); return ( Your application's settings: setAppSettings(settings => ({ ...settings, notifications: e.target.value, })) } className="border border-gray-900 rounded py-2 px-4 " > daily weekly monthly 