这不是一个好主意。每次App重新渲染时，它都会为CustomComponent创建一个全新的定义。它具有相同的功能，但由于它是一个不同的引用，react需要卸载旧的引用并重新挂载新的引用。因此，您将强制react在每次渲染时执行额外的工作，并且您还将重置CustomComponent中的任何状态。
相反，组件应该自己声明，而不是在渲染中声明，这样它们就可以只创建一次，然后重用。如果需要，你可以让组件接受props来自定义它的行为：

const CustomComponent = (): JSX.Element => <h1>But can I do this?</h1>

export default function App() {
  return (
    <div className="App">
      <UsualExample />
      <CustomComponent />
    </div>
  );
}

有时，你可能在一个组件中做一些重复的事情，并希望通过一个helper函数来简化代码。这是可以的，但你需要将它作为一个函数调用，而不是将它作为一个组件呈现。

export default function App() {
  const customCode = (): JSX.Element => <h1>But can I do this?</h1>
  return (
    <div className="App">
      {customCode()}
      <UsualExample />
      {customCode()}
    </div>
  );
}

使用这种方法，react将比较<h1>和<h1>，因此不需要重新挂载它。

这不仅是个坏主意，更是个可怕的主意.
这是一个可怕的想法，因为react组件有一个生命周期。它们被挂载，它们可以在自己或树中较低的位置（它们渲染的东西）维护状态。但如果组件定义在父组件的每次渲染时都发生更改，这就不会发生。你最终会看到奇怪的bug，比如状态似乎在奇怪的时候被重置。
之所以要在另一个组件中声明一个组件，唯一的原因是关闭一个prop（也许也是一些state），你想在一个子组件中捕获它-这里的技巧-将它作为一个 prop 传递给一个新组件，然后你可以在外部声明新组件。
转这个：

function UsualExample() {
  return <h1>This is the standard example…</h1>
}

export default function App({someProp}) {
  // the only reason you're declaring it in here is because this component needs "something" that's available in <App/> - in this case, it's someProp
  const CustomComponent = (): JSX.Element => <h1>I'm rendering {someProp}</h1>
  return (
    <div className="App">
      <UsualExample />
      <CustomComponent />
    </div>
  );
}

变成这样：

function UsualExample() {
  return <h1>This is the standard example…</h1>
}

const CustomComponent = ({someProp}) => <h1>I'm rendering {someProp}></h1>

export default function App({someProp}) {
  return (
    <div className="App">
      <UsualExample />
      { /* but all you have to do is pass it as a prop and now you can declare your custom component outside */ }
      <CustomComponent someProp={someProp} />
    </div>
  );
}