React 18 和 React 19 是 React 发展过程中非常重要的两个版本其中 React 18 引入了并发渲染Concurrent RenderingReact 19 则进一步增强了Server Components、Actions、表单处理、资源加载等能力。一、什么是并发模式Concurrent RenderingReact 17 以前用户操作 ↓ React开始渲染 ↓ 渲染结束 ↓ 浏览器响应一旦开始渲染不能暂停不能中断不能插队如果页面复杂for(let i 0; i 100000; i){ // 大量计算 }会导致页面卡顿 输入框延迟 按钮无响应React18 并发渲染React 可以开始渲染 ↓ 暂停 ↓ 处理用户点击 ↓ 继续渲染类似普通模式 任务1 任务2 任务3 必须全部做完 并发模式 任务1 暂停 处理用户输入 继续任务1这样页面更流畅用户体验更好不容易卡死React18 开启方式React17ReactDOM.render( App /, document.getElementById(root) );React18import { createRoot } from react-dom/client; const root createRoot( document.getElementById(root) ); root.render(App /);createRoot 默认开启并发能力。二、React18 新特性1. Automatic Batching自动批处理React17setCount(c c 1); setFlag(f !f);在事件中1次渲染但在setTimeout((){ setCount(...) setFlag(...) })会渲染2次React18setTimeout((){ setCount(...) setFlag(...) })自动合并只渲染1次2. startTransition用于标记低优先级更新例如搜索框input /输入a ab abc同时需要搜索 过滤 排序这些操作比较慢。React18import { startTransition } from react; function handleChange(e){ setInput(e.target.value); startTransition((){ setList(filterData(e.target.value)); }); }优先级高优先级 输入框 低优先级 列表渲染所以输入不卡。3. useTransitionstartTransition Hook版本。const [isPending, startTransition] useTransition();示例const [isPending,startTransition] useTransition(); function handleSearch(value){ startTransition((){ setResult(search(value)); }); }加载状态{ isPending spanLoading.../span }4. useDeferredValue延迟更新。例如const [text,setText] useState();输入a ab abc列表很大BigList query{text}/会卡。React18const deferredText useDeferredValue(text); BigList query{deferredText}/效果输入立即响应 列表稍后更新5. Suspense增强React17只能用于React.lazy()React18支持数据加载组件懒加载Streaming SSRSuspense fallback{Loading/} UserList/ /Suspense6. Streaming SSR服务器边渲染边返回。以前服务器 ↓ 全部渲染 ↓ 返回HTMLReact18渲染一部分 ↓ 先返回 ↓ 继续渲染 ↓ 继续返回更快首屏。7. useId解决 SSR Hydration ID 不一致。const id useId(); label htmlFor{id} 用户名 /label input id{id}/8. StrictMode增强开发环境useEffect()执行两次。挂载 卸载 再挂载帮助发现副作用问题。三、React19 新特性React19 最大变化Server Actions 表单增强 资源预加载 use Hook Server Components成熟1. Actions以前form提交onSubmit ↓ preventDefault ↓ axios ↓ loading ↓ error很麻烦。React19async function createUser(formData){ use server; await db.user.create(...); }form action{createUser} button提交/button /form直接提交。2. useActionState管理表单状态。const [state, action, pending] useActionState( createUser, null );form action{action}状态pending自动管理。3. useFormStatus获取表单状态。import { useFormStatus } from react-dom;const { pending } useFormStatus();button disabled{pending} 提交中... /button4. useOptimistic乐观更新。例如发评论。以前请求成功 ↓ 刷新列表React19const [comments, addComment] useOptimistic( data, (state,newComment)[ ...state, newComment ] );点击立即显示评论成功保持失败回滚5. use()React19 重磅特性。直接读取 Promise。以前useEffect((){ fetch() },[])React19const user use(fetchUser());React自动等待Promise 自动Suspense6. ref作为普通属性React18forwardRef()const Input forwardRef((props,ref){ ... });React19function Input({ ref }){ return input ref{ref}/ }直接传。7. Metadata管理以前react-helmetReact19title首页/title meta namedescription content... /React直接支持。8. 资源预加载React19preload() preconnect() prefetchDNS()示例import { preload } from react-dom; preload( /font.woff2, { as:font } );React18 vs React19 总结特性React18React19并发渲染✅✅自动批处理✅✅startTransition✅✅useTransition✅✅useDeferredValue✅✅Suspense增强✅✅Streaming SSR✅✅useId✅✅Server Components实验性更成熟Actions❌✅useActionState❌✅useFormStatus❌✅useOptimistic❌✅use()❌✅Metadata❌✅资源预加载API❌✅对于面试3-8年前端开发最容易被问到的是React18 并发渲染原理startTransition 和 useDeferredValue 区别自动批处理实现Fiber 架构与并发模式关系Suspense 原理React19 的 use()、useOptimistic、ActionsServer Components 和 SSR 的区别React18 升级踩坑StrictMode 双执行如果你准备面试高级前端15K-30K建议重点深入Fiber → Scheduler → Lane模型 → Concurrent Rendering → Suspense → React19 Actions这条主线因为这是近几年 React 面试的核心。
