React组件调用和组件标签的区别组件标签<Body />出现在 component tree 中，具有自己的状态和生命

下面示例代码中两种组件使用方式有什么区别？

export default function Home() {
  const Body = () => <div>body</div>;

  return (
    <div>
      {/** 组件调用 */ Body()}

      <br />

      {/** 组件标签 */}
      <Body />

    </div>
  );
}

答：如下图所示。

只有组件标签<Body />出现在 component tree 中，具有自己的状态和生命周期；而Body()则直接由 JSX 模版处理，返回值是组件Home的内容，本身没有状态和生命周期等属性。

Screenshot 2025-03-17 at 11.28.46.png hello

本文使用 mdnice 排版