在 React 的组件文件中声明的变量的生命周期是多少？

Question

考虑下面 LoremComponent.tsx 中声明的 React 代码：

const foo = "bar";

export default (props) => {
  return (
    <h1>{foo}</h1>
  )
}

变量 foo 的生命周期是多少 -

如果 LoremComponent.tsx 没有在任何地方导入，那么这个变量不会在内存中声明？
如果该组件被其他组件导入，那么变量 foo 的生命周期是多长？
或者直到 React 应用程序运行？

Answer 1

我认为从根本上说，您将 React 误认为是一个为您管理代码的框架，实际上，React 只是一个库，仅提供辅助函数来将内容呈现给 DOM（或其他）。 React 在变量和内存管理的生命周期中没有发言权，这完全由 JavaScript 引擎处理，例如 V8 或 SpiderMonkey。

如果 LoremComponent.tsx 没有在任何地方导入，那么这个变量不会在内存中声明？ 如果它不是从任何地方导入的，它就不会被执行。这与 React 无关，如果它不是从任何地方导入的并且它不是应用程序入口点，您的捆绑器（webpack、parcel、rollup 等）可能会忽略它并且代码将永远不会被执行。
如果组件被其他组件导入，那么变量foo的生命周期是多长？ 文件中的任何 JavaScript 代码都将正常执行，包括变量 foo 的声明。这只会发生一次。 foo 将被隔离到它自己的范围内，除非导出，否则不能被其他文件访问。
或者直到 React 应用程序是运行？ React 对不由 React 直接管理的变量（即 useState). “React 应用程序”是否为“运行”不会影响整个 JavaScript 应用程序的其他方面。

与 Angular 和 Vue 不同，技术上没有“React 组件文件”这样的东西，您可以有 jsx/tsx 个文件包含一个或多个 React组件，但从技术上讲，它只是一个用 Babel 或 TypeScript 转译的普通 JavaScript 文件，该文件导出函数或 React 库可以使用的类。

在 React 的组件文件中声明的变量的生命周期是多少？

What is the lifetime of the variables declared inside component file in React?

javascript

ecmascript-6

reactjs