React工程实践

把交互留在需要它的地方

用服务端组件组织内容，只在按钮、菜单和主题切换处引入客户端状态。

888tools2026年10月3日示例内容

示例文章，用于展示普通 .md 文件也能参与同一套内容加载流程。

静态内容的边界

文章列表、标题、摘要和正文无需浏览器中的状态管理。App Router 默认的服务端组件适合处理这些内容，可以在构建或服务端渲染时准备页面。

什么时候使用客户端组件

按钮要响应点击，菜单要管理展开状态，主题切换需要读取浏览器里的偏好。这些组件适合使用 "use client"。

"use client";

import { useState } from "react";

export function ExampleCounter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

在小范围内管理状态

把交互封装在组件内部，外围的内容页面就可以保持简单。遇到多个组件共享状态时，再把状态提升到它们共同的边界。

这是一种组织代码的方法，具体边界仍需要结合页面的实际交互决定。