React Concurrent Mode构建响应式用户界面前言各位前端小伙伴不知道你们有没有遇到过这种情况当页面进行大量渲染时整个界面会卡住用户无法进行任何操作我曾经开发过一个数据密集型应用当加载大量数据时页面会卡顿几秒。后来我引入了React Concurrent Mode用户体验大大提升什么是Concurrent ModeConcurrent Mode是React 18引入的新特性它允许React在渲染过程中中断工作优先响应用户输入从而提供更流畅的用户体验。Concurrent Mode工作原理┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ 用户输入 │ │ React渲染 │ │ 浏览器绘制 │ └────────┬────────┘ └────────┬────────┘ └────────┬────────┘ │ │ │ │ 1. 用户输入事件 │ │ │───────────────────────│ │ │ │ │ │ │ 2. 中断渲染 │ │───────────────────────│ │ │ │ │ │ 3. 处理用户输入 │ │ │───────────────────────│ │ │ │ │ │ │ 4. 恢复渲染 │ │───────────────────────│ │ │ │ │ │ │ │ 5. 绘制结果 │ │ │────────────────────────│启用Concurrent Mode在React 18中启用// main.js import { createRoot } from react-dom/client import App from ./App const root createRoot(document.getElementById(root)) root.render(App /)与Legacy Mode对比// Legacy Mode (React 17及之前) import ReactDOM from react-dom ReactDOM.render(App /, document.getElementById(root)) // Concurrent Mode (React 18) import { createRoot } from react-dom/client const root createRoot(document.getElementById(root)) root.render(App /)Concurrent Mode核心特性1. 可中断渲染function ExpensiveComponent({ items }) { return ( div {items.map((item) ( ExpensiveItem key{item.id} item{item} / ))} /div ) } // 在Concurrent Mode下这个组件的渲染可以被中断 // 当用户输入时React会暂停渲染处理输入后再继续2. 优先级调度import { startTransition } from react function SearchInput({ onSearch }) { const [query, setQuery] useState() function handleChange(e) { const value e.target.value setQuery(value) startTransition(() { onSearch(value) }) } return input value{query} onChange{handleChange} / }3. Suspense改进import { Suspense } from react function Profile() { return ( Suspense fallback{Loading /} UserProfile / /Suspense ) } // 在Concurrent Mode下Suspense可以嵌套使用 function Dashboard() { return ( div Suspense fallback{HeaderLoading /} Header / /Suspense Suspense fallback{ContentLoading /} Content / /Suspense /div ) }startTransition基本用法import { startTransition, useState } from react function App() { const [count, setCount] useState(0) const [list, setList] useState([]) function handleClick() { setCount(c c 1) startTransition(() { const newList generateHugeList() setList(newList) }) } return ( div button onClick{handleClick}Increment/button div{count}/div List items{list} / /div ) }useTransition Hookimport { useTransition, useState } from react function SearchResults({ query }) { const [isPending, startTransition] useTransition() const [results, setResults] useState([]) useEffect(() { startTransition(() { const newResults search(query) setResults(newResults) }) }, [query, startTransition]) return ( div {isPending Spinner /} ResultsList results{results} / /div ) }useDeferredValue基本用法import { useDeferredValue, useState } from react function SearchResults({ query }) { const deferredQuery useDeferredValue(query) const results useMemo(() { return search(deferredQuery) }, [deferredQuery]) return ResultsList results{results} / }结合Suspenseimport { useDeferredValue, Suspense } from react function SearchResults({ query }) { const deferredQuery useDeferredValue(query) return ( Suspense fallback{Loading /} Results query{deferredQuery} / /Suspense ) }Concurrent Mode实战实现流畅的搜索体验import { useState, startTransition, useTransition } from react function SearchApp() { const [query, setQuery] useState() const [results, setResults] useState([]) const [isPending, startTransition] useTransition() function handleSearch(value) { setQuery(value) startTransition(() { const newResults performSearch(value) setResults(newResults) }) } return ( div input typetext value{query} onChange{(e) handleSearch(e.target.value)} placeholderSearch... / {isPending divLoading.../div} ul {results.map((result) ( li key{result.id}{result.title}/li ))} /ul /div ) }实现懒加载列表import { useState, startTransition, useRef, useCallback } from react function VirtualList({ items }) { const [visibleItems, setVisibleItems] useState([]) const containerRef useRef(null) const loadMore useCallback((startIndex, count) { startTransition(() { const newItems items.slice(startIndex, startIndex count) setVisibleItems(prev [...prev, ...newItems]) }) }, [items]) useEffect(() { loadMore(0, 20) }, [loadMore]) return ( div ref{containerRef} onScroll{handleScroll} {visibleItems.map((item) ( Item key{item.id} item{item} / ))} /div ) }Concurrent Mode最佳实践1. 使用startTransition包装非紧急更新function handleClick() { // 紧急更新立即更新UI setCount(c c 1) // 非紧急更新可以延迟执行 startTransition(() { setItems(generateItems()) }) }2. 使用useDeferredValue延迟非关键渲染function FilteredList({ items, filter }) { const deferredFilter useDeferredValue(filter) const filteredItems useMemo(() { return items.filter(item item.includes(deferredFilter)) }, [items, deferredFilter]) return List items{filteredItems} / }3. 使用Suspense处理异步加载function App() { return ( Suspense fallback{GlobalLoading /} Header / main Suspense fallback{ContentLoading /} Content / /Suspense /main /Suspense ) }常见问题问题1渲染结果不一致解决方案确保state更新是纯函数使用useMemo缓存计算结果检查是否有副作用影响渲染问题2性能没有提升解决方案使用startTransition包装耗时操作检查是否有不必要的重新渲染使用React DevTools Profiler分析问题3Suspense fallback闪烁解决方案添加minDuration属性使用稳定的key值考虑使用渐进式加载Concurrent Mode vs Legacy Mode特性Legacy ModeConcurrent Mode渲染方式同步阻塞异步可中断用户体验可能卡顿流畅响应优先级单一优先级多优先级调度Suspense基础支持完整支持兼容性高React 18总结Concurrent Mode是React 18最重要的更新之一。通过使用Concurrent Mode我们可以提升响应性优先响应用户输入避免卡顿可中断渲染优化体验使用优先级调度简化异步改进的Suspense现在开始使用Concurrent Mode构建更流畅的应用吧你的用户会感谢你的最后一句忠告不要过度使用startTransition只包装真正耗时的操作