编辑“︁Next.js客户端组件”︁

= Next.js客户端组件 =

== 介绍 ==
'''Next.js客户端组件'''（Client Components）是Next.js框架中允许在浏览器端执行JavaScript的React组件。与[[服务端组件]]不同，客户端组件会在用户浏览器中完成渲染和交互处理，适合需要动态交互、状态管理或浏览器API（如`localStorage`、`window`对象）的场景。

客户端组件的主要特点包括：
* '''浏览器端渲染'''：组件代码在客户端下载并执行。
* '''交互性'''：支持事件处理、状态管理和生命周期方法。
* '''渐进增强'''：可与服务端组件混合使用。

== 工作原理 ==
Next.js通过构建时标记区分客户端/服务端组件。当组件文件顶部包含<code>"use client"</code>指令时，Next.js会将其视为客户端组件：

<syntaxhighlight lang="javascript">
"use client"; // 客户端组件标记

import { useState } from 'react';

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

<mermaid>
graph LR
    A[浏览器请求页面] --> B[Next.js服务端]
    B --> C[返回HTML骨架]
    C --> D[浏览器加载客户端JS]
    D --> E[客户端组件Hydration完成]
</mermaid>

== 核心特性 ==
=== 状态管理 ===
客户端组件完全支持React状态管理：
<syntaxhighlight lang="javascript">
"use client";

export default function Form() {
  const [input, setInput] = useState('');
  return <input value={input} onChange={(e) => setInput(e.target.value)} />;
}
</syntaxhighlight>

=== 生命周期方法 ===
可使用<code>useEffect</code>处理副作用：
<syntaxhighlight lang="javascript">
"use client";

import { useEffect } from 'react';

export default function Timer() {
  useEffect(() => {
    const timer = setInterval(() => console.log('Tick'), 1000);
    return () => clearInterval(timer);
  }, []);
  return <div>Check console</div>;
}
</syntaxhighlight>

=== 浏览器API访问 ===
直接调用浏览器API：
<syntaxhighlight lang="javascript">
"use client";

export default function GeoLocation() {
  const [coords, setCoords] = useState(null);
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(pos => {
      setCoords(pos.coords);
    });
  }, []);
  return <div>{coords ? `${coords.latitude}, ${coords.longitude}` : 'Loading...'}</div>;
}
</syntaxhighlight>

== 性能优化 ==
客户端组件会增大包体积，需注意：
* '''代码分割'''：动态导入组件
* '''懒加载'''：对非关键组件使用<code>next/dynamic</code>
* '''状态序列化'''：避免在服务端/客户端间传递大型状态

<syntaxhighlight lang="javascript">
"use client";

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>Loading...</p>,
  ssr: false
});
</syntaxhighlight>

== 实际案例 ==
=== 购物车系统 ===
<syntaxhighlight lang="javascript">
"use client";

import { useCart } from '../hooks/useCart';

export default function AddToCart({ productId }) {
  const { addItem } = useCart();
  return (
    <button 
      onClick={() => addItem(productId)}
      className="bg-blue-500 text-white p-2 rounded"
    >
      Add to Cart
    </button>
  );
}
</syntaxhighlight>

=== 实时表单验证 ===
<syntaxhighlight lang="javascript">
"use client";

export default function EmailForm() {
  const [email, setEmail] = useState('');
  const [isValid, setIsValid] = useState(true);

  const validateEmail = (value) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    setIsValid(regex.test(value));
  };

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => {
          setEmail(e.target.value);
          validateEmail(e.target.value);
        }}
      />
      {!isValid && <p className="text-red-500">Invalid email</p>}
    </div>
  );
}
</syntaxhighlight>

== 数学公式示例 ==
客户端组件中可实现的动画缓动函数：
<math>
f(t) = t^2 \times (3 - 2t)
</math>

== 最佳实践 ==
1. '''最小化原则'''：仅在需要交互性的部分使用客户端组件
2. '''组件隔离'''：将交互逻辑封装到小型客户端组件中
3. '''性能监控'''：使用<code>next/bundle-analyzer</code>跟踪包大小
4. '''渐进增强'''：优先使用服务端渲染，逐步添加客户端功能

== 参见 ==
* [[Next.js服务端组件]]
* [[React Hooks]]
* [[状态管理]]

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js渲染策略]]