React state：把计数器真正看懂 · 第 3 / 3 节

第 03 节：Next.js 里让按钮能动的边界

本节目标：

解释为什么交互组件需要 Client Component。

给最小计数器补上 "use client"、useState 和点击更新。

分辨“页面从服务器开始”和“按钮在浏览器里交互”不是矛盾。

先修：前两节的 state 和 updater ｜上一节 << 02

计数器要在浏览器里响应点击

在 Next.js 里，不是每个文件一开始都在浏览器里处理点击。需要 state、点击事件或浏览器 API 的交互 UI，要先声明一个 Client Component 边界¹。"use client" 这行的意思可以先读成：“这个文件里的交互代码要在浏览器那边成立。”²

这不等于整站都必须变成客户端。你只需要把会响应点击的那一小块放到客户端边界里。

讲解

最小计数器需要三件事：文件顶部的 "use client"、从 React 导入 useState、按钮点击时调用 setter。它们不是三条咒语，而是一条链：声明浏览器边界 -> 拿到 state 工具 -> 点击时请求下一次显示。

补客户端边界

把三处空补成最小可交互计数器：客户端边界、 useState 导入、点击后加 1 。

这里检查你是否能把 React state 和 Next.js Client Component 边界放到同一个最小文件里。

;

import {  } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => }>
      点了 {count} 次
    </button>
  );
}

跟我做一遍

一个完整文件可以长这样：

TSX

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      点了 {count} 次
    </button>
  );
}

第一行不是装饰。它把这个文件标成客户端入口。useState 让组件记住 count,onClick 让浏览器里的点击能请求下一次显示。 Next.js 仍然可以在别的地方使用 Server Components；这里的边界只包住需要交互的计数器。

换你补全

把三处空补上：

TSX

____;

import { ____ } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => ____}>点了 {count} 次</button>;
}

参考答案：

TSX

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount((c) => c + 1)}>点了 {count} 次</button>;
}

三处空分别对应边界、 Hook 来源和事件更新。它们不是三条独立咒语，而是让按钮能在浏览器里响应点击的一条链。

小结 + 通向下一节

React state 负责组件记忆，函数式更新负责连续更新时接住上一版 state,Next.js 的 Client Component 边界负责让交互代码在浏览器侧成立。一个小计数器足够暴露这三条线。

Next.js Docs: Server and Client Components — https://nextjs.org/docs/app/getting-started/server-and-client-components ↩
Next.js Docs: use client — https://nextjs.org/docs/app/api-reference/directives/use-client ↩

Exercises

Exercise 1 · Level 1

不运行代码，圈出完整计数器里负责三件事的行：客户端边界、 state 来源、点击更新。

Done criteria · checked locally

客户端边界圈到 `"use client"`。state 来源圈到 `import { useState } from "react"` 和 `useState(0)`。点击更新圈到 `onClick` 里的 `setCount`。

Exercise 2 · Level 2

写一个“减 1”按钮版本。

Done criteria · checked locally

保留 `"use client"`。保留 `useState` 导入。点击时用函数式更新 `setCount((c) => c - 1)` 或等价写法。能解释为什么减法只改 updater 里的运算，不改客户端边界。

第 03 节：Next.js 里让按钮能动的边界

计数器要在浏览器里响应点击

讲解

跟我做一遍

换你补全

小结 + 通向下一节

Footnotes

Exercises