并发模式、React18- React19新特性

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={}>
  
  

---

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	❌	✅

---

对于面试（3-8年前端开发）最容易被问到的是：

1. React18 并发渲染原理

2. startTransition 和 useDeferredValue 区别

3. 自动批处理实现

4. Fiber 架构与并发模式关系

5. Suspense 原理

6. React19 的 use()、useOptimistic、Actions

7. Server Components 和 SSR 的区别

8. React18 升级踩坑（StrictMode 双执行）

如果你准备面试高级前端（15K-30K+），建议重点深入 Fiber → Scheduler → Lane模型 → Concurrent Rendering → Suspense → React19 Actions 这条主线，因为这是近几年 React 面试的核心。