React：变量中的jsx与函数与单独的组件

为了在更大的组件中渲染更小的组件/jsx，有多种方法可以遵循。例如，考虑这个：

方法一：

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

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

方法二：

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>
  )
}

我只是想了解这三个方面的区别

• 开发经验，
• 框架如何对待他们，
• 有没有性能优化，
• 所有这些中的运行时行为是否存在差异？
• 在某些情况下使用哪个更好？

这些是我理解的事情：

• 方法3中SmallComponent都是React组件，在另一个组件中渲染，所以会有组件生命周期，而方法1和方法2是简单的jsx，没有生命周期，所以不会挂载/卸载反应组件
• 在方法 2 中，我们会急切地评估 JSX，因为它直接是一个变量，而在方法 1 中，它只会在渲染中调用函数时评估。所以，万一我们有任何条件渲染，急切的评估可能只是浪费。

其他一些有用的文章：

• https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f
• https://kentcdodds.com/blog/dont-call-a-react-function-component

更新：似乎观察 1 是不正确的，因为它们中的所有 3 仍将呈现为反应组件，因此将具有组件生命周期。所以反应会挂载/卸载它们。

更新 2：不，观察 1 是正确的，方法 1 和 2 都被视为常规 jsx 作为 BigComponent 的一部分，它们不被视为具有生命周期的反应组件。

更新3：还有另一种方法方法4：

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

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

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