参考

先看例子：

function FuncComp() {
  return <>FuncComp</>;
}

function normalJSXFunc() {
  return <>normalJSXFunc</>;
}

const Demo = () => {
  return (
    <>
      <FuncComp />
      {normalJSXFunc()}
    </>
  );
};

函数组件

本质上还是一个组件。因此它可以：使用 hooks、拥有自己的状态、使用 memo 缓存上次渲染；在 devtools 里显示为组件、也有自己的生命周期。

何时使用：当你需要组件内部状态，或者希望利用缓存来优化性能，必须使用 **<font style="color:rgb(18, 18, 18);"><Comp/></font>**

返回 JSX 的函数

在 Demo 进行渲染时，normalJsFunc 执行了，因此它是 Demo 的一部分，它的副作用被计算在 Demo 的副作用之内，它无法持有状态

说白了，返回值为 JSX 的函数仅仅是代码片段的复用而已，相当于直接在写 JSX。

何时使用：只是想对一些 jsx 进行复用，更好的组织代码时，请使用 **<font style="color:rgb(18, 18, 18);">{comp()}</font>**