编辑“︁Next.js复合组件”︁

= Next.js复合组件 =

== 介绍 ==
'''Next.js复合组件'''（Compound Components）是一种高级React/Next.js设计模式，通过将多个相关联的组件组合成一个逻辑单元，同时保持子组件的灵活性和可组合性。这种模式特别适用于构建复杂但用户友好的UI库（如导航菜单、表单控件或数据表格），其中父组件管理状态，而子组件根据上下文动态调整行为。

复合组件的核心特征：
* '''隐式状态共享'''：父组件通过React Context或克隆元素API向子组件传递状态，无需显式props传递
* '''声明式结构'''：用户通过JSX组合方式定义组件关系，代码可读性高
* '''API简化'''：对外暴露简洁的组件接口，内部处理复杂交互逻辑

== 基础实现原理 ==
复合组件通常通过以下两种技术实现：

=== 1. React Context方案 ===
<syntaxhighlight lang="javascript">
import { createContext, useContext } from 'react';

const TabsContext = createContext();

function Tabs({ children, defaultValue }) {
  const [activeTab, setActiveTab] = useState(defaultValue);
  
  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      <div className="tabs-container">{children}</div>
    </TabsContext.Provider>
  );
}

function Tab({ value, children }) {
  const { activeTab, setActiveTab } = useContext(TabsContext);
  
  return (
    <button 
      onClick={() => setActiveTab(value)}
      className={activeTab === value ? 'active' : ''}
    >
      {children}
    </button>
  );
}

// 使用示例
function Demo() {
  return (
    <Tabs defaultValue="profile">
      <Tab value="home">首页</Tab>
      <Tab value="profile">个人资料</Tab>
    </Tabs>
  );
}
</syntaxhighlight>

=== 2. React.cloneElement方案 ===
<syntaxhighlight lang="javascript">
function Accordion({ children }) {
  const [activeIndex, setActiveIndex] = useState(null);

  return React.Children.map(children, (child, index) => {
    return React.cloneElement(child, {
      isOpen: index === activeIndex,
      onToggle: () => setActiveIndex(index === activeIndex ? null : index)
    });
  });
}

function AccordionItem({ children, isOpen, onToggle }) {
  return (
    <div className="accordion-item">
      <button onClick={onToggle}>{children[0]}</button>
      {isOpen && <div className="content">{children[1]}</div>}
    </div>
  );
}

// 使用示例
function Demo() {
  return (
    <Accordion>
      <AccordionItem>
        <h3>标题1</h3>
        <p>内容1...</p>
      </AccordionItem>
      <AccordionItem>
        <h3>标题2</h3>
        <p>内容2...</p>
      </AccordionItem>
    </Accordion>
  );
}
</syntaxhighlight>

== 架构示意图 ==
<mermaid>
graph TD
    A[复合组件] --> B[状态管理]
    A --> C[子组件通信]
    B --> D((Context API))
    B --> E((useState/Reducer))
    C --> F(React.Children)
    C --> G(React.cloneElement)
</mermaid>

== 实际应用案例 ==
=== 案例1：高级数据表格 ===
<syntaxhighlight lang="javascript">
function DataTable({ children, data }) {
  const [sortConfig, setSortConfig] = useState(null);
  
  const sortedData = useMemo(() => {
    // 排序逻辑...
  }, [data, sortConfig]);

  return (
    <TableContext.Provider value={{ sortedData, sortConfig, setSortConfig }}>
      <table>{children}</table>
    </TableContext.Provider>
  );
}

function TableHeader({ columnKey, children }) {
  const { sortConfig, setSortConfig } = useContext(TableContext);
  
  return (
    <th onClick={() => setSortConfig({ key: columnKey, direction: 
      sortConfig?.key === columnKey && sortConfig.direction === 'asc' 
        ? 'desc' 
        : 'asc'
    })}>
      {children}
      {sortConfig?.key === columnKey && (
        <span>{sortConfig.direction === 'asc' ? '↑' : '↓'}</span>
      )}
    </th>
  );
}

// 使用示例
function UserTable({ users }) {
  return (
    <DataTable data={users}>
      <thead>
        <tr>
          <TableHeader columnKey="name">姓名</TableHeader>
          <TableHeader columnKey="age">年龄</TableHeader>
        </tr>
      </thead>
      <tbody>
        {/* 数据行渲染 */}
      </tbody>
    </DataTable>
  );
}
</syntaxhighlight>

=== 案例2：可定制的模态框系统 ===
<syntaxhighlight lang="javascript">
// 模态框复合组件实现
function Modal({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  
  const value = {
    isOpen,
    open: () => setIsOpen(true),
    close: () => setIsOpen(false)
  };

  return (
    <ModalContext.Provider value={value}>
      {isOpen && (
        <div className="modal-overlay">
          <div className="modal-content">{children}</div>
        </div>
      )}
    </ModalContext.Provider>
  );
}

function ModalTrigger({ as: Component = 'button', children, ...props }) {
  const { open } = useContext(ModalContext);
  return <Component onClick={open} {...props}>{children}</Component>;
}

function ModalClose({ as: Component = 'button', children, ...props }) {
  const { close } = useContext(ModalContext);
  return <Component onClick={close} {...props}>{children}</Component>;
}

// 使用示例
function ProductPreview() {
  return (
    <Modal>
      <ModalTrigger>查看详情</ModalTrigger>
      
      <div className="modal-body">
        <h2>产品详情</h2>
        <p>这里是产品描述内容...</p>
        <ModalClose>关闭</ModalClose>
      </div>
    </Modal>
  );
}
</syntaxhighlight>

== 性能优化考虑 ==
当使用复合组件时，需注意以下性能方面：

1. '''Context分割'''：将不同功能的Context分离，避免不必要的重渲染
   <syntaxhighlight lang="javascript">
   // 不推荐 - 单一大型Context
   <AppContext.Provider value={{ user, theme, cart, ... }}>
   
   // 推荐 - 多个专注的Context
   <UserContext.Provider>
     <ThemeContext.Provider>
       <CartContext.Provider>
   </syntaxhighlight>

2. '''记忆化'''：使用<code>React.memo</code>和<code>useMemo</code>优化子组件
   <syntaxhighlight lang="javascript">
   const MemoizedTab = React.memo(Tab);
   
   function Tabs() {
     const contextValue = useMemo(() => ({ activeTab, setActiveTab }), [activeTab]);
     // ...
   }
   </syntaxhighlight>

3. '''动态子组件'''：当子组件可能动态变化时，使用唯一的<code>key</code>属性
   <syntaxhighlight lang="javascript">
   <Tabs>
     {tabs.map(tab => (
       <Tab key={tab.id} value={tab.id}>{tab.label}</Tab>
     ))}
   </Tabs>
   </syntaxhighlight>

== 数学表达 ==
复合组件的组合关系可以用集合论表示：
<math>
\mathcal{C} = \{P\} \cup \{C_1, C_2, ..., C_n\}
</math>
其中：
* <math>P</math> 是父组件
* <math>C_i</math> 是第i个子组件
* 组件间的通信通道 <math>\Phi</math> 满足：
  <math>\Phi(P, C_i) \neq \emptyset, \quad \forall i \in [1,n]</math>

== 总结 ==
Next.js复合组件模式通过巧妙的组件组合方式，提供了以下优势：
* '''更好的关注点分离'''：状态管理与UI渲染解耦
* '''更灵活的API'''：用户可以通过JSX组合自由配置组件
* '''更强的可维护性'''：相关逻辑集中管理
* '''更直观的代码结构'''：反映UI的层次关系

对于Next.js开发者，掌握复合组件模式可以显著提升复杂组件的开发效率，特别是在构建可复用的UI库或设计系统时。建议从简单案例开始实践，逐步应用到更复杂的场景中。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js高级组件]]