编辑“︁Next.js客户端状态”︁（章节）

= Next.js客户端状态 =

== 介绍 ==
在Next.js应用中，'''客户端状态（Client-side State）'''指的是仅在浏览器环境中存在、由React组件动态管理的临时数据。与服务器状态不同，客户端状态不涉及数据库或API持久化，通常用于处理UI交互、表单输入或组件间通信。Next.js作为React框架，完全支持React的状态管理机制（如useState、useReducer），同时允许集成第三方库（如Zustand、Jotai）。

== 核心概念 ==
=== 本地状态（Local State） ===
通过React的<code>useState</code>或<code>useReducer</code>管理，作用域限于单个组件或其子组件。

<syntaxhighlight lang="javascript">
// 示例：计数器组件
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0); // 定义本地状态

  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}
</syntaxhighlight>

'''输出效果'''：按钮点击后，页面上的计数会实时更新，无需刷新。

=== 全局状态（Global State） ===
当多个组件需要共享状态时，可使用Context API或第三方库。以下是Context API示例：

<syntaxhighlight lang="javascript">
// 创建Context
import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 使用Context
export function useTheme() {
  return useContext(ThemeContext);
}
</syntaxhighlight>

=== 状态持久化 ===
使用<code>localStorage</code>或<code>sessionStorage</code>在页面刷新后保留状态：

<syntaxhighlight lang="javascript">
// 持久化计数器状态
const [count, setCount] = useState(() => {
  const saved = localStorage.getItem('count');
  return saved ? parseInt(saved) : 0;
});

useEffect(() => {
  localStorage.setItem('count', count);
}, [count]);
</syntaxhighlight>

== 状态管理库对比 ==
{| class="wikitable"
|+ 常见客户端状态管理方案
! 方案 !! 适用场景 !! 特点
|-
| useState | 简单组件状态 | 内置、轻量级
|-
| Context API | 中规模应用 | 无需额外依赖，可能引发不必要的渲染
|-
| Zustand | 全局状态 | 轻量、支持中间件
|-
| Jotai | 原子化状态 | 基于原子模型，适合复杂状态
|}

== 实际案例 ==
=== 购物车状态管理 ===
使用Zustand实现跨组件共享购物车数据：

<syntaxhighlight lang="javascript">
// store/cartStore.js
import { create } from 'zustand';

const useCartStore = create((set) => ({
  items: [],
  addItem: (product) => 
    set((state) => ({ items: [...state.items, product] })),
}));

// 组件中使用
function AddToCart({ product }) {
  const { addItem } = useCartStore();
  return <button onClick={() => addItem(product)}>加入购物车</button>;
}
</syntaxhighlight>

<mermaid>
sequenceDiagram
    participant User
    participant Component
    participant Store
    User->>Component: 点击"加入购物车"
    Component->>Store: 调用addItem(product)
    Store->>Component: 更新状态
    Component->>User: 显示反馈
</mermaid>

== 性能优化 ==
* 使用<code>React.memo</code>避免不必要的子组件渲染
* 通过状态分片（State Colocation）将状态下沉到最近公共祖先
* 对于频繁更新的状态，考虑使用<code>useMemo</code>或<code>useCallback</code>

== 数学表达 ==
状态更新可视为函数式操作：
<math>
S_{new} = f(S_{old}, A)
</math>
其中<math>S</math>为状态，<math>A</math>为动作。

== 常见问题 ==
* '''Q: 何时需要状态管理库？'''  
  A: 当组件层级过深或跨路由共享状态时。
* '''Q: 如何选择状态管理方案？'''  
  A: 从简单方案开始，随着复杂度增长逐步升级。

== 总结 ==
Next.js客户端状态管理是构建交互式应用的核心技术。开发者应根据应用规模选择适当方案，并注意性能优化。对于大多数场景，React内置API已足够，复杂场景可借助现代状态库如Zustand或Jotai。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js状态管理]]