第 141 章:为什么选 React 18 + Next.js 14

学习目标

• 了解 React 18 的核心特性
• 理解 Next.js 14 App Router 的优势
• 掌握前端框架选型思路
• 在新项目中正确选择 React 生态

一、React 的定位

React 是目前全球最流行的前端 UI 库(不是框架),由 Meta(原 Facebook)维护,采用组件化和声明式编程范式。

二、为什么选 React 18

2.1 三大新特性

2.2 并发渲染示例

import { useState, useTransition } from 'react';

function Search() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    setQuery(e.target.value);
    startTransition(() => {
      // 重计算
    });
  }
  return <input value={query} onChange={handleChange} />;
}

三、为什么选 Next.js 14

维度	Vite + React	Next.js 14
定位	构建工具 + SPA	全栈框架
路由	手动配 React Router	文件系统路由
SSR	需要额外配置	内置
SEO	弱	强
部署	静态托管即可	适合 Vercel

App Router 革命

Next.js 14 默认 Server Components,只在需要交互时用 Client Components,大幅减少 JS 体积。

四、什么时候不用 React

• 小型静态站点:VitePress / Astro 更合适
• 极致性能:考虑 SolidJS / Svelte
• 不需要 SSR:纯 Vite + React 也够用

五、本章小结

概念	关键
React 18	Concurrent / Batching / Suspense
Next.js 14	App Router / RSC
适用场景	中大型应用 + SEO 需求

动手练习

1. 打开 https://react.dev 阅读「Thinking in React」
2. 用一段话回答:你的项目为什么(不)需要 React?

推荐阅读

• 📖 React 官方文档
• 📖 Next.js 文档

---

下一章:第 142 章:环境搭建 →