React中的Suspence组件解决抖动问题

大家好，欢迎来到IT知识分享网。

React 中的 Suspense 组件是用来处理异步渲染的。当我们需要异步加载某些组件或数据时，通常会出现一个“抖动”问题，即页面在等待异步加载完成时会出现一些不必要的视觉变化，比如页面出现空白或者加载指示器。

Suspense 可以解决这个问题的原因是它可以让 React 等待异步加载完成后再进行渲染。这样就可以避免出现不必要的视觉变化，使页面更加平滑。

Suspense 可以用在以下场景：

1. 异步加载组件：当我们需要在某个条件下才加载某个组件时，可以使用 React.lazy() 方法来异步加载组件，然后将其包装在 Suspense 组件中等待加载完成后再进行渲染。

import React, { lazy, Suspense } from 'react'; const AsyncComponent = lazy(() => import('./AsyncComponent')); function App() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <AsyncComponent /> </Suspense> </div> ); } 

1. 异步加载数据：当我们需要在某个条件下才加载数据时，可以使用 React.lazy() 方法来异步加载数据，然后将其包装在 Suspense 组件中等待加载完成后再进行渲染。

import React, { lazy, Suspense } from 'react'; const AsyncData = lazy(() => fetch('/api/data').then(res => res.json())); function App() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <AsyncData /> </Suspense> </div> ); } 

需要注意的是，Suspense 组件只能用在某个父组件内部，而不能直接用在根组件或其他顶层组件上。同时，fallback 属性是必须的，它用来指定在异步加载完成前要展示的加载指示器或占位符。