实现一个 useCounter Hook，用于管理计数器状态，并提供一些额外的便捷实用方法。
export default function Component() {const { count, increment, decrement, reset, setCount } = useCounter();return (<div><p>Counter: {count}</p><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button><button onClick={reset}>Reset</button></div>);}
initialValue: number: 计数器状态的初始值。如果未提供，则应默认为 0。useCounter Hook 返回一个具有以下属性的 object：
count: number: 当前计数器的值increment: () => void: 增加计数器值的函数decrement: () => void: 减少计数器值的函数reset: () => void: 将计数器值重置为 initialValue，如果未提供则重置为 0setCount: (value: number) => void: 将计数器值设置为 value 的函数，它与 setState 具有相同的签名useCounter 钩子使用 useState 来管理 number 状态。 setter 函数可以根据 useState 钩子的 setValue 来实现。
import { useState } from 'react';export default function useCounter(initialValue = 0) {const [count, setCount] = useState(initialValue);return {count,increment: () => setCount((x) => x + 1),decrement: () => setCount((x) => x - 1),reset: () => setCount(initialValue),setCount,};}
为了确保一致性，increment 和 decrement 函数使用 updater function 来根据先前的值计算新值。
如果你正在使用 TypeScript，棘手的部分是确定 setCount 的正确类型，因为它也可以接受一个更新器函数。 简单地将 setter 函数从你最喜欢的 IDE 中的 useState 悬停，你将看到 Dispatch<SetStateAction<...>> 形式的类型签名，其中状态的类型是 ...。 Dispatch 和 SetStateAction 可以从 react 导入。
如果你倾向于冗长，它本质上可以归结为这个。
type SetCount = (valueOrUpdater: number | ((previousValue: number) => number),) => void;
console.log() 语句将显示在此处。