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

Question

I'd like to create a functional React component that will not require the usage of any hooks/props. In this scenario is there a benefit of doing the following:

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

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

Instead of doing the following:

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

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

Answer 1

The first example is not really a component. It's more of a shortcut for a static html structure you want to reuse. Therefore, it has no state or props any react component has. If the Component you want to use does not have any state or props, It won't change anything considering the sole view, but if ever you want to add props or state to that component, having it as a variable will require you to fully turn the variable into a real component. Considering the small amount of time you win by using a variable and the potentially huge amount of time you might loose someday, I'd recommend not to use Variables like above. (And to answer your question about benefits, there are no benefits to doing that)