在一个组件内声明其他组件可以吗？

Question

想象一下，我的反应应用程序中有一个卡片列表。所以我将有两个组件，<ListCard />和<Card />。我的疑问是，在我工作的地方，当我们有这样的事情时，我们通常会在接收 JSX 的<ListCard />name中声明一个变量Card，但我不知道这是否是一件好事。最近我遇到了这种方法的一些问题，但我没有发现有人说要不要这样做。

想象一下我没有<Card />在应用程序中的任何地方使用

我们声明ListCard 的方式

const ListCard = () => {
  const cards = [
    { title: '1', id: 1 },
    { title: '2', id: 2 },
  ];

  const Card = ({ title }) => <div>{title}</div>;

  return (
    <div>
      <h1>List of Cards</h1>
      {cards.map(card => (
        <Card title={card.title} key={card.id} />
      ))}
    </div>
  );
};

我想知道是否最好在 ListCard 之外声明，就像这样。

const Card = ({ title }) => <div>{title}</div>;

const ListCard = () => {
  const cards = [
    { title: '1', id: 1 },
    { title: '2', id: 2 },
  ];

  return (
    <div>
      <h1>List of Cards</h1>
      {cards.map(card => (
        <Card title={card.title} key={card.id} />
      ))}
    </div>
  );
};

Answer 1

在同一个文件中声明另一个函数是完全可以的Component，但是在另一个函数中声明它会效率低下。Component想象一下您的应用程序在每个 期间“重新创建”第二个render。

因此，请随意在同一个文件中声明它，但不要在另一个Component函数中进行声明。

Answer 2

在功能组件中，每个变量都会在每次渲染时被销毁并重新创建。这就是挂钩如此有价值的原因useState，因为它足够智能，可以使用以前的或更新的值重新创建变量。

通过在另一个组件内声明一个组件，您不仅重新渲染两个组件，而且完全重新声明一个组件。这不会提高性能，特别是如果组件更复杂的话。

因此，您问题的答案始终是单独声明。它可以在内部声明，但没有任何好处，只有缺点。