在变量中使用 JSX VS 在 React 中使用函数返回 JSX

【问题标题】：Using JSX in a variable VS using a function to return the JSX in React在变量中使用 JSX VS 在 React 中使用函数返回 JSX
【发布时间】：2021-09-06 06:00:16
【问题描述】：

我想创建一个不需要使用任何钩子/道具的功能性 React 组件。在这种情况下，执行以下操作有好处：

const Test = (
  <p>
    Hello World
  </p>
);

const MainComponent = () => {
  return (
    <div>
      {Test}
    </div>
  );
};

而不是执行以下操作：

const Test = () => {
  return (
    <p>
      Hello World
    </p>
  );
};

const MainComponent = () => {
  return (
    <div>
      <Test />
    </div>
  );
};

【问题讨论】：

标签： javascript reactjs components react-functional-component

【解决方案1】：

第一个示例并不是真正的组件。它更像是您想要重用的静态 html 结构的快捷方式。因此，它没有任何 React 组件具有的状态或道具。如果您要使用的组件没有任何状态或道具，考虑到唯一的视图，它不会改变任何东西，但是如果您想向该组件添加道具或状态，将其作为变量将需要您完全把变量变成一个真正的分量。考虑到您通过使用变量赢得的少量时间以及您可能在某天失去的大量时间，我建议不要使用上述变量。（并且要回答您有关福利的问题，这样做没有任何好处）

【讨论】：