自定义 React Hooks:编写高效、整洁和可重用代码的秘密武器

欢迎来到神奇的 React 世界

大家好!在 React 的世界中,有一个强大的秘密武器,它往往隐藏在显而易见的地方,由于缺乏理解或熟悉而没有得到充分利用。

这个强大的工具,被称为自定义 React hooks,可以彻底改变我们编写 React 应用程序代码的方式。通过提取组件中的有状态逻辑,自定义 hooks 允许我们大大提高代码的效率、可读性和重用性。

然而,自定义 hooks 不仅仅是一个开发人员工具箱中的功能或工具。它们代表了我们开发范式的转变,一个引领我们重新思考在 React 应用程序中传统管理状态和副作用方式的新思维模式。

开箱即用:什么是 Hooks?

在本文中,我们将消除自定义 hooks 的概念的迷雾,深入探究它们的结构,并探索创建我们自己的过程。我们将采取实际的方法,举例来演示它们在真实场景中的用法。

我们的目标不仅是理解自定义 hooks 是什么或它们如何工作。这是全面接受其背后的哲学并赏识它们为我们的代码带来的优雅、简单和强大。

为什么自定义 Hooks 很重要

关键在于:hooks 很酷,但是自定义 hooks?它们就是可以使你的 React 代码水平更进一步的秘密配方。就像一个功能强大的工具,可以完全定制你的特定需求。一个为你量身定做的解决方案。

准备潜入自定义 React Hooks 的世界吧!

为什么我们需要自定义 Hooks

你可能会想:"我们已经有 hooks 了,为什么还需要自定义 hooks?"这是一个非常好的问题,答案很简单。自定义 hooks 是关于使你的代码更可读、更易管理和最重要的可重用。

提高代码可读性

在软件开发中,可读性非常重要。编写代码不仅要让它工作,还要让它易于理解。使用自定义 hooks,您可以将复杂的逻辑封装到单独的函数中。这样,当其他人(甚至将来的你)查看代码时,他们可以轻松理解发生了什么。

流线型代码管理

在处理大型应用程序时,管理代码可能是一个具有挑战性的任务。通过使用自定义 hooks,您可以将代码拆分为更小、更易管理的部分。就像整洁地将代码组织到不同的盒子中,每个盒子都服务于特定的目的。

促进代码重用

编程的基本原则之一是 DRY,即 Don’t Repeat Yourself。自定义 hooks 允许您编写一段逻辑一次,并在多个组件中重用它。这意味着更少的重复,更少的错误机会和更高的效率。

简而言之,自定义 hooks 是你的 React 工具箱中的宝贵工具。它们可以帮助您编写更干净,更易维护的代码,使您作为开发人员的生活更轻松,更愉快。

💡 注意: 使用一个开源的工具链比如 Bit 来发布、版本化和在所有的项目中重用你的自定义 hooks ,使用一个简单的 bit import your.username/yourCustomHook 命令,减少代码重复并最小化模板。

理解自定义 Hook

既然我们已经知道为什么需要自定义 hooks,那么让我们深入研究它们的实际样子和功能。这一点很重要,因为理解自定义 hook 的结构将帮助您在未来编写自己的自定义 hook。

基本外观

自定义 hook 只是一个 JavaScript 函数。唯一的规则是它的名称应该以 “use” 开头。这是一个约定,可以帮助你和其他人识别这个函数是一个 hook。例如,一个自定义钩子可能被命名为 useFetchData。

自定义 Hook 内部是什么

在自定义 hook 内部,你可以使用其他 hooks,比如 useState、useEffect 等。例如,useFetchData 钩子可以使用 useState 和 useEffect 钩子来获取数据并在状态中维护它。

返回值

自定义钩子可以返回任何你想要它返回的内容。这可以是一个单一的值、一个数组或者甚至是一个对象。你返回什么取决于你的组件需要什么。在我们的 useFetchData 示例中,自定义钩子可能会返回获取的数据以及加载状态和错误状态。

自定义 Hook 示例

下面是一个简单的例子来说明自定义 hook，这里有一个自定义钩子的示例来说明其结构:

function useFetchData(url) {const [data, setData] = useState(null); const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {fetch(url).then(response => response.json()).then(data => {setData(data);setLoading(false);  }).catch(error => {setError(error);setLoading(false);});}, [url]);return { data, loading, error };  
}

在这个例子中,useFetchData是一个自定义钩子,它从提供的URL获取数据。它使用useState来管理数据、加载状态和错误状态,并使用useEffect来处理数据获取。然后这个钩子返回一个包含数据、加载状态和错误状态的对象。

所以,这就是自定义钩子的结构。一开始它们可能看起来有点复杂,但是一旦你理解了它们的结构,它们可以极大地简化你的 React 代码并使其更易于管理。

创建自己的自定义 Hook 的步骤

Jefferson Santos

既然我们已经解剖了自定义钩子的结构,是时候将这些知识付诸行动,自己创建一个了。别担心,这听起来没有那么可怕。事实上,有了这些简单的步骤,你很快就可以创建自己的自定义钩子了!

第一步:定义你的函数

首先,我们需要定义一个 JavaScript 函数。还记得我们之前讨论过的命名约定吗?函数名称应以 “use” 开头。例如,让我们创建一个处理表单输入的钩子。我们将其命名为 useFormInput。

function useFormInput() {// 逻辑将在这里 
}

第二步:用 Hooks 添加逻辑

接下来,我们将使用 React 中的内置钩子向自定义钩子添加逻辑。在我们的 useFormInput 钩子中,我们将使用 useState 钩子来管理输入值。

function useFormInput() {const [value, setValue] = useState("");// 更多逻辑将在这里  
}

第三步:处理改变

现在,我们需要处理对输入值的更改。我们将创建一个在输入更改时更新值的函数。

function useFormInput() {const [value, setValue] = useState("");function handleChange(event) {setValue(event.target.value);}// 更多逻辑将在这里
}

第四步:返回需要的

最后,我们需要返回组件需要的任何内容。在这种情况下,我们的组件将需要该值和 handleChange 函数。所以,我们将返回一个包括两者的对象。

function useFormInput() {const [value, setValue] = useState("");function handleChange(event) {setValue(event.target.value);}return { value, handleChange };
}

就是这样!你刚刚创建了自己的自定义钩子。你现在可以在函数组件中使用这个钩子来处理表单输入。它是可重用的、干净的,并且使你的组件更具可读性。最棒的是?你可以为任何你想要的创建一个自定义钩子,使你的代码更高效,更易于管理。

10 个实用示例:创建和使用自定义 Hooks

Christina Morillo

既然你已经适应了创建自定义钩子,那么让我们更进一步。我们将探索十个可立即在项目中使用的自定义钩子的实用示例。让我们深入研究!

useLocalStorage

useLocalStorage是一个自定义的钩子,它简化了在 React 应用中使用本地存储的方法。它允许您从本地存储读取、写入和删除数据。

function useLocalStorage(key, initialValue) {const [storedValue, setStoredValue] = useState(() => {try {const item = window.localStorage.getItem(key);return item ? JSON.parse(item) : initialValue;} catch (error) {console.log(error);return initialValue;}});const setValue = value => {try {const valueToStore = value instanceof Function ? value(storedValue) : value;setStoredValue(valueToStore);window.localStorage.setItem(key, JSON.stringify(valueToStore));} catch (error) {console.log(error);}};return [storedValue, setValue];
}

useDocumentTitle

useDocumentTitle是一个自定义钩子,可以轻松地从 React 组件更改文档标题。

function useDocumentTitle(title) {useEffect(() => {document.title = title;}, [title]);
}

useEventListener

useEventListener是一个自定义钩子,可以轻松地向任何 DOM 元素添加事件侦听器。

function useEventListener(eventName, handler, element = window) {useEffect(() => {const isSupported = element && element.addEventListener;if (!isSupported) return;element.addEventListener(eventName, handler);return () => {element.removeEventListener(eventName, handler);};}, [eventName, element, handler]);
}

useOnClickOutside

useOnClickOutside是一个自定义钩子,当用户点击特定组件之外时触发事件。这对于关闭下拉菜单等很方便。

function useOnClickOutside(ref, handler) {useEffect(() => {const listener = event => {if (!ref.current || ref.current.contains(event.target)) return;handler(event);};document.addEventListener("mousedown", listener);document.addEventListener("touchstart", listener);return () => {document.removeEventListener("mousedown", listener);document.removeEventListener("touchstart", listener);};}, [ref, handler]);
}

useHover

useHover是一个自定义钩子,用于检测鼠标是否悬停在元素上。

function useHover() {const [value, setValue] = useState(false);const ref = useRef(null);const handleMouseOver = () => setValue(true);const handleMouseOut = () => setValue(false);useEffect(() => {const node = ref.current;if (node) {node.addEventListener('mouseover', handleMouseOver);node.addEventListener('mouseout', handleMouseOut);return () => {node.removeEventListener('mouseover', handleMouseOver);node.removeEventListener('mouseout', handleMouseOut);};}},[ref] // Recall only if ref changes);return [ref, value];
}

useOnlineStatus

useOnlineStatus是一个自定义钩子,用于检测用户当前是否在线或离线。

function useOnlineStatus() {const [isOnline, setOnline] = useState(navigator.onLine);const goOnline = () => setOnline(true);const goOffline = () => setOnline(false);useEffect(() => {window.addEventListener('online', goOnline);window.addEventListener('offline', goOffline);return () => {window.removeEventListener('online', goOnline);window.removeEventListener('offline', goOffline);};}, []);return isOnline;
}

useWindowSize

useWindowSize是一个自定义钩子,允许你访问当前窗口大小。

function useWindowSize() {const [size, setSize] = useState([window.innerWidth, window.innerHeight]);useLayoutEffect(() => {const updateSize = () => {setSize([window.innerWidth, window.innerHeight]);};window.addEventListener('resize', updateSize);updateSize();return () => window.removeEventListener('resize', updateSize);}, []);return size;
}

useMediaQuery

useMediaQuery是一个自定义钩子,允许你在组件中使用媒体查询。

function useMediaQuery(query) {const [matches, setMatches] = useState(window.matchMedia(query).matches);useEffect(() => {const mediaQueryList = window.matchMedia(query);const documentChangeHandler = () => setMatches(mediaQueryList.matches);mediaQueryList.addListener(documentChangeHandler);documentChangeHandler();return () => {mediaQueryList.removeListener(documentChangeHandler);};}, [query]);return matches;
}

useDebounce

useDebounce是一个自定义钩子,有助于延迟函数调用和消除给定的值。

function useDebounce(value, delay) {const [debouncedValue, setDebouncedValue] = useState(value);useEffect(() => {const handler = setTimeout(() => {setDebouncedValue(value);}, delay);return () => {clearTimeout(handler);};}, [value, delay]);return debouncedValue;
}

useInterval

useInterval是一个自定义钩子,允许你使用指定的间隔设置递归函数调用。这在需要重复执行函数时很有用,比如更新计时器或轮询服务器。

function useInterval(callback, delay) {const savedCallback = useRef();// Remember the latest callback.useEffect(() => {savedCallback.current = callback;}, [callback]);// Set up the interval.useEffect(() => {function tick() {savedCallback.current();}if (delay !== null) {let id = setInterval(tick, delay);return () => clearInterval(id);}}, [delay]);
}