react实现并发
React 并发模式（Concurrent Mode）
React 的并发模式是一组新功能，旨在提高应用的响应能力和用户体验。它通过可中断的渲染机制，允许 React 在处理高优先级任务时暂停低优先级的渲染。
启用并发模式
在 React 18 及以上版本中，并发模式默认启用。通过使用新的根 API 创建应用：
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);并发特性
-
自动批处理
React 18 会自动将多个状态更新批处理为单个渲染，减少不必要的重复渲染。 -
过渡（Transitions）
使用startTransition将某些更新标记为低优先级，避免阻塞用户交互：
import { startTransition } from 'react';
function handleInputChange() {
// 高优先级更新
setInputValue(newValue);
// 低优先级过渡更新
startTransition(() => {
setSearchQuery(newValue);
});
}- Suspense 改进
结合lazy加载组件时，Suspense 可以更平滑地处理异步操作：
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>
);
}并发 API
- useTransition
用于跟踪过渡状态的 Hook：
const [isPending, startTransition] = useTransition();
function handleClick() {
startTransition(() => {
// 低优先级状态更新
setState(newState);
});
}- useDeferredValue
延迟某个值的更新，避免立即触发高开销渲染：
const deferredValue = useDeferredValue(value);
return <ExpensiveComponent value={deferredValue} />;注意事项
- 并发模式是向后兼容的，现有代码通常无需修改即可工作。
- 部分第三方库可能需要更新以支持并发特性。
- 严格模式（Strict Mode）下，React 会故意重复渲染组件以检测副作用。
