什么是自定义hook？
使用自定义hook可以将某些组件逻辑提取到可重用的函数中。
自定义hook是一个从use开始的调用其他hook的Javascript函数。请记住，组件和hook是函数，因此我们在这里实际上并没有创建任何新概念。我们只是将代码重构为另一个函数以使其可重用。
不使用自定义hook
假设我们的组件中有一个功能可以检索窗口的宽度。我们想知道用户何时调整屏幕大小。我们可以这样写：
const LayoutComponent = () => {
const [onSmallScreen, setOnSmallScreen] = useState(false);
useEffect(() => {
checkScreenSize();
window.addEventListener("resize", checkScreenSize);
}, []);
let checkScreenSize = () => {
setOnSmallScreen(window.innerWidth < 768);
};
return (
<div className={`${onSmallScreen ? "small" : "large"}`}>
<h1>Hello World!</h1>
</div>
);
};
我们这里有一个具有onSmallScreen state的组件，该组件知道我们是否在宽度小于768像素的窗口中。要知道这一点，我们使用了useEffecthook。在该hook内，我们首先调用checkScreenSize函数，该函数更新onSmallScreen状态变量。最后，我们将checkScreenSize函数绑定到调整大小事件侦听器，以在发生调整大小事件时在必要时更新状态。
创建自定义hook
这样很好。窗口的宽度一旦小于600像素，类名称就会更改为small，而超过600像素时，类名称会变为large。
现在，假设我想在应用程序的其他位置使用此功能，控制窗口的宽度。我应该复制并粘贴此代码吗？我们可以，但是我们可以在自定义hook中提取此功能，并在需要的任何地方重复使用。
因为hook只是Javascript函数，所以它们实际上不需要一个React组件。
我将创建一个名为useWindowWidth.js的新文件：
import { useState, useEffect } from "react";
const useWindowsWidth = () => {
const [isScreenSmall, setIsScreenSmall] = useState(false);
let checkScreenSize = () => {
setIsScreenSmall(window.innerWidth < 600);
};
useEffect(() => {
checkScreenSize();
window.addEventListener("resize", checkScreenSize);
return () => window.removeEventListener("resize", checkScreenSize);
}, []);
return isScreenSmall;
};
export default useWindowsWidth;
我们在useWindowWidth函数中提取了此功能。现在，我们可以将其导入到要使用的任何位置！
import React from 'react'
import useWindowWidth from './useWindowWidth.js'
const MyComponent = () => {
const onSmallScreen = useWindowWidth();
return (
// Return some elements
)
}
那不是很酷吗？我在一个项目中拥有其中一种功能。我需要知道窗口的大小才能适应我正在渲染的元素。使用自定义hook可以减少重复代码的数量。
当然，您可以在组件的hook内部使用的所有内容都可以提取并用于自定义hook。
例如，假设您有一些组件可显示文章的评论列表。我们可以想象其中的几行：
const ArticleWithComments = (articleId) => {
const [comments, setComments] = useState([])
const [error, setError] = useState(null)
let handleCommentsSuccessFetch = (articleComments) => setComments(articleComments)
let handleError = error => setError(error)
useEffect(() => {
fetchComments(articleId, handleCommentsSuccessFetch, handleError)
}, [])
return (
// Do something in the DOM
)
}
const BlogPostWithComments = (blogPostId) => {
const [comments, setComments] = useState([])
const [error, setError] = useState(null)
let handleCommentsSuccessFetch = (blogPostComments) => setComments(blogPostComments)
let handleError = error => setError(error)
useEffect(() => {
fetchComments(blogPostId, handleCommentsSuccessFetch, handleError)
}, [])
return (
// Do something in the DOM
)
}
在这个例子中，我们有两个组成部分。他们俩都根据ID（文章ID或博客文章ID）获取评论列表。在useEffect hook中，我们有一个API调用，可通过两个函数检索这些注释。一个在成功的情况下将状态设置为注释，第二个在错误的情况下将状态设置为错误。
但是，功能在这两个组件之间是重复的。幸运的是，我们可以在自定义hook中提取此功能：
const useCommentsRetriever = (entityId) => {
const [comments, setComments] = useState([]);
const [error, setError] = useState(null);
let handleCommentsSuccessFetch = (comments) => setComments(comments);
let handleError = (error) => setError(error);
useEffect(() => {
fetchComments(entityId, handleCommentsSuccessFetch, handleError);
}, []);
return [comments, error];
};
在这里，我们有了hook useCommentsRetriever。它以一个entityId作为参数。这将是我们文章的ID或博客文章的ID。然后，它类似于组件中的内容。不同之处在于此自定义hook需要返回某些内容。我选择在这里返回一个数组。第一个元素是注释，第二个元素是错误。
它将以这种方式使用：
//Import the custom hook
import useCommentsRetriever from './useCommentsRetriever.js'
const ArticleWithComments = (articleId) => {
const [comments, error] = useCommentsRetriever(articleId)
return (
// Do something in the DOM
)
}
const BlogPostWithComments = (blogPostId) => {
const [comments, error] = useCommentsRetriever(blogPostId)
return (
// Do something in the DOM
)
}
看看我们需要写多少代码？该useCommentsRetriever一个id作为参数。这[comments, error]就是我们所谓的数组解构。hookuseCommentsRetriever返回一个数组。我们将该数组的第一项分配给变量名注释，将该数组的第二项分配给变量名错误。
请注意，我可以根据需要使用任何方式命名这些变量。我在两个部分中也可以使用不同的名称。因此，当您看到useStatehook中使用的语法相同时，这是因为useState hook还返回了一个数组
我们是否必须开始使用自定义hook？
根据React文档，是的。
您可以查看文档中的hook规则以获取更多信息。
自定义hook的隔离特性
如果在两个组件中使用相同的自定义hook，则它们将不会共享状态。BlogPostWithComments中的状态将与ArticleWithComments中的状态完全分开。每个自定义hook都会使用React中的useState和useEffect创建一个新函数。我们可以在同一个组件内使用多个hook，此处应用相同的逻辑。
总结
自定义hook可以让您在编写React代码时真正发挥想象力。您可以采用类组件无法实现的方式提取和共享逻辑。
