javascript - 你能在不同的渲染和上下文中重用 React 元素吗？

Question

我有一个这样的组件:

const Foo = () => (
  <div>
    <h1>Hello world!</h1>
  </div>
)

请注意，它不需要任何 Prop ；它在每次渲染时返回相同的 JSX
这可以用作常量而不是函数吗？

const Foo = (
  <div>
    <h1>Hello world!</h1>
  </div>
)

或者 React 在重复使用完全相同的内容时会遇到问题 React.createElement()在整个应用程序的不同 DOM 上下文中重新渲染和 - 更有可能 - 结果？

const OtherComponent = ({ ... }) => (
  <div>
    {Foo}
    {...}
  </div>
)

const OtherOtherComponent = ({ ... }) => (
  <span>
    {Foo}
  </span>
)

编辑:我想到，在子组件中调用的任何钩子(Hook)都可能会被这个搞砸，所以这可能是一个坏主意。
编辑 2:忽略第一个“编辑”；我对其进行了测试，并惊讶地发现隐藏在 const react-node 下的钩子(Hook)实际上确实被多次调用。我倾向于认为这确实是安全的，但仍然希望得到更熟悉 React 内部结构的人的确认。

Answer 1

这只是javascript。在第一种情况下，您创建一个对象，如果您一次又一次地使用它，它的引用不会改变。
在另一种情况下，它是一个函数，每次调用它时，都会返回一个新的实例/对象。
同样的示范，

const Comp1 = <div>Comp 1</div>;

const Comp2 = () => {
  console.log('rendering comp 2' + Math.random());
  return  <div>Comp 2</div>;
};

export default function App() {
  const obj1 = Comp1;
  const obj2 = Comp1;
  const obj3 = Comp1;

  console.log(Object.is(obj1, Comp1));
  console.log(Object.is(obj1, obj2));

  console.log(Object.is(obj2, Comp1));
  console.log(Object.is(obj2, obj3));

  return (
    <div>
      {obj1}
      {obj2}
      {obj3}
      <Comp2/>
      <Comp2/>
      <Comp2/>
    </div>
  );
}