React 中的自定义钩子是封装可重用逻辑、管理状态和处理副作用的绝佳方法，可以保持代码整洁和可维护。以下是一些关键用例以及创建自定义挂钩的意义：

1.跨组件重用逻辑

示例：从 API 获取数据。
您可以创建一个自定义挂钩（例如 useFetch）来封装获取数据并处理加载、成功和错误状态的逻辑。然后可以在多个组件中重用该逻辑。

import { useState, useEffect } from 'react';

const useFetch = (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 };
};

export default useFetch;

2.管理复杂状态逻辑

示例：管理表单状态
自定义挂钩可用于以可重用的方式管理表单状态和验证逻辑。

import { useState } from 'react';

const useForm = (initialState) => {
  const [values, setValues] = useState(initialState);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const resetForm = () => {
    setValues(initialState);
  };

  return [values, handleChange, resetForm];
};

export default useForm;

3.抽象副作用

示例：与本地存储同步。
您可以创建自定义挂钩来管理与本地存储同步的状态。

import { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

export default useLocalStorage;

自定义 Hook 的意义

1.代码可重用性
自定义挂钩允许您在多个组件之间重用逻辑，而无需重复代码，从而促进 DRY（不要重复自己）原则。

2.关注点分离
通过将逻辑从组件移出并放入钩子中，您可以使组件代码更清晰并更专注于渲染，而自定义钩子则处理逻辑。

3.可测试性
自定义挂钩可以独立于使用它们的组件进行测试，从而更容易为复杂逻辑编写单元测试。

3.一致性
使用自定义挂钩可确保应用程序不同部分的行为一致，因为在调用挂钩的任何地方都使用相同的逻辑。

结论
React 中的自定义钩子是创建可重用、可维护和可测试代码的强大工具。它们帮助您封装复杂的逻辑，有效地管理状态和副作用，并促进关注点分离和代码可重用性等最佳实践。通过利用自定义挂钩，您可以保持组件干净并专注于其主要目的：渲染 UI。