TypeScript-React高阶组件完整示例解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01109/article/details/148325420

TypeScript-React高阶组件完整示例解析

react 项目地址: https://gitcode.com/gh_mirrors/reactt/react-typescript-cheatsheet

高阶组件(HOC)基础概念

在React开发中，高阶组件(Higher-Order Component)是一种强大的模式，它允许我们复用组件逻辑。高阶组件本质上是一个函数，它接收一个组件并返回一个新的组件。在TypeScript环境下使用HOC时，类型系统的加入使得我们可以更安全地处理组件属性和注入逻辑。

为什么需要高阶组件

高阶组件主要解决以下问题：

跨组件共享逻辑
在不修改原组件的情况下扩展功能
通过属性代理实现关注点分离
在TypeScript环境下提供更好的类型安全

完整示例解析

1. 定义注入属性接口

首先我们需要定义通过HOC注入的属性接口：

interface WithThemeProps {
  primaryColor: string;
}

这个接口描述了HOC将向包装组件注入的属性。在这个例子中，我们注入一个主题颜色。

2. 组件使用示例

组件在使用HOC时，需要将注入属性合并到自己的属性接口中：

interface Props extends WithThemeProps {
  children?: React.ReactNode;
}

class MyButton extends React.Component<Props> {
  public render() {
    // 使用主题颜色和其他属性渲染元素
  }

  private someInternalMethod() {
    // 这里也可以通过props访问主题值
  }
}

export default withTheme(MyButton);

关键点在于：

组件属性接口扩展了HOC注入的属性接口
导出时使用HOC包装原始组件

3. 组件消费方式

使用被包装的组件时，注入的属性变为可选：

<MyButton>Hello button</MyButton> // 有效，使用默认主题
<MyButton primaryColor="#333">Hello Button</MyButton> // 也有效，覆盖默认主题

4. HOC实现细节

完整的HOC实现如下：

export function withTheme<T extends WithThemeProps = WithThemeProps>(
  WrappedComponent: React.ComponentType<T>
) {
  // 为React开发工具创建友好的显示名称
  const displayName =
    WrappedComponent.displayName || WrappedComponent.name || "Component";

  // 创建内部组件
  const ComponentWithTheme = (props: Omit<T, keyof WithThemeProps>) => {
    // 获取要注入的属性，实际项目中可能使用Context
    const themeProps = useTheme();

    // props放在后面以便可以覆盖默认值
    return <WrappedComponent {...themeProps} {...(props as T)} />;
  };

  ComponentWithTheme.displayName = `withTheme(${displayName})`;

  return ComponentWithTheme;
}

技术要点解析：

泛型T约束为WithThemeProps，确保包装组件接受注入属性
Omit<T, keyof WithThemeProps>从消费者属性中排除注入属性
类型断言props as T是TypeScript 3.2的一个临时解决方案
良好的displayName有助于调试

5. 高级动态HOC示例

下面是一个更高级的动态HOC示例，它根据传入组件的属性动态注入值：

export function inject<TProps, TInjectedKeys extends keyof TProps>(
  Component: React.JSXElementConstructor<TProps>,
  injector: Pick<TProps, TInjectedKeys>
) {
  return function Injected(props: Omit<TProps, TInjectedKeys>) {
    return <Component {...(props as TProps)} {...injector} />;
  };
}

这个HOC可以：

静态注入特定属性
自动从消费者属性中排除已注入的属性
保持完整的类型安全

进阶话题

1. 使用forwardRef处理ref转发

为了实现完全的可重用性，HOC应该处理ref转发：

function withTheme<T extends WithThemeProps = WithThemeProps>(
  WrappedComponent: React.ComponentType<T>
) {
  const displayName = /* 同上 */;
  
  const ComponentWithTheme = React.forwardRef<
    HTMLElement, 
    Omit<T, keyof WithThemeProps>
  >((props, ref) => {
    const themeProps = useTheme();
    return <WrappedComponent ref={ref} {...themeProps} {...(props as T)} />;
  });

  ComponentWithTheme.displayName = `withTheme(${displayName})`;
  
  return ComponentWithTheme;
}