编辑“︁Next.js组件设计模式”︁（章节）

== 核心设计模式 ==

=== 1. 容器与展示组件模式 ===
该模式将组件分为两类：
* '''容器组件'''：负责数据获取、状态管理和业务逻辑。
* '''展示组件'''：只负责UI渲染，接收数据通过props。

==== 示例代码 ====
<syntaxhighlight lang="javascript">
// Container Component
import { useState, useEffect } from 'react';

function UserListContainer() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return <UserList users={users} />;
}

// Presentational Component
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
</syntaxhighlight>

==== 优势 ====
* 关注点分离
* 更好的可测试性
* 更高的可复用性

=== 2. 高阶组件(HOC)模式 ===
高阶组件是接收一个组件并返回一个新组件的函数，用于共享逻辑。

==== 示例代码 ====
<syntaxhighlight lang="javascript">
function withAuth(Component) {
  return function AuthenticatedComponent(props) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    useEffect(() => {
      // 检查认证状态
      checkAuth().then(auth => setIsAuthenticated(auth));
    }, []);

    return isAuthenticated ? <Component {...props} /> : <LoginPage />;
  };
}

// 使用HOC
const ProtectedPage = withAuth(MyPage);
</syntaxhighlight>

=== 3. 渲染属性模式 ===
通过props传递渲染函数，实现组件间的逻辑共享。

==== 示例代码 ====
<syntaxhighlight lang="javascript">
function DataFetcher({ url, children }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => setData(data));
  }, [url]);

  return children(data);
}

// 使用方式
<DataFetcher url="/api/posts">
  {posts => posts ? <PostList posts={posts} /> : <LoadingSpinner />}
</DataFetcher>
</syntaxhighlight>

=== 4. 复合组件模式 ===
通过多个组件协同工作，提供更灵活的API。

==== 示例代码 ====
<syntaxhighlight lang="javascript">
function Tabs({ children }) {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div className="tabs">
      <div className="tab-headers">
        {React.Children.map(children, (child, index) => (
          <button
            onClick={() => setActiveTab(index)}
            className={index === activeTab ? 'active' : ''}
          >
            {child.props.title}
          </button>
        ))}
      </div>
      <div className="tab-content">
        {React.Children.toArray(children)[activeTab]}
      </div>
    </div>
  );
}

function Tab({ title, children }) {
  return <div>{children}</div>;
}

// 使用方式
<Tabs>
  <Tab title="Profile">
    <ProfileContent />
  </Tab>
  <Tab title="Settings">
    <SettingsContent />
  </Tab>
</Tabs>
</syntaxhighlight>