React实现按钮HTTP请求加载动画：当前写法是否符合React规范？

嘿，你的思路完全没问题！给按钮添加加载状态是React项目里非常常见的需求，咱们来把你的实现调整得更贴合React的最佳实践～

首先，React的核心思想是状态驱动UI，所以推荐用useState来管理加载状态，而不是直接操作DOM添加/移除类（除非有特殊场景）。这样能保证UI和状态始终保持一致，也更符合React的单向数据流逻辑。

下面是一个标准的实现示例，结合Bulma的is-loading类：

import { useState } from 'react';

function ActionButton() {
  // 用useState管理加载状态，初始值为false
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async () => {
    // 点击按钮立刻开启加载状态
    setIsLoading(true);
    
    try {
      // 这里替换成你的实际请求逻辑，比如用fetch/axios
      const response = await fetch('/api/your-target-endpoint');
      if (!response.ok) throw new Error('请求失败');
      
      // 请求成功后的操作：比如更新页面数据、弹出成功提示等
      console.log('请求成功！');
    } catch (error) {
      // 请求失败的错误处理：提示用户、记录日志等
      console.error('请求出错:', error);
    } finally {
      // 不管请求成功还是失败，最终都要关闭加载状态
      setIsLoading(false);
    }
  };

  return (
    <button
      // 动态组合类名：基础按钮类 + 加载状态类（按需添加）
      className={`button is-primary ${isLoading ? 'is-loading' : ''}`}
      onClick={handleSubmit}
      // 可选：加载时禁用按钮，防止用户重复点击
      disabled={isLoading}
    >
      执行操作
    </button>
  );
}

export default ActionButton;

为什么这是更优的写法？ #

• 状态统一管理：所有UI变化都由状态isLoading驱动，避免手动操作DOM导致的状态与UI不一致问题。
• 错误安全：finally块确保无论请求成功/失败，加载状态都会被重置，不会出现按钮一直“转圈”的卡死情况。
• 用户体验优化：添加disabled={isLoading}可以防止用户在加载过程中重复点击按钮，避免发送重复请求。

如果你之前的实现是用useRef直接操作DOM元素的classList，虽然能实现功能，但这种方式绕过了React的状态管理机制，在复杂组件中容易引发难以排查的bug，所以更推荐上面的状态驱动写法。

内容的提问来源于stack exchange，提问作者Reşit Körsu