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

Question

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

const foo = "bar";

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

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

Answer 1

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

如果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-dom

或

react-native

渲染器可用来渲染您的应用程序的函数或类。