HOC 速查表

此 HOC 速查表汇集了使用 React 和 TypeScript 编写高阶组件的所有可用知识。

• 我们最初将紧密映射到HOC 官方文档
• 虽然存在 Hook，但许多库和代码库仍然需要类型化 HOC。
• 将来可能会考虑渲染 Props
• 目标是编写提供类型安全且不会妨碍开发的 HOC。

HOC 有很多用例。例如

• HOC 可以包装组件以在渲染前检查用户是否已认证，或根据用户角色限制访问。
• HOC 可以根据功能标志或 A/B 测试有条件地渲染组件。
• HOC 可以为组件提供翻译功能。
• HOC 可以向组件添加日志记录或分析跟踪，而无需修改其核心逻辑。

这是一个您可以立即复制的基本 HOC 示例

type PropsAreEqual<P> = (
  prevProps: Readonly<P>,
  nextProps: Readonly<P>
) => boolean;

const withSampleHoC = <P extends {}>(
  component: {
    (props: P): Exclude<React.ReactNode, undefined>;
    displayName?: string;
  },
  propsAreEqual?: PropsAreEqual<P> | false,

  componentName = component.displayName ?? component.name
): {
  (props: P): React.JSX.Element;
  displayName: string;
} => {

  function WithSampleHoc(props: P) {
    //Do something special to justify the HoC.
    return component(props) as React.JSX.Element;
  }

  WithSampleHoc.displayName = `withSampleHoC(${componentName})`;

  let wrappedComponent = propsAreEqual === false ? WithSampleHoc : React.memo(WithSampleHoc, propsAreEqual);

  //copyStaticProperties(component, wrappedComponent);

  return wrappedComponent as typeof WithSampleHoc
};

此代码满足以下标准

1. 允许组件返回有效的元素（字符串 | 数组 | 布尔值 | null | 数字），而不仅仅是React.JSX.Element | null。
2. 将其包装在 memo 中，除非您选择退出。
3. 删除嵌套组件，因此 React 开发工具只会显示一个组件。
4. 在 React 开发工具中使用displayName指示这是一个包装在两个 HoC 中的组件。
5. 可选：复制可能已在原始组件上定义的静态属性。