init

posts/前端开发/react18-concurrent.md

@@ -0,0 +1,93 @@
+---
+title: "React 18 并发特性深度解析"
+date: "2026-05-22"
+category: "前端开发"
+tags: ["React", "JavaScript", "并发"]
+excerpt: "Suspense、Transitions、Server Components 全解读，理解 React 18 的核心变革。"
+---
+
+## 一、并发渲染基础
+
+### 1.1 什么是并发渲染
+
+React 18 最核心的变化就是并发渲染。简单来说，React 可以"暂停"正在进行的渲染工作，处理更高优先级的更新，然后再回来继续之前的工作。
+
+这跟传统的同步渲染完全不同：
+
+- **同步渲染**：一旦开始就必须完成，无法中断
+- **并发渲染**：可以暂停、恢复、甚至丢弃正在进行的渲染
+
+### 1.2 createRoot 与 StrictMode
+
+```jsx
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+## 二、Transitions
+
+### 2.1 useTransition
+
+将某些状态更新标记为"非紧急"：
+
+```jsx
+function SearchPage() {
+  const [query, setQuery] = useState('');
+  const [isPending, startTransition] = useTransition();
+
+  function handleChange(e) {
+    // 紧急更新：输入框立即响应
+    setQuery(e.target.value);
+    
+    // 非紧急更新：搜索结果可以延迟
+    startTransition(() => {
+      setSearchResults(filterResults(e.target.value));
+    });
+  }
+
+  return (
+    <>
+      <input value={query} onChange={handleChange} />
+      {isPending ? <Spinner /> : <Results />}
+    </>
+  );
+}
+```
+
+### 2.2 useDeferredValue
+
+```jsx
+const deferredQuery = useDeferredValue(query);
+const results = useMemo(() => filterResults(deferredQuery), [deferredQuery]);
+```
+
+## 三、Suspense 改进
+
+### 3.1 数据获取
+
+```jsx
+function ProfilePage() {
+  return (
+    <Suspense fallback={<ProfileSkeleton />}>
+      <ProfileDetails />
+      <Suspense fallback={<PostsSkeleton />}>
+        <ProfilePosts />
+      </Suspense>
+    </Suspense>
+  );
+}
+```
+
+## 四、Server Components
+
+React Server Components 让组件在服务端渲染，零 JS 体积发送到客户端：
+
+- 可以直接访问数据库和文件系统
+- 不会增加客户端 JS 打包体积
+- 与 Client Components 无缝集成
+
+## 五、总结
+
+React 18 的并发特性让 UI 响应更加流畅。核心思路是"区分优先级，可中断渲染"。