Javascript 这个函数结构会减慢应用程序的速度吗？

我在网上读了一些代码，我看到了一个特殊的函数组件结构，你也可以在那里使用react钩子。代码示例：

export default function Payment() {

  const doPayment = async () => {
     ...//logic
     return value;
  }

  const doPayment2 = async () => {
    ...//logic
    return value;
  }

  return {
    doPayment,
    doPayment2
  }
}

您可以通过以下方式导入它：

import payment from '../../helpers/payment';

export default function Screen() {
  
  const { doPayment, doPayment2 } = payment();
  
  ...
}

---

想象一个有1000行的文件，我想知道这是否会减慢应用程序的速度，因为它会在每次react渲染时重新创建。

假设屏幕是react组件

想象一个有1000行的文件，我想知道这是否会减慢应用程序的速度，因为它会在每次渲染时重新创建

可以，但实际上，不太可能。在大多数给定的代码段中，性能是完全没有问题的——相反，如果低性能确实是一个问题，那么更好的方法是运行一个实际的分析测试，以查看什么占用了最多的CPU时间，从而允许您识别导致减速的少数瓶颈，然后修复这些瓶颈。你在这里看到的这一部分可能不是其中之一，但也不是不可能

如果这部分代码导致了问题，您可以通过记忆返回值来修复它：

const { doPayment, doPayment2 } = useMemo(payment, []);

如果情况允许，您甚至可以将其完全从组件中取出：

import payment from '../../helpers/payment';

const { doPayment, doPayment2 } = payment();
export default function Screen() {
  ...
}

---

或者将其作为静态道具传递。

是什么让你认为它是一个反应组件？包含“helpers”的路径名向我暗示这正是它的含义，helper函数我没有说它是一个react组件，只是一个组件。也许这不是正确的术语，但当您在

payment（）

上实例化它时，我认为我们可以将其称为组件。我们也可以在它里面使用react钩子。它并没有重新创建导入，但仍然使用is子函数加载完整的函数。如果你想优化它，搜索“树摇动”，因为OP提到了钩子：我只想提一下，这些优化不再允许在

支付

中使用钩子。因为每个渲染都必须调用钩子；所有这些都是相同的顺序。