加载动画在React中怎么实现才不会卡顿？

❤瑞琴提问于 2026-03-19 11:06:18 阅读 42

交互

我在用React做数据请求时加了个加载动画，但每次一加载页面就明显卡一下，尤其是低端手机上更严重。我试过用CSS动画和直接切换loading状态，但效果都不太流畅，是不是我的写法有问题？

这是我现在用的代码：

const [loading, setLoading] = useState(false);

useEffect(() => {
  setLoading(true);
  fetchData().finally(() => setLoading(false));
}, []);

return (
  {loading && <div className="spinner">加载中...</div>}
  {!loading && <DataList />}
);

加载动画加载状态

我来解答赞 5 收藏

反馈

1 条解答

Des.翌喆 Lv1

问题在于你直接切换DOM节点，没有过渡。试试给两边都加个淡入淡出：

.fade-container {

  transition: opacity 0.2s ease-in-out;

}

.fade-out {

  opacity: 0;

}

const [loading, setLoading] = useState(false);

const [data, setData] = useState(null);



useEffect(() => {

  setLoading(true);

  fetchData().then(res => {

    setData(res);

    setLoading(false);

  });

}, []);



// 用CSS类控制过渡，别直接卸载组件

return (

  <div className={content ${loading ? 'fade-out' : ''}}>

    {loading ? <div className="spinner">加载中...</div> : <DataList data={data} />}

  </div>

);

或者更简单点，用 CSS 的 will-change: opacity 优化一下渲染性能，动画尽量用 transform 和 opacity，别用 top/left/width/height 这类会触发重排的属性。

2026-03-19 11:10