用react写一个验证码60s倒计时防刷效果

说明：

我们这里做一个验证码点击60s防刷的效果，主要用到了浏览器内存机制来存储代码刷新的剩余时间，以防刷新后页面数据清除。

方法也很简单，就是在代码开始时获取storage里面的值，将其附着到state上就可以了，点击的时候使用计时器来控制时间的减少。

代码中用到了reduxform和antd， 不过这些主要是用来做验证和样式，并不影响实现逻辑，主要还是js为主。

开始工作

首先是state

state = {
    time: 60, // 规定起始时间60s
  }

然后是生命周期函数,其实只要是在执行代码开头获取到storage里面的数值就可以了，不一定非得用生命周期，hooks也行。

componentDidMount() {
    let time = sessionStorage.getItem("time")
    if (time > 0 && time < 60) {
      this.setState({
        time
      })
      setTimeout(() => this.onGetCode(), 0);
    }
  }

下面是业务逻辑代码

post = async (data) => {
    // 提交代码
 }
 // 点击验证码触发计时器
  getCode = () => {
     setTimeout(() => this.onGetCode(), 0);
  }

//异步判断过程，也是业务逻辑最主