实现一个 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
,如果未提供则重置为 0
setCount: (value: number) => void
: 将计数器值设置为 value
的函数,它与 setState
具有相同的签名实现一个 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
,如果未提供则重置为 0
setCount: (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()
语句将显示在此处。