React Unhappy Paths

在 React 中，处理异步渲染（async rendering）和错误处理（error handling）的“Unhappy Paths”是构建健壮应用的关键。以下是对这些场景的详细分析和解决方案：

• 场景：组件依赖的数据（如 API 请求）尚未返回，需展示加载状态。
• 解决方案：

  使用 Suspense 包裹异步组件，配合 React.lazy 或资源加载库（如 react-query）。

  抛出 Promise 触发 Suspense 的 fallback（如加载动画）。

  const DataComponent = React.lazy(() => import('./DataComponent'));function App() { return ( <Suspense fallback={<Loading />}> <DataComponent /> </Suspense> );}

• 场景：动态导入的组件代码尚未加载完成。
• 解决方案：同上，通过 Suspense + React.lazy 实现按需加载。

• 场景：组件渲染时发生错误（如数据格式错误）。
• 解决方案：

  使用 ErrorBoundary 捕获渲染错误，展示友好提示。

  特定错误（如未登录）需跳转登录页，可在 componentDidCatch 中处理逻辑。

  class ErrorBoundary extends React.Component { componentDidCatch(error) { if (error.code === 'UNAUTHORIZED') { window.location.href = '/login'; } } render() { return this.props.children; }}

• 场景：避免 Suspense 导致页面布局抖动（waterfall）。
• 解决方案：

  使用 SuspenseList 控制多个 Suspense 的展示顺序。

  配合 useTransition 设置超时（timeout），强制显示加载状态。

  import { SuspenseList } from 'react';function App() { return ( <SuspenseList revealOrder="forwards" tail="collapsed"> <Suspense fallback={<Loading />}><ComponentA /></Suspense> <Suspense fallback={<Loading />}><ComponentB /></Suspense> </SuspenseList> );}

• 场景：SSR 环境下需处理异步数据。
• 解决方案：

  使用 react-dom/server 的 renderToPipeableStream 或 renderToReadableStream 支持流式渲染。

  在客户端通过 hydrateRoot 恢复交互。

• 场景：事件处理需等待异步操作（如提交表单）。
• 解决方案：

  使用 useTransition 标记状态更新为非紧急（non-urgent），避免阻塞交互。

  结合 startTransition 和 isPending 展示加载状态（如按钮禁用）。

  const [isPending, startTransition] = useTransition();function handleClick() { startTransition(() => { fetchData().then(() => setState(/* ... */)); });}return <button disabled={isPending}>Submit</button>;

• 场景：事件处理器同步或异步抛出错误。
• 解决方案：

  同步错误：通过 try/catch 捕获并更新状态。

  异步错误：在 Promise.catch 中处理，或使用 ErrorBoundary。

  async function handleClick() { try { await apiCall(); } catch (error) { setError(error.message); }}

• 场景：需统计按钮点击到渲染完成的耗时。
• 解决方案：

  使用 useEffect 记录渲染完成时间。

  结合 Performance API 或自定义工具（如 React Profiler）跟踪交互开销。

  function trackInteraction(label) { const start = performance.now(); return () => { console.log(`${label} took ${performance.now() - start}ms`); };}function Button() { const [state, setState] = useState(); const finishRender = trackInteraction('ButtonClick'); useEffect(() => { finishRender(); }, [state]); return <button onClick={() => setState(Date.now())}>Click</button>;}

• 场景：事件触发页面跳转前需完成渲染。
• 解决方案：

  与路由库（如 React Router）集成，使用 useTransition 延迟跳转直到渲染完成。

  import { useTransition } from 'react';function RouterLink() { const [isPending, startTransition] = useTransition(); const navigate = useNavigate(); function handleClick() { startTransition(() => { navigate('/new-page'); }); } return ( <Link to="/new-page" onClick={handleClick}> {isPending ? 'Loading...' : 'Go'} </Link> );}

• 场景：避免事件处理中的中间状态闪烁。
• 解决方案：

  useTransition 默认启用双缓冲渲染，仅在后台完成渲染后切换视图。

  配合 Suspense 时，可通过 timeout 控制强制显示加载状态。

• 关键指标：

  首屏渲染时间：包括 Suspense 解析的异步依赖。

  交互总时长：从事件触发到渲染完成的耗时。

• 工具：

  React Profiler、Performance API、自定义 Hook（如 useRenderTracker）。

React 中处理异步渲染和错误的核心策略包括：

1. 异步渲染：利用 Suspense、SuspenseList 和 useTransition 管理加载状态和渲染顺序。
2. 错误处理：通过 ErrorBoundary 捕获渲染错误，结合业务逻辑处理特定场景（如跳转登录页）。
3. 交互优化：跟踪事件处理的全生命周期，确保状态更新和渲染的原子性。
4. 性能监控：从数据加载到渲染完成的端到端耗时统计。

通过以上方法，可以覆盖大多数“Unhappy Paths”，提升应用的健壮性和用户体验。