掌握React Suspense加载指示器打造流畅用户体验提升应用性能与用户满意度

引言

在当今快速发展的Web应用领域，用户体验已成为决定产品成败的关键因素。用户期望应用能够快速响应、流畅运行，即使在数据加载或处理复杂任务时也不例外。React作为最受欢迎的前端框架之一，其团队不断推出新特性来帮助开发者构建高性能、用户友好的应用。React Suspense就是这样一个强大的工具，它允许我们优雅地处理异步操作，为用户提供无缝的加载体验。

本文将深入探讨React Suspense及其加载指示器的实现，展示如何利用这一特性打造流畅的用户体验，提升应用性能与用户满意度。无论您是React新手还是有经验的开发者，本文都将为您提供实用的知识和技巧，帮助您充分利用React Suspense的潜力。

React Suspense基础

什么是React Suspense

React Suspense是React 16.6引入的一个特性，它允许我们在组件等待某些操作（如数据获取、代码拆分等）完成时显示备用内容（通常是加载指示器）。Suspense的核心思想是让React”暂停”组件的渲染，直到所需的条件满足，同时在这期间显示一个加载状态。

Suspense的工作原理

Suspense的工作原理可以简单概括为以下几个步骤：

当组件需要异步数据或资源时，它会”抛出”一个Promise
React捕获这个Promise，并暂停该组件树的渲染
React渲染最近的Suspense边界（Suspense boundary）的fallback内容
当Promise解决后，React继续渲染被暂停的组件

这种机制使得开发者可以以声明式的方式处理加载状态，而无需在组件内部手动管理加载状态和错误处理。

Suspense的主要用途

React Suspense主要有以下几个用途：

代码分割：结合React.lazy实现组件的懒加载
数据获取：与React Server Components、Relay等库配合，实现数据获取的 Suspense支持
并发渲染：在React 18中，Suspense与并发特性结合，提供更流畅的用户体验

设置React Suspense环境

基本环境配置

要使用React Suspense，您需要确保您的项目使用的是React 16.6或更高版本。如果您使用的是Create React App或类似的脚手架工具，通常已经满足这一要求。

对于React 18，Suspense得到了进一步的增强，特别是在并发渲染方面。以下是使用React 18的基本设置：

// index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; // 使用React 18的createRoot API启用并发特性 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );

使用React.lazy进行代码分割

React.lazy函数允许您动态导入组件，实现代码分割。结合Suspense，您可以在组件加载时显示加载指示器。

import React, { Suspense } from 'react'; // 使用React.lazy动态导入组件 const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <OtherComponent /> </Suspense> </div> ); }

在这个例子中，当OtherComponent正在加载时，用户会看到”Loading…“文本。

实现加载指示器

基本加载指示器

最基本的加载指示器可以是一个简单的文本或SVG图标。以下是一个使用SVG作为加载指示器的例子：

import React, { Suspense } from 'react'; import { Spinner } from './Spinner'; // 假设我们有一个Spinner组件 const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <div> <h1>My App</h1> <Suspense fallback={<Spinner />}> <LazyComponent /> </Suspense> </div> ); } // Spinner组件示例 function Spinner() { return ( <div className="spinner"> <svg width="40" height="40" viewBox="0 0 40 40"> <circle cx="20" cy="20" r="18" fill="none" stroke="#3498db" strokeWidth="4" strokeDasharray="90 30" /> </svg> <style jsx>{` .spinner { display: flex; justify-content: center; align-items: center; height: 200px; } svg { animation: spin 1s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } `}</style> </div> ); }

高级加载指示器

更高级的加载指示器可以包括骨架屏（Skeleton Screen）或占位内容，这些可以提供更好的用户体验，因为它们给用户一个关于即将显示内容的预览。

import React, { Suspense } from 'react'; import { SkeletonLoader } from './SkeletonLoader'; const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <div> <h1>My App</h1> <Suspense fallback={<SkeletonLoader />}> <LazyComponent /> </Suspense> </div> ); } // 骨架屏加载器示例 function SkeletonLoader() { return ( <div className="skeleton-loader"> <div className="skeleton-header"></div> <div className="skeleton-text"></div> <div className="skeleton-text"></div> <div className="skeleton-text short"></div> <div className="skeleton-image"></div> <style jsx>{` .skeleton-loader { padding: 20px; } .skeleton-header { height: 30px; width: 60%; margin-bottom: 20px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } .skeleton-text { height: 16px; width: 100%; margin-bottom: 10px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } .skeleton-text.short { width: 70%; } .skeleton-image { height: 200px; width: 100%; margin-top: 20px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } `}</style> </div> ); }

多个Suspense边界

在一个复杂的应用中，您可能希望为不同的部分设置不同的加载指示器。这可以通过创建多个Suspense边界来实现：

import React, { Suspense } from 'react'; import { HeaderSkeleton, ContentSkeleton, SidebarSkeleton } from './Skeletons'; const LazyHeader = React.lazy(() => import('./Header')); const LazyContent = React.lazy(() => import('./Content')); const LazySidebar = React.lazy(() => import('./Sidebar')); function App() { return ( <div className="app"> <Suspense fallback={<HeaderSkeleton />}> <LazyHeader /> </Suspense> <div className="main-content"> <Suspense fallback={<ContentSkeleton />}> <LazyContent /> </Suspense> <Suspense fallback={<SidebarSkeleton />}> <LazySidebar /> </Suspense> </div> <style jsx>{` .app { display: flex; flex-direction: column; min-height: 100vh; } .main-content { display: flex; flex: 1; } `}</style> </div> ); }

这种方式允许应用的不同部分独立加载，提供更精细的用户体验控制。

高级Suspense用法

错误处理

使用Suspense时，还需要考虑错误处理。React提供了ErrorBoundary组件来捕获渲染过程中的错误：

import React, { Suspense, Component } from 'react'; import { Spinner } from './Spinner'; const LazyComponent = React.lazy(() => import('./LazyComponent')); // 错误边界组件 class ErrorBoundary extends Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error("Error caught by ErrorBoundary:", error, errorInfo); } render() { if (this.state.hasError) { return <div>Something went wrong. Please try again later.</div>; } return this.props.children; } } function App() { return ( <ErrorBoundary> <Suspense fallback={<Spinner />}> <LazyComponent /> </Suspense> </ErrorBoundary> ); }

与数据获取库集成

React Suspense可以与数据获取库（如Relay、Apollo Client等）结合使用，实现数据获取的Suspense支持。以下是使用Relay的示例：

import React, { Suspense } from 'react'; import { RelayEnvironmentProvider, usePreloadedQuery } from 'react-relay'; import { RelayEnvironment } from './RelayEnvironment'; import { Spinner } from './Spinner'; // 假设我们有一个预加载的查询 const MyComponentQuery = graphql` query MyComponentQuery($id: ID!) { user(id: $id) { id name email } } `; function MyComponent(props) { const data = usePreloadedQuery(MyComponentQuery, props.queryRef); return ( <div> <h1>{data.user.name}</h1> <p>{data.user.email}</p> </div> ); } function App() { // 预加载查询 const queryRef = useMemo(() => ({ environment: RelayEnvironment, query: MyComponentQuery, variables: { id: "123" } }), []); return ( <RelayEnvironmentProvider environment={RelayEnvironment}> <Suspense fallback={<Spinner />}> <MyComponent queryRef={queryRef} /> </Suspense> </RelayEnvironmentProvider> ); }

与React Server Components结合

React 18引入了Server Components，它与Suspense结合使用可以提供更好的性能和用户体验：

// App.server.js - 服务器组件 import React from 'react'; import { Suspense } from 'react'; import { ClientComponent } from './ClientComponent.client'; import { ServerComponent } from './ServerComponent.server'; import { Spinner } from './Spinner'; function App() { return ( <div> <h1>My App</h1> <Suspense fallback={<Spinner />}> <ServerComponent /> </Suspense> <ClientComponent /> </div> ); } // ServerComponent.server.js - 服务器组件 import React from 'react'; import { db } from './db'; async function ServerComponent() { const data = await db.query('SELECT * FROM users'); return ( <div> <h2>Users</h2> <ul> {data.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> </div> ); } // ClientComponent.client.js - 客户端组件 import React, { useState } from 'react'; function ClientComponent() { const [count, setCount] = useState(0); return ( <div> <h2>Counter</h2> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

性能优化

预加载策略

为了进一步优化性能，您可以实现预加载策略，提前加载用户可能需要的资源：

import React, { Suspense, useState, useEffect } from 'react'; import { Spinner } from './Spinner'; const LazyComponent1 = React.lazy(() => import('./Component1')); const LazyComponent2 = React.lazy(() => import('./Component2')); function App() { const [component, setComponent] = useState(null); const [preloadedComponent1, setPreloadedComponent1] = useState(null); const [preloadedComponent2, setPreloadedComponent2] = useState(null); // 预加载组件1 useEffect(() => { import('./Component1').then(module => { setPreloadedComponent1(() => module.default); }); }, []); // 预加载组件2 useEffect(() => { import('./Component2').then(module => { setPreloadedComponent2(() => module.default); }); }, []); const loadComponent1 = () => { if (preloadedComponent1) { setComponent(preloadedComponent1); } else { setComponent(LazyComponent1); } }; const loadComponent2 = () => { if (preloadedComponent2) { setComponent(preloadedComponent2); } else { setComponent(LazyComponent2); } }; return ( <div> <h1>My App</h1> <div> <button onClick={loadComponent1}>Load Component 1</button> <button onClick={loadComponent2}>Load Component 2</button> </div> <Suspense fallback={<Spinner />}> {component && <component />} </Suspense> </div> ); }

渐进式加载

渐进式加载是一种策略，通过优先加载和渲染最重要的内容，然后逐步加载次要内容，来改善感知性能：

import React, { Suspense } from 'react'; import { Spinner, SkeletonLoader } from './Loaders'; const LazyHeader = React.lazy(() => import('./Header')); const LazyMainContent = React.lazy(() => import('./MainContent')); const LazySidebar = React.lazy(() => import('./Sidebar')); const LazyFooter = React.lazy(() => import('./Footer')); function App() { return ( <div className="app"> {/* 优先加载头部 */} <Suspense fallback={<div className="header-placeholder">Loading header...</div>}> <LazyHeader /> </Suspense> <div className="main-content"> {/* 主要内容优先于侧边栏加载 */} <Suspense fallback={<SkeletonLoader />}> <LazyMainContent /> </Suspense> <Suspense fallback={<div className="sidebar-placeholder">Loading sidebar...</div>}> <LazySidebar /> </Suspense> </div> {/* 页脚最后加载 */} <Suspense fallback={<div className="footer-placeholder">Loading footer...</div>}> <LazyFooter /> </Suspense> <style jsx>{` .app { display: flex; flex-direction: column; min-height: 100vh; } .main-content { display: flex; flex: 1; } .header-placeholder, .sidebar-placeholder, .footer-placeholder { padding: 20px; background-color: #f5f5f5; text-align: center; color: #666; } `}</style> </div> ); }

使用Transition进行优先级调度

React 18引入了Transition API，它允许您将状态更新标记为”过渡”，从而让React知道某些更新可能需要一些时间，可以延迟或中断：

import React, { useState, startTransition, Suspense } from 'react'; import { Spinner } from './Spinner'; const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { const [resource, setResource] = useState(null); const [isPending, startTransition] = useTransition({ timeoutMs: 3000 }); const handleClick = () => { startTransition(() => { // 这个状态更新被标记为过渡，React知道它可能会延迟 setResource(import('./LazyComponent')); }); }; return ( <div> <button onClick={handleClick} disabled={isPending}> {isPending ? 'Loading...' : 'Load Component'} </button> <Suspense fallback={<Spinner />}> {resource && <LazyComponent />} </Suspense> </div> ); }

实际案例分析

案例一：电子商务产品列表页面

让我们构建一个电子商务网站的产品列表页面，使用Suspense来优化加载体验：

import React, { Suspense, useState, useEffect } from 'react'; import { ProductListSkeleton, ProductCardSkeleton } from './Skeletons'; import { ErrorBoundary } from './ErrorBoundary'; // 懒加载产品列表组件 const LazyProductList = React.lazy(() => import('./ProductList')); // 懒加载产品详情组件 const LazyProductDetail = React.lazy(() => import('./ProductDetail')); // 模拟API调用 const fetchProducts = () => { return new Promise((resolve) => { setTimeout(() => { resolve([ { id: 1, name: 'Product 1', price: 19.99, image: '/product1.jpg' }, { id: 2, name: 'Product 2', price: 29.99, image: '/product2.jpg' }, { id: 3, name: 'Product 3', price: 39.99, image: '/product3.jpg' }, ]); }, 1500); }); }; // 自定义资源包装器 function wrapPromise(promise) { let status = 'pending'; let result; let suspender = promise.then( r => { status = 'success'; result = r; }, e => { status = 'error'; result = e; } ); return { read() { if (status === 'pending') { throw suspender; } else if (status === 'error') { throw result; } else if (status === 'success') { return result; } } }; } // 创建资源 function createProductResource() { return { products: wrapPromise(fetchProducts()) }; } // 产品列表组件 function ProductList({ resource }) { const products = resource.products.read(); return ( <div className="product-list"> {products.map(product => ( <div key={product.id} className="product-card"> <img src={product.image} alt={product.name} /> <h3>{product.name}</h3> <p>${product.price}</p> <button onClick={() => selectProduct(product)}> View Details </button> </div> ))} <style jsx>{` .product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px; } .product-card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; text-align: center; } .product-card img { max-width: 100%; height: 200px; object-fit: cover; border-radius: 4px; } .product-card h3 { margin: 10px 0; } .product-card button { background-color: #4CAF50; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; } `}</style> </div> ); } // 产品详情组件 function ProductDetail({ product, onClose }) { return ( <div className="product-detail-modal"> <div className="modal-content"> <button className="close-button" onClick={onClose}>×</button> <img src={product.image} alt={product.name} /> <h2>{product.name}</h2> <p className="price">${product.price}</p> <p className="description">This is a detailed description of {product.name}. It's a great product that you'll love!</p> <button className="add-to-cart">Add to Cart</button> </div> <style jsx>{` .product-detail-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background-color: white; padding: 20px; border-radius: 8px; max-width: 500px; width: 100%; position: relative; } .close-button { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 24px; cursor: pointer; } .modal-content img { width: 100%; height: 300px; object-fit: cover; border-radius: 4px; margin-bottom: 15px; } .price { font-size: 24px; font-weight: bold; color: #e44d26; margin: 10px 0; } .description { margin-bottom: 20px; line-height: 1.5; } .add-to-cart { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%; } `}</style> </div> ); } // 主应用组件 function ECommerceApp() { const [resource, setResource] = useState(null); const [selectedProduct, setSelectedProduct] = useState(null); useEffect(() => { setResource(createProductResource()); }, []); const selectProduct = (product) => { setSelectedProduct(product); }; const closeProductDetail = () => { setSelectedProduct(null); }; return ( <div className="app"> <header> <h1>My E-Commerce Store</h1> </header> <main> <ErrorBoundary> <Suspense fallback={<ProductListSkeleton />}> {resource && <ProductList resource={resource} onSelectProduct={selectProduct} />} </Suspense> </ErrorBoundary> </main> {selectedProduct && ( <ErrorBoundary> <Suspense fallback={<div>Loading product details...</div>}> <LazyProductDetail product={selectedProduct} onClose={closeProductDetail} /> </Suspense> </ErrorBoundary> )} <style jsx>{` .app { min-height: 100vh; display: flex; flex-direction: column; } header { background-color: #333; color: white; padding: 20px; text-align: center; } main { flex: 1; } `}</style> </div> ); } // 骨架屏组件 export function ProductListSkeleton() { return ( <div className="product-list"> {[1, 2, 3, 4, 5, 6].map((item) => ( <div key={item} className="product-card-skeleton"> <div className="skeleton-image"></div> <div className="skeleton-title"></div> <div className="skeleton-price"></div> <div className="skeleton-button"></div> </div> ))} <style jsx>{` .product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; padding: 20px; } .product-card-skeleton { border: 1px solid #ddd; border-radius: 8px; padding: 15px; text-align: center; } .skeleton-image { height: 200px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; margin-bottom: 15px; } .skeleton-title { height: 24px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; margin-bottom: 10px; } .skeleton-price { height: 20px; width: 50%; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; margin: 0 auto 15px; } .skeleton-button { height: 36px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } `}</style> </div> ); } // 错误边界组件 export class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error("Error caught by ErrorBoundary:", error, errorInfo); } render() { if (this.state.hasError) { return ( <div className="error-boundary"> <h2>Something went wrong.</h2> <p>We're sorry, but we encountered an error while loading this content.</p> <button onClick={() => this.setState({ hasError: false })}> Try Again </button> <style jsx>{` .error-boundary { padding: 20px; text-align: center; background-color: #fff8f8; border: 1px solid #ffcdd2; border-radius: 4px; margin: 20px; } .error-boundary h2 { color: #d32f2f; } .error-boundary button { background-color: #d32f2f; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-top: 10px; } `}</style> </div> ); } return this.props.children; } } export default ECommerceApp;

案例二：社交媒体应用新闻流

现在，让我们构建一个社交媒体应用的新闻流，使用Suspense来优化加载体验：

import React, { Suspense, useState, useEffect, useMemo } from 'react'; import { PostSkeleton, CommentSkeleton } from './Skeletons'; import { ErrorBoundary } from './ErrorBoundary'; // 懒加载组件 const LazyPost = React.lazy(() => import('./Post')); const LazyComments = React.lazy(() => import('./Comments')); // 模拟API调用 const fetchPosts = (page = 1, limit = 5) => { return new Promise((resolve) => { setTimeout(() => { const posts = Array.from({ length: limit }, (_, i) => ({ id: (page - 1) * limit + i + 1, author: `User ${(page - 1) * limit + i + 1}`, content: `This is post #${(page - 1) * limit + i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit.`, timestamp: new Date(Date.now() - Math.random() * 86400000).toISOString(), likes: Math.floor(Math.random() * 100), comments: Math.floor(Math.random() * 20), })); resolve(posts); }, 1500); }); }; const fetchComments = (postId) => { return new Promise((resolve) => { setTimeout(() => { const comments = Array.from({ length: Math.floor(Math.random() * 5) + 1 }, (_, i) => ({ id: i + 1, author: `Commenter ${i + 1}`, content: `This is comment #${i + 1} on post ${postId}.`, timestamp: new Date(Date.now() - Math.random() * 86400000).toISOString(), })); resolve(comments); }, 1000); }); }; // 自定义资源包装器 function wrapPromise(promise) { let status = 'pending'; let result; let suspender = promise.then( r => { status = 'success'; result = r; }, e => { status = 'error'; result = e; } ); return { read() { if (status === 'pending') { throw suspender; } else if (status === 'error') { throw result; } else if (status === 'success') { return result; } } }; } // 创建资源 function createPostsResource(page, limit) { return { posts: wrapPromise(fetchPosts(page, limit)) }; } function createCommentsResource(postId) { return { comments: wrapPromise(fetchComments(postId)) }; } // 帖子组件 function Post({ post, onShowComments }) { return ( <div className="post"> <div className="post-header"> <div className="user-avatar"></div> <div className="user-info"> <div className="user-name">{post.author}</div> <div className="post-time">{new Date(post.timestamp).toLocaleString()}</div> </div> </div> <div className="post-content"> {post.content} </div> <div className="post-actions"> <button className="action-button"> <span>👍</span> {post.likes} </button> <button className="action-button" onClick={() => onShowComments(post)}> <span>💬</span> {post.comments} </button> <button className="action-button"> <span>🔗</span> Share </button> </div> <style jsx>{` .post { background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 20px; overflow: hidden; } .post-header { display: flex; align-items: center; padding: 15px; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #e0e0e0; margin-right: 10px; } .user-info { flex: 1; } .user-name { font-weight: bold; } .post-time { font-size: 12px; color: #666; } .post-content { padding: 0 15px 15px; line-height: 1.5; } .post-actions { display: flex; border-top: 1px solid #eee; } .action-button { flex: 1; padding: 10px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #666; } .action-button:hover { background-color: #f5f5f5; } .action-button span { margin-right: 5px; } `}</style> </div> ); } // 评论组件 function Comments({ resource }) { const comments = resource.comments.read(); return ( <div className="comments"> <div className="comments-header"> <h3>Comments</h3> <button className="close-button">×</button> </div> <div className="comments-list"> {comments.map(comment => ( <div key={comment.id} className="comment"> <div className="comment-header"> <div className="user-avatar"></div> <div className="user-info"> <div className="user-name">{comment.author}</div> <div className="comment-time">{new Date(comment.timestamp).toLocaleString()}</div> </div> </div> <div className="comment-content"> {comment.content} </div> </div> ))} </div> <div className="add-comment"> <textarea placeholder="Write a comment..."></textarea> <button>Post</button> </div> <style jsx>{` .comments { background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); width: 100%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; } .comments-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #eee; } .comments-header h3 { margin: 0; } .close-button { background: none; border: none; font-size: 20px; cursor: pointer; } .comments-list { flex: 1; overflow-y: auto; padding: 15px; } .comment { margin-bottom: 15px; } .comment-header { display: flex; align-items: center; margin-bottom: 8px; } .comment .user-avatar { width: 30px; height: 30px; border-radius: 50%; background-color: #e0e0e0; margin-right: 8px; } .comment .user-info { flex: 1; } .comment .user-name { font-weight: bold; font-size: 14px; } .comment-time { font-size: 12px; color: #666; } .comment-content { padding-left: 38px; line-height: 1.4; } .add-comment { padding: 15px; border-top: 1px solid #eee; } .add-comment textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: none; margin-bottom: 10px; } .add-comment button { background-color: #1a73e8; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; } `}</style> </div> ); } // 主应用组件 function SocialMediaApp() { const [page, setPage] = useState(1); const [postsResource, setPostsResource] = useState(null); const [commentsResource, setCommentsResource] = useState(null); const [selectedPost, setSelectedPost] = useState(null); const [showComments, setShowComments] = useState(false); useEffect(() => { setPostsResource(createPostsResource(page, 5)); }, [page]); const handleShowComments = (post) => { setSelectedPost(post); setCommentsResource(createCommentsResource(post.id)); setShowComments(true); }; const handleCloseComments = () => { setShowComments(false); setSelectedPost(null); }; const loadMorePosts = () => { setPage(prevPage => prevPage + 1); }; return ( <div className="app"> <header> <h1>Social Media App</h1> </header> <main> <ErrorBoundary> <Suspense fallback={<div>Loading feed...</div>}> {postsResource && ( <div className="feed"> {[...Array(page)].map((_, pageIndex) => { const resource = createPostsResource(pageIndex + 1, 5); return ( <ErrorBoundary key={pageIndex}> <Suspense fallback={<PostSkeleton />}> <FeedPage resource={resource} onShowComments={handleShowComments} /> </Suspense> </ErrorBoundary> ); })} <button className="load-more" onClick={loadMorePosts}> Load More Posts </button> </div> )} </Suspense> </ErrorBoundary> </main> {showComments && ( <div className="comments-modal"> <ErrorBoundary> <Suspense fallback={<CommentSkeleton />}> {commentsResource && ( <Comments resource={commentsResource} onClose={handleCloseComments} /> )} </Suspense> </ErrorBoundary> </div> )} <style jsx>{` .app { min-height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; } header { background-color: #1a73e8; color: white; padding: 15px 20px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } main { flex: 1; padding: 20px; max-width: 600px; margin: 0 auto; width: 100%; } .feed { display: flex; flex-direction: column; } .load-more { background-color: #1a73e8; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; margin: 20px auto; display: block; } .comments-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 20px; } `}</style> </div> ); } // Feed页面组件 function FeedPage({ resource, onShowComments }) { const posts = resource.posts.read(); return ( <> {posts.map(post => ( <Post key={post.id} post={post} onShowComments={onShowComments} /> ))} </> ); } // 骨架屏组件 export function PostSkeleton() { return ( <div className="post-skeleton"> <div className="post-header"> <div className="skeleton-avatar"></div> <div className="skeleton-info"> <div className="skeleton-name"></div> <div className="skeleton-time"></div> </div> </div> <div className="skeleton-content"></div> <div className="skeleton-content short"></div> <div className="skeleton-actions"> <div className="skeleton-button"></div> <div className="skeleton-button"></div> <div className="skeleton-button"></div> </div> <style jsx>{` .post-skeleton { background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 20px; overflow: hidden; } .post-header { display: flex; align-items: center; padding: 15px; } .skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; margin-right: 10px; } .skeleton-info { flex: 1; } .skeleton-name { height: 16px; width: 120px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; margin-bottom: 5px; } .skeleton-time { height: 14px; width: 80px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; } .skeleton-content { height: 16px; margin: 0 15px 10px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; } .skeleton-content.short { width: 70%; } .skeleton-actions { display: flex; border-top: 1px solid #eee; } .skeleton-button { flex: 1; height: 40px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } `}</style> </div> ); } export function CommentSkeleton() { return ( <div className="comments-skeleton"> <div className="comments-header"> <div className="skeleton-title"></div> <div className="skeleton-close"></div> </div> <div className="comments-list"> {[1, 2, 3].map(item => ( <div key={item} className="comment-skeleton"> <div className="comment-header"> <div className="skeleton-avatar"></div> <div className="skeleton-info"> <div className="skeleton-name"></div> <div className="skeleton-time"></div> </div> </div> <div className="skeleton-content"></div> </div> ))} </div> <div className="add-comment"> <div className="skeleton-textarea"></div> <div className="skeleton-button"></div> </div> <style jsx>{` .comments-skeleton { background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); width: 100%; max-width: 600px; max-height: 80vh; display: flex; flex-direction: column; } .comments-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #eee; } .skeleton-title { height: 24px; width: 100px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; } .skeleton-close { height: 24px; width: 24px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; } .comments-list { flex: 1; overflow-y: auto; padding: 15px; } .comment-skeleton { margin-bottom: 15px; } .comment-header { display: flex; align-items: center; margin-bottom: 8px; } .comment-skeleton .skeleton-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; margin-right: 8px; } .comment-skeleton .skeleton-info { flex: 1; } .comment-skeleton .skeleton-name { height: 14px; width: 80px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; margin-bottom: 5px; } .comment-skeleton .skeleton-time { height: 12px; width: 60px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; } .comment-skeleton .skeleton-content { height: 14px; padding-left: 38px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; } .add-comment { padding: 15px; border-top: 1px solid #eee; } .skeleton-textarea { height: 60px; width: 100%; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; margin-bottom: 10px; } .skeleton-button { height: 36px; width: 80px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 4px; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } `}</style> </div> ); } export default SocialMediaApp;

最佳实践和注意事项

1. 合理设计加载状态

加载状态不仅仅是技术实现，更是用户体验的重要组成部分。以下是一些设计加载状态的最佳实践：

提供有意义的反馈：加载指示器应该清楚地告诉用户正在发生什么，而不是简单地显示”加载中”。
保持一致性：在整个应用中使用一致的加载指示器样式和行为。
使用骨架屏：对于内容丰富的页面，骨架屏比传统的加载指示器提供更好的用户体验。
避免过长的加载时间：如果加载时间可能很长，考虑提供进度指示器或分步加载。

// 好的加载状态示例 function GoodLoadingIndicator() { return ( <div className="loading-container"> <div className="spinner"></div> <p className="loading-message">Loading your content...</p> <p className="loading-tip">This may take a few moments</p> <style jsx>{` .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; } .spinner { width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: #3498db; animation: spin 1s ease-in-out infinite; margin-bottom: 20px; } .loading-message { font-size: 18px; font-weight: 500; margin-bottom: 10px; color: #333; } .loading-tip { font-size: 14px; color: #666; } @keyframes spin { to { transform: rotate(360deg); } } `}</style> </div> ); }

2. 适当使用Suspense边界

合理设置Suspense边界对于优化用户体验至关重要：

按需设置边界：不要将整个应用包装在一个大的Suspense边界中，而是根据UI逻辑和组件关系设置多个边界。
考虑内容优先级：为重要内容和次要内容设置不同的Suspense边界，实现渐进式加载。
避免嵌套过深：虽然可以嵌套Suspense边界，但过深的嵌套可能导致管理困难。

// 合理的Suspense边界设置示例 function App() { return ( <div className="app"> {/* 顶部导航栏优先加载 */} <Suspense fallback={<HeaderSkeleton />}> <Header /> </Suspense> <div className="main-content"> {/* 主要内容区域优先于侧边栏加载 */} <Suspense fallback={<MainContentSkeleton />}> <MainContent /> </Suspense> <Suspense fallback={<SidebarSkeleton />}> <Sidebar /> </Suspense> </div> {/* 页脚最后加载 */} <Suspense fallback={<FooterSkeleton />}> <Footer /> </Suspense> </div> ); }

3. 错误处理与恢复

使用Suspense时，必须考虑错误处理：

使用ErrorBoundary：始终将Suspense包装在ErrorBoundary中，以捕获渲染错误。
提供恢复机制：当错误发生时，提供重试或替代内容的选项。
记录错误：确保错误被适当记录，以便后续分析和修复。

// 完整的错误处理示例 class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { // 记录错误到错误报告服务 console.error("Error caught by ErrorBoundary:", error, errorInfo); logErrorToService(error, errorInfo); } handleRetry = () => { this.setState({ hasError: false, error: null }); }; render() { if (this.state.hasError) { return ( <div className="error-boundary"> <h2>Something went wrong</h2> <p>We're sorry, but we encountered an error while loading this content.</p> <details> <summary>Error details</summary> <pre>{this.state.error?.toString()}</pre> </details> <button onClick={this.handleRetry}>Try Again</button> <style jsx>{` .error-boundary { padding: 20px; background-color: #fff8f8; border: 1px solid #ffcdd2; border-radius: 8px; margin: 20px; text-align: center; } .error-boundary h2 { color: #d32f2f; margin-top: 0; } .error-boundary details { text-align: left; margin: 15px 0; background-color: #f5f5f5; padding: 10px; border-radius: 4px; } .error-boundary pre { white-space: pre-wrap; word-break: break-all; } .error-boundary button { background-color: #d32f2f; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; } `}</style> </div> ); } return this.props.children; } } // 使用ErrorBoundary包装Suspense function SafeSuspense({ fallback, children }) { return ( <ErrorBoundary> <Suspense fallback={fallback}> {children} </Suspense> </ErrorBoundary> ); }

4. 性能优化技巧

使用Suspense时，还可以采取一些额外的性能优化措施：

预加载策略：在用户可能需要之前预加载资源。
代码分割：将应用分割成多个小块，按需加载。
使用React.memo和useMemo：避免不必要的重新渲染和计算。
实现虚拟滚动：对于长列表，只渲染可见部分。

// 预加载策略示例 function usePreloadComponent(importFn) { const [Component, setComponent] = useState(null); useEffect(() => { importFn().then(module => { setComponent(() => module.default); }); }, [importFn]); return Component; } function App() { // 预加载可能在用户交互后需要的组件 const PreloadedModal = usePreloadComponent(() => import('./Modal')); const [showModal, setShowModal] = useState(false); return ( <div> <button onClick={() => setShowModal(true)}> Show Modal </button> {showModal && ( <Suspense fallback={<div>Loading modal...</div>}> {PreloadedModal && <PreloadedModal onClose={() => setShowModal(false)} />} </Suspense> )} </div> ); }

5. 可访问性考虑

确保加载指示器对所有用户都是可访问的：

使用ARIA属性：为加载指示器添加适当的ARIA属性，如aria-busy="true"。
提供屏幕阅读器支持：确保加载状态的变化能够被屏幕阅读器检测到。
考虑动画敏感性：为对动画敏感的用户提供减少动画的选项。

// 可访问的加载指示器示例 function AccessibleLoadingIndicator() { return ( <div className="loading-container" aria-busy="true" aria-live="polite" role="status" > <div className="spinner" aria-hidden="true"></div> <p className="loading-message">Loading your content...</p> <style jsx>{` .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; } .spinner { width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: #3498db; animation: spin 1s ease-in-out infinite; margin-bottom: 20px; } .loading-message { font-size: 18px; font-weight: 500; color: #333; } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: #3498db; } } @keyframes spin { to { transform: rotate(360deg); } } `}</style> </div> ); }