React 18/19 新特性 & 核心 API 深入讲解

React 18 新特性 & 核心 API

React 18 是一个重大版本，引入了**"并发特性（Concurrent Features）"**，并为未来的 React 生态打下基础。下面是核心亮点与 API 说明：

1.1 createRoot 新 API
javascript 复制代码
```
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);
```
- 区别于 React 17 及以前的 ReactDOM.render。
- 启用并发特性，后续的特性依赖于此 API。
1.2 自动批处理（Automatic Batching）
- 之前只有事件处理和生命周期能自动批量 setState，
- React 18 之后，setTimeout/promise/原生事件等异步场景也能自动批处理：
  javascript 复制代码
```
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 只会触发一次 render
}, 100);
```
1.3 并发特性（Concurrent Features）
- 可通过 React 18 新 API 启用：
- startTransition：标记"低优先级"更新
  javascript 复制代码
```
import { startTransition } from 'react';

startTransition(() => {
  setValue(newValue);
});
```
- 适合搜索、联想等"用户可中断"的慢操作。
- 不会阻塞高优先级的更新（如输入响应）。
- useTransition Hook
- 内置的并发控制 Hook，返回 [isPending, startTransition]：
  javascript 复制代码
```
const [isPending, startTransition] = useTransition();

function handleChange(e) {
  startTransition(() => {
    setValue(e.target.value);
  });
}
//isPending 可用于加载指示。
```
1.4 useId Hook
- 用于无冲突生成 ID，适合无障碍 label-for、表单等场景：
  javascript 复制代码
```
const id = useId();
return <input id={id} />;
//SSR/CSR ID 一致，防止 hydration 警告。
```
1.5 新的 SSR/Streaming API
- renderToPipeableStream（Node.js 环境流式渲染，边传边渲染，提升性能）
- renderToReadableStream（Web Streams API）适用于 Next.js、Remix 等后端渲染场景
1.6 组件 Suspense 支持数据加载
- Suspense 以前只支持懒加载组件，现在支持更多数据流方案（如 React Query、Relay）。
  javascript 复制代码
```
<Suspense fallback={<Spinner />}>
  <SomeComponent />
</Suspense>
```
1.7 新的 useSyncExternalStore、useInsertionEffect
- useSyncExternalStore：为外部状态库（如 Redux/MobX）支持并发渲染做准备
- useInsertionEffect：针对 CSS-in-JS 注入，解决优先级问题

React 19 旨在从根本上提升开发者体验（DX）和应用性能。其核心理念可以概括为：将复杂性内置，将简单性留给开发者

1. React 19 核心变化概览

React Compiler (React 编译器) ：这是最具革命性的变化。编译器会自动将你的代码进行优化，智能地添加 memoization（记忆化），这意味着你不再需要手动使用 useMemo、useCallback 和 memo！编译器会帮你搞定性能优化，让你的代码更简洁、更高效。
Actions (操作)：统一了客户端与服务器之间的数据交互模式，尤其是在表单处理上。通过新的 useFormStatus、useFormState 和 useOptimistic Hooks，可以轻松实现 Pending 状态管理和乐观更新。
ref 作为 Prop`：forwardRef 正式成为历史！现在你可以像传递普通 prop 一样，直接将 ref 传递给你的函数组件。
javascript 复制代码
```
// 再也不需要 forwardRef 了！
function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />;
}
```

<Context> 作为 Provider：简化了 Context Provider 的写法，让代码更直观。

javascript 复制代码

// 之前: <ThemeContext.Provider value={theme}>
// 现在:
<ThemeContext value={theme}>
  {children}
</ThemeContext>

原生资源加载与 Suspense 集成：React 19 内置了对样式表 ()、脚本 (

2. 深度解析：颠覆性的 use Hook

你可以将 use Hook 想象成一个强大的解包(Unwrapping) 工具。它能接收一个"包裹"（目前支持 Promise 或 Context），然后直接返回里面的值。这个看似简单的操作，却为我们打开了新世界的大门。

用例一：use(Promise) - 重塑数据获取

这是 use 最激动人心的应用场景。它让我们能够以一种看似同步的方式来编写异步数据获取逻辑。
告别 useEffect + useState 的繁琐

在过去，客户端数据获取是这样的：

javascript 复制代码

// The Old Way
function UserProfile({ id }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetchUser(id)
      .then(data => setUser(data))
      .catch(err => setError(err))
      .finally(() => setLoading(false));
  }, [id]);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;

  return <h1>{user.name}</h1>;
}

这段代码的痛点显而易见：需要管理多个状态（data, loading, error），并且要小心处理 useEffect 的依赖和竞态条件。

javascript 复制代码

use + Suspense 的优雅新生，现在，看看使用 use 的方式有多么清爽：

javascript 复制代码

// The New Way
import { use, Suspense } from 'react';

// 1. 数据获取函数
const fetchUser = (id) => fetch(`.../users/${id}`).then(res => res.json());

// 2. 组件，代码像同步一样简洁
function UserProfile({ id }) {
  // use 会"解包"这个 promise
  // - Pending -> 暂停渲染，交给 Suspense 处理
  // - Resolved -> 返回数据
  // - Rejected -> 抛出错误，交给 ErrorBoundary 处理
  const user = use(fetchUser(id));

  return <h1>{user.name}</h1>;
}

// 3. 在上层使用 Suspense 和 ErrorBoundary
function App() {
  return (
    <Suspense fallback={<p>Loading user profile...</p>}>
      <ErrorBoundary fallback={<p>Oops, something went wrong.</p>}>
        <UserProfile id={1} />
      </ErrorBoundary>
    </Suspense>
  );
}

魔法揭秘：use 是如何工作的？

暂停与恢复 (Suspend & Resume)：当 use 接收到一个处于 pending 状态的 Promise 时，它会抛出这个 Promise。
Suspense 捕获：这个抛出的信号会被最近的边界捕获，并显示 fallback UI。
React 恢复渲染：当 Promise 完成（resolved）后，React 会重新渲染该组件。这一次，use Hook 会直接返回 Promise 的结果。如果 Promise 失败（rejected），use 会抛出错误，由错误边界（Error Boundary）捕获。

优势总结：

代码极简：异步逻辑变得像同步一样直观。
告别状态管理样板代码：不再需要手动管理 loading 和 error 状态。
与 React 并发模式无缝集成：天然支持流式渲染和选择性注水。