点击按钮后视觉反馈延迟，怎么优化？

技术志青提问于 2026-03-26 15:18:20 阅读 20

交互

我在做表单提交按钮的加载状态反馈，但用户点击后 UI 要等几百毫秒才变，感觉卡卡的。明明 setState 是同步的啊？是不是哪里写错了？

我试过把 loading 状态提前设为 true，但还是有明显延迟，尤其是在低端机上更严重。

const handleSubmit = async () => {
  setLoading(true); // 这里应该立刻触发重渲染吧？
  await submitForm(); // 模拟 API 请求
  setLoading(false);
};

我来解答赞 1 收藏

反馈

1 条解答

毅蒙 Dev Lv1

这问题我遇到过不少次，确实挺烦人的。虽然 setState 看起来是同步的，但 React 的渲染机制和浏览器的重绘是异步的，所以会出现这种延迟。

首先得明白，直接在函数开头设置 loading 状态确实会触发重绘，但浏览器可能还没来得及处理这个更新就被后面的代码打断了。特别是低端机上，CPU 和 GPU 资源紧张的时候更明显。

这里有个简单有效的优化方案：用微任务来强制刷新界面。给你的代码加个 setTimeout 或者 requestAnimationFrame：

const handleSubmit = async () => {

  setLoading(true);

  // 加这一行

  await new Promise(resolve => requestAnimationFrame(resolve));

  

  await submitForm(); 

  setLoading(false);

};

这样能确保浏览器在执行 API 请求前先处理好界面更新。虽然看起来只是几毫秒的区别，但在实际体验中效果很明显。

另外，检查下 CSS 动画和 transition 设置，有时候过渡效果太复杂也会拖慢渲染速度。记得做性能测试，特别是低端设备上的表现。做过几个项目后你会发现，这些小细节真的能影响用户体验。

2026-03-26 16:00