React 如何创建自定义 Hook

在 React 中，自定义 Hook 是一种重用状态逻辑的机制，可以让你在不编写类的情况下共享组件之间的逻辑。创建自定义 Hook 通常是为了解决特定的问题或者封装复杂的逻辑，使得这些逻辑可以在多个组件之间轻松共享。

创建自定义 Hook 的步骤：

1. 命名： 自定义 Hook 必须以 use 开头，这是 React 识别自定义 Hook 的标志。例如，useLocalStorage 或 useFormInput。

2. 编写 Hook 函数： 自定义 Hook 本质上是一个 JavaScript 函数。这个函数可以调用其他的 Hook（如 useState 或 useEffect），也可以包含其他的逻辑。

3. 返回必要的值： 根据你的需求，自定义 Hook 可以返回任何必要的值。这些值可以是数据、函数或者任何其他类型的值，以便在组件中使用。

举例说明：

假设我们需要一个自定义 Hook 来处理本地存储（LocalStorage）的读写操作。我们可以创建一个名为 useLocalStorage 的 Hook：

javascript
import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  // 从 localStorage 获取存储的值，如果没有则使用初始值
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  // 设置 localStorage 的值
  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];
}

使用自定义 Hook：

在你的组件中，你可以像使用任何其他 Hook 一样使用 useLocalStorage：

javascript
function App() {
  const [name, setName] = useLocalStorage('name', 'Bob');

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
      />
    </div>
  );
}

以上示例展示了如何创建和使用一个简单的自定义 Hook 来与本地存储进行交互。通过这种方式，你可以将复杂的或常用的逻辑封装在 Hook 中，并在多个组件之间重用它们。这不仅使代码更加干净、组织性更好，而且增强了代码的可维护性和可测试性。