刷新页面仍然记住发送验证码的按钮状态

碰到过好多次业务中有发送验证码的需求，然后总有一个避不开的小问题，就是点击发送验证码后，按钮需置灰一段时间（一般是倒计时 60s），然后才可以再次点击。

这当然很简单，按钮组件中加一个名为 time 的 state，初始值为 0，然后点击的时候把这个值置为 60，然后每秒 -1。

最后把按钮 disabled 属性绑定到这个 time,time 大于 0 时按钮禁用，time 等于 0 时，按钮可用。

但是这样有一个问题时如果用户刷新页面之后，这个 state 状态就丢失了，然后前端上这个按钮就又可以点击了。所以我们需要把这个状态持久化记录下来。

无非两种方案，存到 sessionStorage 里面，或者 localStorage 里面。

今天上午公司网络故障，顺手把这个极小但是很常见的需求封装了一下，发布了一个名为 @minax/countdown 的 npm 包。

npm install --save @minax/countdown

import { useCountDown, CountDownProvider } from '@minax/countdown'

暴露了 useCountDown 和 CountDownProvider 两个方法，需要注意地是，useCountDown 为 React@16.8+ 才有的 Hooks 语法。所以需要保证你的 React 版本大于 16.8，CountDownProvider 其实就是基于 useCountDown 包装了一下（悄悄地说，本来不准备封装的，毕竟有了 Hooks 以后我就没写过 Class 组件了），这样就能在 Class 类型组件中使用了。

使用方法在 README 文件里面写的很详细了，还有在线 Demo，有需求的小伙伴自取。