javascript - react : jsx in a variable vs a function vs a separate component

Question

为了在更大的组件中渲染更小的组件/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，没有生命周期，因此它们不会作为 React 组件安装/卸载

在方法 2 中，我们会急切地评估 JSX，因为它直接是一个变量，而在方法 1 中，它只会在函数在 render 中被调用时才被评估。所以，万一我们有任何条件渲染，急切的评估可能只是浪费。

其他一些有用的文章:

https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f

https://kentcdodds.com/blog/dont-call-a-react-function-component

更新 :似乎观察 1 是不正确的，因为它们中的所有 3 个仍将呈现为 react 组件，因此将具有组件生命周期。所以 react 会挂载/卸载它们。
更新 2 :不，观察 1 是正确的，方法 1 和 2 都被视为常规 jsx 作为 BigComponent 的一部分，它们不被视为具有生命周期的 react 组件。
更新 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 在通过开发工具调试时在执行上略有不同。

Answer 1

方法二:

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

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

如果您想将大型 UI 分成单独的较小 UI，此方法将为您提供最佳性能，因为

它仍然只是一个很大的 UI 组件。

react 只需要解决变量引用。

重新渲染时，BigComponent、smallComponent1 和 smallComponent2 被一起渲染为一个单元。

smallComponent1 和 smallComponent2 不能有自己的状态、生命周期和钩子(Hook)。

smallComponent1 和 2 需要为 重新初始化 每次 Bigcomponent 状态发生变化。所以最好用 useMemo() 包裹它们。如果这些 smallComponents 的结果来自昂贵的计算。

方法三:

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

React 需要解析引用以及解析引用后执行函数。

它是将 react 的实际子组件组合成一个大组件。

子组件可以有自己的hooks .

子组件是 未重新初始化 但如果 BigComponent 状态发生更改，则会重新渲染。

如果小型组件根据父项中的 Prop 更改更新自己的状态，则 SmallComponent1 和 SmallComponent2 有可能在 BigComponents 渲染一次时重新渲染多次。

如果每个 SmallComponents 都应该使用 BigComponents 状态的多个 Prop ，那么将 SmallComponents 保留在 BigComponent 之外确实可以提供良好的开发人员体验。

我希望方法1和方法4也可以通过以上几点来理解。

注意:如果您的应用程序逻辑使用 ref 或 DOM 元素来维护焦点或渲染 anchor ，则作为函数存储在变量和子组件中的子组件会变得更加棘手。