返回组件数组的React Custom Hook是否属于不良开发模式？

结论 #

你实现的这个返回组件数组的React自定义Hook 不属于不良开发模式，这是动态渲染配置化区块的常见实现思路，没有违反React的Hook使用规则，完全可以正常运行。

可优化调整点 #

下面是几个可以优化的方向，能让代码更易维护、更符合React的通用开发习惯：

• 用映射表替换switch分支
  当前的switch语句每新增一种区块类型就要新增一个case，维护成本更高，改成静态映射表后扩展更方便，代码也更简洁：

import React from "react";
import { Image, Paragraph, Header } from "../../components/Blocks";

// 区块类型和组件的映射表
const blockComponentMap = {
  image: Image,
  paragraph: Paragraph,
  heading: Header
} as const;

export const useBlocks = (blocks: Item[]) => {
  return blocks.map((item) => {
    const Component = blockComponentMap[item.name];
    return Component ? <Component key={item.order} data={item.data} /> : null;
  });
};

• 优先封装为组件而非Hook
  你当前的Hook没有用到任何React内置Hook（比如useState、useEffect、useMemo等），本质就是一个纯数据转换函数，封装成独立的渲染组件更符合React的使用习惯，调用也更直观：

import React from "react";
import { Image, Paragraph, Header } from "../../components/Blocks";

const blockComponentMap = {
  image: Image,
  paragraph: Paragraph,
  heading: Header
} as const;

// 直接封装为渲染组件
export const BlockRenderer = ({ blocks }: { blocks: Item[] }) => {
  return blocks.map((item) => {
    const Component = blockComponentMap[item.name];
    return Component ? <Component key={item.order} data={item.data} /> : null;
  });
};

// 父组件使用示例：
// <BlockRenderer blocks={你的区块配置数组} />

• 可选增加类型校验
  可以给Item类型的name字段加枚举限制，或者增加类型守卫逻辑，避免传入不存在的区块类型时出现运行时问题，TS场景下也能获得更好的类型提示。

适合保留Hook形式的场景 #

如果你后续需要给区块增加统一的状态逻辑，比如监听区块可见性、添加统一的交互状态、需要结合useInView、useRequest等其他Hook做额外逻辑处理，那保留Hook的形式是完全合理的，可以把相关逻辑内聚在Hook中，避免散落在父组件里。

内容的提问来源于stack exchange，提问作者Adam