Javascript React：变量中的jsx、函数中的jsx、独立组件中的jsx

要在较大的组件中呈现较小的组件/jsx，可以采用多种方法。例如，考虑这一点：

方法1：

function BigComponent(props) {
  const renderSmallComponent1 = () => <div>{props.a}</div>;
  const renderSmallComponent2 = () => <div>{props.b}</div>;

  return (
    <div>
      {renderSmallComponent1()}
      {renderSmallComponent2()}
    </div>
  )
}

---

这与方法3类似，但在通过开发工具进行调试时，方法3与方法4在执行上略有不同。

您看过React项目中编译的JS了吗

JSX标记本质上转换为

React.createElement

语句。你可以。基本上，语法是：

React.createElement（FunctionOrClassComponent，{props}，…子项）

在你的三个例子中，这都会发生。在所有三个示例中，较小的组件都是功能组件，而不是类组件。也就是说，它们没有类组件的React生命周期方法，但是它们可以使用等效的React钩子——如果您愿意的话

编辑：计算（实例化和渲染）取决于渲染逻辑。如果您有条件呈现语句，或者您的函数基于某些条件返回null（或更少的内容），那么显然您做的工作更少。正如您在下面的注释中正确指出的，当您将JSX.Element分配给变量时，该变量是内联计算的，而不是作为函数的结果计算的，因此这会立即发生

对我来说，这三种方法都是有效的。要回答您的问题：

• 开发经验，
  • 对于具有最小状态的小组件，作为变量或lambda的功能组件便于编写，并且在以后重新访问代码时易于读取/解析。当一个组件变得更复杂时，您可能需要重新考虑它的编写方式，或者使用类组件
• 框架如何对待它们，
  • 据我所知，该框架在编译方面对您的三个示例都一视同仁。我不确定渲染优化
• 是否有任何性能优化，
  • 您的示例没有描述任何计算繁重的内容，因此性能优化选项并不明显
• 在所有这些方面，运行时行为是否存在差异？
  • 它们都被转换为React元素，监视道具的更改，如果父级重新渲染（如果没有使用React.memo之类的东西），则会重新渲染它们——与基于类的元素可能存在差异，但我想这三个示例之间的运行时差异是最小的
• 在某些场景中使用哪一个更好？
  • 这三者之间的差异更多的是标准或礼仪问题，而不是功能结果。作为一名开发人员，我将能够阅读和理解这三种方法，但在团队中工作——我希望看到一种标准方法

---

您似乎非常了解这些案例。我不确定你想更深入地挖掘哪一个方面？问题是：有没有这样一种情况，其中一种方法的工作方式与其他方法不同，或者根本不起作用？他们总是可以互相替换吗？嗯，这对我来说仍然是一个悬而未决的问题。我真的不知道从哪里开始，因为我可以构造各种各样的例子来说明不同的行为。@hackape我认为不同种类的例子仍然会有帮助，并可能回答问题的主要部分，这基本上是关于这3种方法的差异，而不是仔细检查特殊的用例，我认为更好的方法是学习react的内部工作。一旦你学会了“物理”，你就知道如何做所有的“工程”。关于急切的评估：方法1只会在渲染/返回中调用函数时进行评估，但方法2甚至会在这之前进行评估，因为它是一个变量关于使用挂钩：在方法1和方法2中，我认为即使我们能够使用挂钩，它们将属于父级，而不是这些小组件。抱歉，现在已经很晚了-我把您所说的评估与渴望加载（相对于延迟加载）混淆了。您是正确的，方法2将内联计算，因为这些不是函数，而是JSX元素声明（作为变量）。对于方法1和3，如果在小组件中使用钩子，并且声明钩子输出并将其分配给块作用域变量（使用let或const），则它们将属于小组件。。。如果您使用var，它们只会提升到父组件。对不起，在那里也犯了一个错误。。。我的意思是，如果您在那里声明它们，它们将只属于父组件。

function BigComponent(props) {
  const smallComponent1 = <div>{props.a}</div>;
  const smallComponent2 = <div>{props.b}</div>;

  return (
    <div>
      {smallComponent1}
      {smallComponent2}
    </div>
  )
}

function SmallComponent1({ a }) {
  return <div>{a}</div>;
}

function SmallComponent2({ b }) {
  return <div>{b}</div>;
}

function BigComponent(props) {
  return (
    <div>
      <SmallComponent1 a={props.a} />
      <SmallComponent2 b={props.b} />
    </div>
  )
}

function BigComponent(props) {
  const SmallComponent1 = () => {
  return <div>{props.a}</div>;
  }
  const SmallComponent2 = () => {
  return <div>{props.b}</div>;
  }

  return (
    <div>
      <SmallComponent1 />
      <SmallComponent2 />
    </div>
  )
}