Reactjs 在react中存储片段vs使用组件

在React中，在变量中存储片段和通过组件生成片段之间是否存在有意义的区别

例如：

export default function App() {

  const greetingFragment = <div>Hello world!</div>;

  const GreetingComponent = () => <div>Hello world!</div>;

  return (
    <div className="App">
      {greetingFragment}
      <GreetingComponent />
    </div>
  );
}

导出默认函数App（）{
const greetingFragment=你好，世界！；
const GreetingComponent=（）=>你好，世界！；
返回(
{greetingFragment}
);
}

如果片段中有逻辑，会有什么不同吗？如果片段越来越大，那么使用组件的最佳方式（或预期方式或“反应方式”）是什么呢

---

还是仅仅是“品味”和可读性的问题。

✅ 在模块级变量中存储静态片段可以：

const greetingFragment = <div>Hello world!</div>;

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

---

您也可以（从技术上讲，除非您知道自己在做什么，否则我不推荐）将函数组件作为函数调用（如果它不使用钩子，或者如果您对钩子的规则非常小心）。这将被渲染为一个组件

const GreetingComponent = () => <div>Hello world!</div>;

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

constgreetingcomponent=（）=>helloworld！；
导出默认函数App（）{
返回(
{GreetingComponent（）}
);
}

✅ 在模块级变量中存储静态片段可以：

const greetingFragment = <div>Hello world!</div>;

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

---

您也可以（从技术上讲，除非您知道自己在做什么，否则我不推荐）将函数组件作为函数调用（如果它不使用钩子，或者如果您对钩子的规则非常小心）。这将被渲染为一个组件

const GreetingComponent = () => <div>Hello world!</div>;

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

constgreetingcomponent=（）=>helloworld！；
导出默认函数App（）{
返回(
{GreetingComponent（）}
);
}

像您这样嵌套组件不是一个好主意，因为嵌套组件的标识在每次渲染时都会更改，从而导致不必要的重新装载和重新渲染。像您这样嵌套组件不是一个好主意，因为嵌套组件的标识在每次渲染时都会更改，从而导致不必要的重新装载和重新渲染。回答得好！我一直在寻找这样的解释，但我甚至不知道如何用谷歌搜索：我得到嵌套组件在父组件每次重新渲染时都会重新渲染。。。但是碎片呢？片段不会重新呈现，代码不会与父级的每次重新呈现一起运行？（你能告诉我我是一个noobie吗？：D）当然React必须检查你从组件返回的标记，看看它是否需要与真正的DOM协调，但它是一个更轻的重新渲染（与嵌套组件情况相反，嵌套组件情况总是导致嵌套组件卸载和重新装载，因为它基本上不是同一个组件）。明白了！谢谢！回答得很好！我一直在寻找这样的解释，但甚至不知道如何用谷歌搜索：我得到嵌套组件在每次父组件重新渲染时都会重新渲染…但是片段呢？片段不会重新渲染，代码不会与父组件的每次重新渲染一起运行？（你能告诉我是noobie吗？：D）当然，React必须查看您从组件返回的标记，以查看它是否需要与真正的DOM协调，但它是一种更轻的重新渲染（与嵌套组件的情况相反，嵌套组件的情况总是导致嵌套组件卸载和重新装载，因为它基本上不是同一个组件）。明白了！谢谢！

const GreetingComponent = () => <div>Hello world!</div>;

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