如何自定义hooks

自定义Hooks是一种让你能够在函数组件中重用状态逻辑的方式。要自定义一个Hooks，你需要遵循以下规则：

1. 以"use"开头命名你的自定义Hooks函数，这样React就知道它是一个Hooks函数。
2. 在自定义Hooks函数中使用useState、useEffect或其他已有的Hooks来处理状态和副作用。
3. 在自定义Hooks函数中定义你自己的逻辑和功能，并返回需要暴露给组件的值和函数。
4. 在组件中使用自定义Hooks函数。每次调用自定义Hooks函数，它都会创建一个独立的状态和副作用。

如何自定义一个简单的计数器Hooks函数：

import { useState } from 'react';

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return { count, increment, decrement };
}

function MyComponent() {
  const { count, increment, decrement } = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}