在React组件内定义嵌套函数组件是否为反模式或有性能影响？

示例代码 #

import { memo } from "react";
import { ErrorBoundary } from "react-error-boundary";

import { ChildComponent } from "../../ChildComponent";
import MainComponentFallback from "../../MainComponentFallback";

type Props = {
  id: string,
};

const MainComponent = (props: Props) => {
  const { id } = props;

  const MainComponentBody = () => {
    return <span> component id is : {id} </span>;
  };

  return (
    <div>
      <ErrorBoundary FallbackComponent={MainComponentFallback}>
        <MainComponentBody />
      </ErrorBoundary>
      <ChildComponent id={id} />
    </div>
  );
};

export default memo(MainComponent, isEqual);

场景与问题 #

目前MainComponent的不同部分已拆分为多个独立组件文件（如ChildComponent），不想再新增文件，且这是组件的核心部分，认为放在当前文件内比移到其他文件更合适。定义MainComponentBody函数的原因是，只有这样react-error-boundary才能感知并捕获嵌套UI组件的渲染错误。

问题：这种组件结构是否属于反模式，或是存在性能影响？（需说明MainComponentBody因定义在MainComponent内部，可访问其props）

解答 #

1. 不属于反模式 #

这种写法完全算不上反模式。React本身支持在组件内部定义子组件，当这个子组件仅为当前父组件服务、且属于核心逻辑部分时，放在同一个文件里反而能提升代码的内聚性，刚好契合你不想新增文件的需求。

而且你用内部组件配合ErrorBoundary的逻辑是合理的：ErrorBoundary只能捕获直接子组件树的渲染错误，如果直接在ErrorBoundary下写JSX，错误可能会冒泡到上层的ErrorBoundary（如果存在）；封装成内部组件后，错误会被当前的ErrorBoundary正确捕获，这完全符合react-error-boundary的设计逻辑。

另外，MainComponentBody定义在内部确实能直接访问父组件的props（比如示例里的id），不用额外通过props传递，这也是这种写法的一个便利点。

2. 存在潜在的性能影响 #

这里的核心问题是：每次MainComponent渲染时，MainComponentBody都会被重新定义，React会把它当成一个全新的组件类型处理，带来两个问题：

• 若MainComponentBody内部有状态、副作用（比如useState、useEffect），每次渲染都会重新初始化这些逻辑；
• React的diff算法会判定这是不同类型的组件，会卸载旧的实例并重新挂载新的，而非做局部更新，会产生额外的性能开销——如果MainComponent频繁渲染（比如id频繁变化、或自身状态频繁更新），这个开销会更明显。

不过你给MainComponent套了memo，只要传入的id不变，MainComponent就不会重新渲染，间接避免了MainComponentBody被重复定义的问题。但如果id频繁变化，这个性能隐患就会显现。

3. 不新增文件的优化方案 #

如果想保留当前的代码结构又规避性能问题，可以把MainComponentBody提取到MainComponent外部，通过props传递id，同时用memo包裹它：

import { memo } from "react";
import { ErrorBoundary } from "react-error-boundary";

import { ChildComponent } from "../../ChildComponent";
import MainComponentFallback from "../../MainComponentFallback";

type Props = {
  id: string,
};

// 提取到外部并包裹memo
const MainComponentBody = memo(({ id }: { id: string }) => {
  return <span> component id is : {id} </span>;
});

const MainComponent = memo((props: Props) => {
  const { id } = props;

  return (
    <div>
      <ErrorBoundary FallbackComponent={MainComponentFallback}>
        <MainComponentBody id={id} />
      </ErrorBoundary>
      <ChildComponent id={id} />
    </div>
  );
}, isEqual);

export default MainComponent;

这样既不用新增文件，又能避免每次渲染重新定义组件的问题，同时ErrorBoundary依然能正常捕获错误。

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