🌐 全景 ⚡ Next.js ⚛️ React 📘 TypeScript 🗄️ Prisma 🎨 Tailwind 🚀 部署

⚛️ React

组件 = 一个函数返回 HTML · 数据变了 UI 自动变

核心定位

React 是一个 UI 库，不是框架。它只解决一个问题：数据变了 → UI 自动更新。

Java 概念	React 对应
JSP 片段 / Thymeleaf 模板	组件（一个函数返回 HTML）
Model 属性 + setter	`useState`（变了视图自动更新）
`@PostConstruct`	`useEffect`（组件加载时执行）
onclick 事件监听	`onClick={() => ...}`
jQuery 操作 DOM	不用操作 DOM，改状态即可

📄 官方文档 →

组件 = 函数

// 组件是一个函数，参数是传入的属性（props），返回值是 HTML
function ProductCard({ name, price }: { name: string; price: number }) {
  return (
    <div className="border rounded p-4">
      <h3>{name}</h3>          // {} = 在 HTML 里嵌入 JS 表达式
      <p>¥{price}</p>
    </div>
  )
}
// 使用组件
<ProductCard name="商品" price={99.9} />

useState — 核心

声明一个"状态变量"，值变了页面对应的地方自动重新渲染。

const [count, setCount] = useState(0)
// count:   当前值（读）
// setCount: 修改值（写），调用后页面自动更新

return (
  <div>
    <p>你点了 {count} 次</p>
    <button onClick={() => setCount(count + 1)}>+1</button>
  </div>
)

// 常见：管理列表数据
const [products, setProducts] = useState([])
const [loading, setLoading] = useState(true)

// 加载数据（配合 useEffect）
useEffect(() => {
  fetch('/api/products')       // 调你自己的 API
    .then(res => res.json())
    .then(data => { setProducts(data); setLoading(false) })
}, [])

useEffect — 组件加载时执行

Java	React
`@PostConstruct`	`useEffect(() => {...}, [])`
`@PreDestroy`	`useEffect(() => { return () => {...} }, [])` 的 return

useEffect(() => {
  // 组件挂载后执行（类似 @PostConstruct）
  console.log('组件挂载了')

  return () => { // 组件卸载前执行（类似 @PreDestroy）
    console.log('组件卸载了')
  }
}, [])    // [] = 只执行一次

'use client' 何时用

	服务端组件（默认）	客户端组件（'use client'）
运行位置	服务器	浏览器
能做的事	查数据库、渲染 HTML	onClick、useState、localStorage
JS 体积	❌ 不发 JS	✅ 会发送 JS 到浏览器
建议	✅ 默认都用这个	只有需要交互时才用

// ✅ 服务端组件 — 直接查数据库（不用写 API）
export default async function ProductList() {
  const products = await prisma.product.findMany()
  return <div>{products.map(p => ...)}</div>
}

// ❌ 客户端组件 — 需要交互
'use client'
export function AddToCartBtn() {
  return <button onClick={() => ...}>加入</button>
}