渲染函数和渲染组件React / JSX之间的区别

Question

我添加了一个示例，说明我观察到两者之间的行为有所不同。 https://codesandbox.io/s/snowy-snow-siuib

---

如果下面有一个功能Component

function MyComponent(){
    return <div>Hello</div>
}

以下两种呈现方式的区别是什么？

//A
function App() {
  return <>{ MyComponent() }</>;
}

//B
function App(){
    return <MyComponent />
}

如果这样，是否被认为是不良做法，为什么并且有任何理由这样做？