如何自定义一个hook函数

在React中，自定义Hook是通过创建一个普通的JavaScript函数，并使用`useState`、`useEffect`等内建Hooks来管理状态或副作用的方式。下面是一个简单的自定义Hook示例，假设我们想创建一个计数器Hook：

// 自定义Hook - useCounter.js
import { useState } from 'react';

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

  // 每次更新count时执行的副作用操作
  useEffect(() => {
    console.log(`Count updated to ${count}`);
  }, [count]);

  return { count, increment };
}

export default useCounter;

// 在组件中使用
import useCounter from './useCounter';

function MyComponent() {
  const { count, increment } = useCounter();
  
  function handleClick() {
    increment();
  }
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

在这个例子中，`useCounter` Hook接受一个初始值作为参数，返回一个包含当前计数值和一个`increment`函数的对象。每当`increment`函数被调用时，`useEffect`会在控制台打印新的计数值。