译文：为复杂的 React 应用开发自定义 Hook

本文将探讨如何为复杂的React应用程序构建自定义Hook。首先，将介绍自定义Hook的基础知识，讨论自定义Hook的常见应用场景，然后将按步骤介绍构建自定义 Hook的全过程。

什么是自定义Hook ?

自定义Hook是使用React Hook函数封装和共享有状态逻辑的函数。自定义Hook可以抽象出复杂的逻辑，从而让不同组件之间重用代码变得更加容易。 自定义Hook遵循特定的命名约定: 必须以单词 use 开头，后跟描述性名称。例如 useFetch (用于请求API的自定义 Hook)或 useWindowWidth （用于获取窗口大小的自定义Hook）。这种命名约定很重要，因为它向其他开发人员表明该函数是一个Hook，可以在其他组件中复用；同时，这种命名也让自定义Hook与普通函数实现区分，让 React 知道，这不是一个普通的函数，而是一个包含Hook状态的特殊函数。

自定义 Hooks 的使用场景

自定义 Hook 有非常宽泛的使用场景，下面是一些比较通用的使用场景：

1. 数据获取 自定义Hook可用于从API获取数据并管理数据的状态。这可以帮助您避免在必须获取相同数据的组件之间重复编写代码。

2. 表单处理 自定义Hook可用于管理表单的状态并处理表单提交。这可以帮助您避免为表单验证和提交编写重复的代码。

3. 身份验证 自定义Hook可用于管理应用程序的身份验证状态。这可以帮助您避免为身份验证逻辑编写重复的代码。

4. 窗口调整大小 自定义Hook可用于管理浏览器窗口的状态，并在窗口调整大小时更新组件。

5. 动画 自定义Hook可用于管理动画的状态，并使在不同组件之间重用动画逻辑变得更容易。

开始构建自定义 Hook

让我们逐步介绍构建自定义Hook的过程。我们将构建一个名为 useFetch()的自定义 Hook，该Hook从API获取数据并管理请求数据的状态。

步骤 1： 描述useFetch 构建自定义Hook的第一步是实现自定义 Hook。首先创建一个名为"useFetch.js"的新文件，然后开始实现 useFetch 的具体逻辑。

import { useState, useEffect } from 'react';  
  
const useFetch = (url) => {  
const [data, setData] = useState(null);  
const [isLoading, setIsLoading] = useState(false);  
const [error, setError] = useState(null);  
  
useEffect(() => {  
const fetchData = async () => {  
setIsLoading(true);  
  
try {  
const response = await fetch(url);  
const result = await response.json();  
setData(result);  
} catch (error) {  
setError(error);  
}  
  
setIsLoading(false);  
};  
  
fetchData();  
}, [url]);  
  
return { data, isLoading, error };  
};  
  
export default useFetch;

在这段代码中，首先定义了一个名为"useFetch"的新函数，它接受一个参数，即要请求数API 的URL路径。在函数内部，使用useState Hook来管理数据状态、isLoading表示是否在请求中，error 表示是否出现错误，data 则用来保存请求的数据。函数中还使用了useEffect Hook以实现从API获取数据并在URL更改时更新状态。

最后，返回一个包含状态变量 data、isLoading和error 的对象。

步骤 2： 使用useFetch Hook 现在已经定义了useFetch Hook，接下来可以在组件内部使用它了。让我们创建一个名为UserList的新组件，并使用useFetch Hook从API获取数据并在列表中显示它。

import useFetch from './useFetch';  
  
const UserList = () => {  
const { data, isLoading, error } = useFetch('https://jsonplaceholder.typicode.com/users');  
  
if (isLoading) {  
return <p>Loading...</p>;  
}  
  
if (error) {  
return <p>{error.message}</p>;  
}  
  
return (  
<ul>  
{data.map((user) => (  
<li key={user.id}>{user.name}</li>  
))}  
</ul>  
);  
};  
  
export default UserList;

在这段代码中，首先导入了useFetch Hook，并在UserList组件内部使用它来从API获取数据。然后，通过检查isLoading和error的状态来处理数据获取的不同状态。最后，通过遍历数据数组，并在列表中显示每个用户的名称。

通过这段代码，我们成功地将数据获取逻辑封装到一个可重用的自定义Hook中，并在组件中使用它来显示用户列表。

自定义 Hook的最佳实践

在为复杂的React应用程序构建自定义Hook 时，有一些最佳实践值得关注：

1. 遵循命名约定 自定义Hook必须以单词use开头，后跟描述性名称。这种命名约定很重要，因为它向其他开发人员表明该函数是一个Hook，可以在其他组件中使用 (使用普通函数的命名方式描述自定 Hook，会导致 React 报错)。

2. 保持简单 自定义Hook应该简单且专注于特定任务。如果一个Hook变得过于复杂，最好将其拆分为多个子Hook或将逻辑移动到单独的函数中。

3. 正确的使用自定义Hook 自定义Hook只能使用其他Hook，如useState、useEffect和useContext，或者其他自定义 Hook。自定义Hook不 能使用引用该 Hook组件中的状态。

4. 自定义 Hook测试 自定义Hook与任何其他JavaScript 函数一样，都需要对其编写测试用例并执行测试，以确保其能够正常工作。

总结

自定义Hook是React的一个强大功能，可以帮助封装和共享组件之间的有状态逻辑。它们可用于各种用例，从数据获取到表单处理、身份验证、窗口调整大小和实现动画。

在为复杂的React应用程序构建自定义 Hook 时，重要的是遵循最佳实践，如保持Hook简单、使用正确的 Hook 和测试 Hook 以确保其正常工作。

通过遵循这些最佳实践，您可以构建可重用的Hook，使编写复杂的React应用程序变得更容易，并在长期维护中更加方便。

原文地址 如侵则删