在Reaction中，我可以在另一个功能组件的主体内定义一个功能组件吗？

我开始看到我的一些团队编写以下代码，这让我质疑我们是否以正确的方式做事，因为我以前从未见过它这样写。

import * as React from "react";
import "./styles.css";

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

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

它看起来呈现得很好，我看不到任何直接的不利影响，但是我们为什么不应该从另一个组件中定义CustomComponent功能组件有什么根本原因吗？

CodeSandbox示例： https://codesandbox.io/s/dreamy-mestorf-6lvtd?file=/src/App.tsx:0-342

---

解决方案

这不是个好主意。每次App重新呈现时，都会为CustomComponent创建一个全新的定义。它具有相同的功能，但是因为它是一个不同的引用，所以Reaction将需要卸载旧的引用并重新挂载新的引用。因此，您将强制Reaction在每次呈现时执行额外的工作，并且还将重置CustomComponent内的任何状态。

相反，组件应该自己声明，而不是在呈现中声明，以便它们只创建一次，然后重用。如有必要，您可以让组件接受道具以自定义其行为：

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

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

有时，您可能会在单个组件内执行一些重复的操作，并希望通过使用帮助器函数来简化代码。这没问题，但是您需要将其作为函数调用，而不是将其呈现为组件。

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

使用此方法，Reaction将比较<h1>和<h1>，因此不需要重新装入它。