将组件重构为组件体内的函数与将其拆分为不同的组件之间有性能差异吗？

Question

假设我有一个带有很长返回语句的组件。

const LongReturnComponent = () => {
  //lots of state
  return (
    .
    .
    .
    .
    .
    .
    .
    .
  )
}

然后，出于可读性的目的，我将其重构为该组件体内更小的函数

const RefactoredComponent = () => {
   //lots of state
   const function1 = () => {
     .
     .
   }
   const function2 = () => {
     .
     .
   }
   return (
   <>
     {function1()}
     {function2()}
     .
     .
   </>
   )
}

如果我将 function1 和 function2 提取到单独的 React 组件中，是否会有性能提升，或者更确切地说，这是标准做法？ React 是否区分编写在组件主体内的组件和单独的组件？我的直觉是肯定的，但这是否是一个重大改进？

阻碍我这样做的是，我必须将大约 20 个状态变量传递给子组件，并且还要对 props 进行注释，这样很快就会变得混乱

Answer 1

如果我将 function1 和 function2 提取到单独的 React 组件中，是否会有性能提升

它有潜力提高性能，但不会自动实现。通过将其拆分为单独的组件，您也许可以跳过渲染一些未更改的组件。

例如，您可以将子组件之一包装在 React.memo 中。这样，即使父级需要重新渲染，子级也可以跳过渲染，从而提高性能。

或者，如果您当前的组合组件正在从上下文访问某些值，并且您可以使其只有子组件需要该值，那么当该值发生变化时，父组件可能能够跳过渲染。

或者更确切地说，这是标准做法吗？

拆分组件是很常见的事情，但何时进行拆分取决于实现的细节。有时您可以像我提到的那样获得性能改进，有时却不能，因为无论如何一切都必须渲染。

即使无法提高性能，您也应该考虑拆分组件以使代码更易于理解。拥有单独的组件可以明确哪些代码与哪些代码相关，并且可以帮助心理分块。

React 是否区分编写在组件主体内的组件和单独的组件？

我想区分的一件事是：不要在另一个组件的主体内部定义组件，这一点非常重要。您当前的示例没有这样做；它正在创建函数，但它从不像组件一样使用这些函数。

换句话说，即使不常见，以下操作也能正常工作：

const RefactoredComponent = () => {
   const function1 = () => {
     .
     .
   }
   return (
   <>
     {function1()}

但这将是一个问题：

const RefactoredComponent = () => {
   const Function1 = () => {
     .
     .
   }

   return (
   <>
     <Function1/>

如果您执行后者，则 React 必须在每次渲染时卸载/重新安装 Function1。这会对性能造成很小的影响，但更重要的是，它将重置每个渲染的焦点和状态。您必须将组件移到外面。

const Function1 = () => {
  .
  .
}

const RefactoredComponent = () => {
  return (
  <>
    <Function1/>