验证码倒计时 - Jimmyplayai

📱 验证码倒计时实战示例

使用 useEffect + 定时器实现常见的短信验证码倒计时功能，并展示清理函数的重要性

🎯 交互式演示

手机号码

💻 核心代码实现

// ✅ 使用常量：确保倒计时固定从 60 秒开始
const COUNTDOWN_DURATION = 60; // 秒

const [countdown, setCountdown] = useState(0);

// ✅ 倒计时核心逻辑
useEffect(() => {
  if (countdown > 0) {
    const timer = setTimeout(() => {
      setCountdown(countdown - 1);
    }, 1000);

    // 🧹 清理函数：防止内存泄漏
    return () => clearTimeout(timer);
  }
}, [countdown]);

// 发送验证码
const handleSendCode = async () => {
  await api.post('/send-sms', { phone });

  // ✅ 使用常量而不是硬编码
  setCountdown(COUNTDOWN_DURATION);
};

// 按钮文本
const buttonText = countdown > 0
  ? `${countdown}秒后重试`
  : '发送验证码';

🔑 关键要点

使用 setTimeout/setInterval 实现倒计时
在清理函数中 clearTimeout/clearInterval 防止内存泄漏
倒计时结束后重置按钮状态
实际项目中需要调用真实的短信发送 API
添加手机号格式验证和防刷机制

🌍 实际应用场景

用户注册/登录时的短信验证
找回密码的手机验证
绑定/解绑手机号
敏感操作的二次验证（如转账）
邮箱验证码倒计时（同理）