目前很多的网站和app在做登陆注册时都会用到手机验证码，为了防止验证码轰炸，也就是随意的点击验证码，一般我们需要对获取验证码进行一些限制，最常用到的是在规定时间内不得重复发送。
实现倒计时很简单，可以设置一个计时器，在设置的时间内给获取验证码的按钮添加 disabled=true 属性，可以避免用户重复点击。但是如果用户刷新了页面呢？下面就来记录一下我的解决方案。
jsx代码
{ this.state.text }
设置初始的状态
this.state = { _dura: 0, text: '点击获取验证码', flag: false}点击获取验证码事件，这里我用到了 react-cookies 组件 要先去安装一下依赖 cnpm i react-cookies -S
// 获取手机验证码 getCheck () {let tel = this.state.tel// console.log(tel)if (tel.length !== 0) { getCheck(tel).then(data => {// 设置cookie保存时间cookie.save('sendCode', 60, 60);// console.log(data)this.setState({ codeNum: data.data.data, // 保存随机验证码，后期用来验证 flag: true})this.sendCode(); })} else { Toast.fail('请先输入手机号', 1);} }封装sendCode(),为了处理页面刷新，倒计时被清除的问题，我们可以在发送了验证码时，设置一个时间，存在cookie里面，并且设置一个定时器，每秒更新一次cookie数据，和倒计时同步，下次在加载页面时，去判断cookie中该时间是否为0；
// 判断cookie中是否存在倒计时 sendCode () {console.log(111)this.setState({ flag: true})let _dura = cookie.load('sendCode');let timer = setInterval(() => { console.log(this) _dura--; let text = '重新获取' + '(' + _dura + ')'; this.setState({_dura,text }) cookie.save('sendCode', _dura, _dura) if (_dura === 0) {text = '点击获取验证码';this.setState({ text, flag: false})clearInterval(timer);timer = null;cookie.remove('sendCode'); }},1000) }在生命周期函数钩子函数componentDidMount()中，调用，每次页面刷新都判断是否存在倒计时
componentDidMount () {if (cookie.load('sendCode')) { this.sendCode();} }注意，sendCode()函数，需要在两个地方去调用，第一个是在发送验证码成功时，第二个是在生命周期钩子函数中。
以上是个人在写项目时的一些见解，如有不对的地方，欢迎指出。