WHAT - React Polymorphic Components

In the world of React components, a polymorphic component is a component that can be rendered with a different container element / node.

Polymorphic components 和 regular components 在 React 中是两种不同的组件设计方式，各自有其优缺点和适用场景。

以下是它们的详细比较：

Polymorphic Components

定义

Polymorphic components 是指那些可以根据 props 动态决定其渲染的 HTML 元素或其他组件的组件。它们提供了极大的灵活性和可重用性。

优势

1. 灵活性:

   • 可以渲染不同类型的元素或组件，而不需要创建多个类似的组件。
   • 提供了一种方式，通过简单的配置来改变组件的渲染逻辑。

2. 代码复用:

   • 减少了重复代码的编写，因为可以通过单个组件处理多种渲染需求。

3. 类型安全:

   • 通过 TypeScript 等工具，可以确保在使用 polymorphic components 时保持类型安全。

使用场景

• 需要创建一个组件，该组件可能会渲染不同类型的 HTML 元素，例如按钮、链接、div 等。
• 需要为多个类似的组件提供统一的逻辑和样式，同时允许根据需求自定义渲染的元素。

实现示例

import React from 'react';

type PolymorphicComponentProps<E extends React.ElementType> = {
  as?: E;
  children: React.ReactNode;
} & React.ComponentPropsWithoutRef<E>;

const PolymorphicComponent = <E extends React.ElementType = 'div'>({
  as,
  children,
  ...restProps
}: PolymorphicComponentProps<E>) => {
  const Element = as || 'div';
  return <Element {...restProps}>{children}</Element>;
};

// 使用示例
<PolymorphicComponent as="button" onClick={() => alert('Button clicked!')}>
  Click Me
</PolymorphicComponent>;

<PolymorphicComponent as="a" href="https://example.com">
  Go to Example
</PolymorphicComponent>;

Regular Components

定义:
Regular components 是指那些在创建时固定渲染特定 HTML 元素或其他组件的组件。它们通常不会根据 props 动态改变渲染的元素类型。

优势

1. 简单易懂:

   • 固定的渲染逻辑使得组件更易于理解和维护。
   • 适合不需要动态改变渲染逻辑的场景。

2. 类型安全:

   • 更容易管理组件的 props 和类型，因为渲染的元素类型是固定的。

使用场景:

• 需要创建特定功能的组件，例如按钮、输入框、列表项等。
• 组件的渲染逻辑和元素类型在应用的整个生命周期中都是固定的。

实现示例

import React from 'react';

type ButtonProps = {
  onClick: () => void;
  children: React.ReactNode;
};

const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

type LinkProps = {
  href: string;
  children: React.ReactNode;
};

const Link: React.FC<LinkProps> = ({ href, children }) => {
  return <a href={href}>{children}</a>;
};

// 使用示例
<Button onClick={() => alert('Button clicked!')}>Click Me</Button>;

<Link href="https://example.com">Go to Example</Link>;

比较总结

• 灵活性:

  • Polymorphic components 提供了更高的灵活性，可以根据需求动态渲染不同的元素。
  • Regular components 固定渲染特定元素，灵活性较低。

• 代码复用:

  • Polymorphic components 可以减少重复代码，通过一个组件处理多种需求。
  • Regular components 通常需要为不同需求创建多个组件，代码复用较低。

• 复杂性:

  • Polymorphic components 由于其动态特性，可能会增加组件的复杂性，特别是在处理类型和 props 时。
  • Regular components 更简单直接，易于理解和维护。

• 类型安全:

  • Polymorphic components 需要更复杂的类型定义以确保类型安全。
  • Regular components 由于渲染逻辑固定，类型管理相对简单。

选择使用 polymorphic components 还是 regular components 取决于具体的需求。如果需要高灵活性和代码复用，polymorphic components 是更好的选择；如果需要简单明确的组件结构，regular components 更适合。