当前位置：首页 > news >正文

并发模式、React18- React19新特性

news 2026/6/23 1:44:17

React 18 和 React 19 是 React 发展过程中非常重要的两个版本，其中 React 18 引入了并发渲染（Concurrent Rendering），React 19 则进一步增强了Server Components、Actions、表单处理、资源加载等能力。

一、什么是并发模式（Concurrent Rendering）

React 17 以前：

用户操作 ↓ React开始渲染 ↓ 渲染结束 ↓ 浏览器响应

一旦开始渲染：

不能暂停
不能中断
不能插队

如果页面复杂：

for(let i = 0; i < 100000; i++){ // 大量计算 }

会导致：

页面卡顿 输入框延迟 按钮无响应

React18 并发渲染

React 可以：

开始渲染 ↓ 暂停 ↓ 处理用户点击 ↓ 继续渲染

类似：

普通模式： 任务1 任务2 任务3 必须全部做完 并发模式： 任务1 暂停 处理用户输入 继续任务1

这样：

页面更流畅
用户体验更好
不容易卡死

React18 开启方式

React17：

ReactDOM.render( <App />, document.getElementById("root") );

React18：

import { createRoot } from 'react-dom/client'; const root = createRoot( document.getElementById('root') ); root.render(<App />);

createRoot 默认开启并发能力。

二、React18 新特性

1. Automatic Batching（自动批处理）

React17：

setCount(c => c + 1); setFlag(f => !f);

在事件中：

1次渲染

但在：

setTimeout(()=>{ setCount(...) setFlag(...) })

会：

渲染2次

React18：

setTimeout(()=>{ setCount(...) setFlag(...) })

自动合并：

只渲染1次

2. startTransition

用于标记：

低优先级更新

例如：

搜索框

<input />

输入：

a ab abc

同时需要：

搜索 过滤 排序

这些操作比较慢。

React18：

import { startTransition } from 'react'; function handleChange(e){ setInput(e.target.value); startTransition(()=>{ setList(filterData(e.target.value)); }); }

优先级：

高优先级： 输入框 低优先级： 列表渲染

所以输入不卡。

3. useTransition

startTransition Hook版本。

const [isPending, startTransition] = useTransition();

示例：

const [isPending,startTransition] = useTransition(); function handleSearch(value){ startTransition(()=>{ setResult(search(value)); }); }

加载状态：

{ isPending && <span>Loading...</span> }

4. useDeferredValue

延迟更新。

例如：

const [text,setText] = useState('');

输入：

a ab abc

列表很大：

<BigList query={text}/>

会卡。

React18：

const deferredText = useDeferredValue(text); <BigList query={deferredText}/>

效果：

输入立即响应 列表稍后更新

5. Suspense增强

React17：

只能用于：

React.lazy()

React18：

支持：

数据加载
组件懒加载
Streaming SSR

<Suspense fallback={<Loading/>}> <UserList/> </Suspense>

6. Streaming SSR

服务器边渲染边返回。

以前：

服务器 ↓ 全部渲染 ↓ 返回HTML

React18：

渲染一部分 ↓ 先返回 ↓ 继续渲染 ↓ 继续返回

更快首屏。

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

很麻烦。

React19：

async 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}> 提交中... </button>

4. useOptimistic

乐观更新。

例如：

发评论。

以前：

请求成功 ↓ 刷新列表

React19：

const [comments, addComment] = useOptimistic( data, (state,newComment)=>[ ...state, newComment ] );

点击：

立即显示评论

成功：

保持

失败：

回滚

5. use()

React19 重磅特性。

直接读取 Promise。

以前：

useEffect(()=>{ fetch() },[])

React19：

const user = use(fetchUser());

React：

自动等待Promise 自动Suspense

6. ref作为普通属性

React18：

forwardRef()

const Input = forwardRef((props,ref)=>{ ... });

React19：

function Input({ ref }){ return <input ref={ref}/> }

直接传。

7. Metadata管理

以前：

react-helmet

React19：

<title>首页</title> <meta name="description" content="..." />

React直接支持。

8. 资源预加载

React19：

preload() preconnect() prefetchDNS()

示例：

import { preload } from 'react-dom'; preload( '/font.woff2', { as:'font' } );

React18 vs React19 总结

特性	React18	React19
并发渲染	✅	✅
自动批处理	✅	✅
startTransition	✅	✅
useTransition	✅	✅
useDeferredValue	✅	✅
Suspense增强	✅	✅
Streaming SSR	✅	✅
useId	✅	✅
Server Components	实验性	更成熟
Actions	❌	✅
useActionState	❌	✅
useFormStatus	❌	✅
useOptimistic	❌	✅
use()	❌	✅
Metadata	❌	✅
资源预加载API	❌	✅