React 18通过createRoot启用并发模式，结合startTransition、useDeferredValue和Suspense，使渲染可中断，优先响应用户交互，提升流畅度。
React 的 Concurrent Features 允许应用在渲染过程中中断并优先处理更重要的更新，比如用户交互。这能避免界面卡顿，让应用感觉更流畅。要实现可中断的渲染并提升用户体验，关键在于理解并发模式的核心机制，并合理使用相关 API。
启用 Concurrent 模式
确保你的 React 应用运行在支持并发的模式下。从 React 18 开始，通过 createRoot 启用并发能力：
const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<App />);
与旧版的 ReactDOM.render 不同，createRoot 自动开启并发渲染能力，使 React 能够中断和恢复工作。
使用 transition 标记非紧急更新
某些状态更新（如搜索框输入）不需要立即反映到界面，可以稍后处理。React 提供 startTransition 将这类更新标记为“过渡”，使其可中断：
import { startTransition } from 'react';function SearchInput() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
function handleChange(e) {
const value = e.target.value;
setQuery(value);
startTransition(() => {
// 模拟慢速更新，不会阻塞输入响应
setResults(expensiveSearch(value));
});
}
return (<>
<input value={query} onChange={handleChange} />
{results.length ? <ResultsList results={results} /> : null}
</>);
}
在这个例子中，输入保持流畅，搜索结果的渲染可以被中断，优先响应用户输入。
使用 useDeferredValue 延迟非关键渲染
useDeferredValue 是另一种方式，用于延迟某些值的更新，适用于防抖场景但无需手动设置定时器：
function AutoComplete({ query }) {
const deferredQuery = useDeferredValue(query);
const results = expensiveSearch(deferredQuery);
return <ResultsList results={results} />;
}
当用户快速输入时，deferredQuery 会滞后于实际 query，React 优先渲染最新输入，旧的昂贵计算可被跳过或中断。
配合 Suspense 处理异步加载
Concurrent 模式与 Suspense 结合，可以在等待数据时展示部分 UI，而不是整体空白：
<Suspense fallback="<Spinner />"><CommentsSection />
</Suspense>
React 可以先显示已有内容，再流式加载评论，用户不会感知整个页面卡住。
基本上就这些。通过合理使用 startTransition、useDeferredValue 和 Suspense，React 能智能调度渲染任务，把控制权还给用户，真正实现响应优先的体验优化。
