使用自定义Hook封装通用逻辑

# 1. 简介

#### 1.1 什么是自定义Hook？

在React函数式组件中，Hook是一种用于复用状态逻辑的方法。它可以让我们在不编写类组件的情况下使用状态和其他React特性。React自带了一些常用的Hook，比如useState和useEffect，但我们也可以根据业务需求自己封装自定义的Hook来实现特定的功能。

自定义Hook是一个函数，其命名以"use"开头，它可以调用其他的Hook或者自定义Hook，以创建一些通用的逻辑或功能，从而在多个组件中复用。

# 3. 封装通用逻辑

在开发过程中，我们经常会遇到一些通用的逻辑，比如数据获取、状态管理、表单验证等。为了提高代码复用性和可维护性，我们可以将这些通用逻辑封装成自定义Hook，以便在不同组件中重复使用。

#### 3.1 分析通用逻辑

首先，我们需要分析项目中重复出现的通用逻辑，例如表单验证。在许多页面中，我们都需要对输入的表单进行验证，包括字段不能为空、格式符合要求、是否重复等。这些逻辑可以被封装成一个通用的表单验证Hook，以便在各个页面中复用。

#### 3.2 提取重复代码

接下来，我们需要把重复的代码逻辑提取出来，找出其中的共性部分。在表单验证的例子中，我们可能会发现每个表单都需要用到相似的逻辑，例如对输入值进行非空校验、格式校验等。

#### 3.3 利用自定义Hook封装通用逻辑

最后，我们可以利用自定义Hook的特性，将这些通用逻辑封装成一个可复用的Hook。通过自定义Hook，我们可以将这些通用逻辑进行抽象和封装，使得在各个组件中可以轻松调用，避免重复编写相同的代码。

接下来，我们将演示如何使用自定义Hook来封装通用的表单验证逻辑。

# 4. 在项目中应用自定义Hook

在上一节中，我们已经学习了如何创建和封装自定义Hook，接下来让我们看看如何在实际项目中应用这些自定义Hook。

#### 4.1 引入自定义Hook

要在项目中使用自定义Hook，首先需要将自定义Hook文件引入到你的组件中。假设我们有一个自定义Hook叫做`useCustomHook`，你可以通过以下方式引入：

import useCustomHook from './useCustomHook';

#### 4.2 传递参数

一旦引入了自定义Hook，你可以像使用内置Hook一样使用它。如果自定义Hook需要传入参数，你可以按照以下方式进行传递：

const { data, loading, error } = useCustomHook(param1, param2);

#### 4.3 获取返回值

最后，你可以直接从自定义Hook中获取返回的值，并在你的组件中使用它们：

if (loading) {
  return <div>Loading...</div>;
}