Next.js 中的基本状态管理 让我们从 Next.js 状态管理的基础开始。在接下来的章节中，我们将讨论基本的 Hooks、技术和工具，以便有效地管理状态。 使用 useState Hook 进行状态管理 useState Hook 是在传统的 React 应用中管理状态的一种常用方法，在 Next.js 中也可以类似地使用。让我们创建一个允许用户通过点击按钮增加分数的应用。 进入 pages 文件夹，在 index.js 中包含以下代码： // 'use client' // 如果使用 /app 文件夹 import { useState } from "react"; export default function Home() { const [score, setScore] = useState(0); const increaseScore = () => setScore(score + 1); return ( <div> <p>你的分数是 {score}</p> <button onClick={increaseScore}>+</button> </div> ); } 我们首先导入了 useState Hook，然后将初始状态设置为 0。我们还提供了一个 setScore 函数，以便稍后更新分数。 然后我们创建了 increaseScore 函数，它访问分数的当前值，并使用 setState 将其增加 1。我们将该函数分配给了 + 按钮的 onClick 事件，因此每次按下按钮时，分数都会增加。 useReducer Hook useReducer Hook 的工作方式类似于数组的 reduce 方法。我们传递一个 reducer 函数和一个初始值。reducer 接收当前状态和一个操作，...