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

Question

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

const foo = "bar";

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

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

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

Answer 1

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

1. 如果 LoremComponent.tsx 没有在任何地方导入，那么这个变量不会在内存中声明？ 如果不是从任何地方导入它就不会被执行。这与 React 无关，如果它不是从任何地方导入并且不是应用程序入口点，您的捆绑器（Webpack、Parcel、Rollup 等）可能会忽略它，并且代码将永远不会被执行。

2. 如果该组件被其他组件导入，那么变量 foo 的生命周期是多少？ 文件中的任何 JavaScript 代码都将正常执行，包括变量的声明foo。这种情况只会发生一次。foo将被隔离在其自己的范围内，除非导出，否则不能被其他文件访问。

3. 或者直到 React 应用程序运行？React 对于非 React 直接管理的变量（即 ）会发生什么情况没有发言权useState。无论“React 应用程序”是否“运行”，都不会影响整个 JavaScript 应用程序的其他方面。

与 Angular 和 Vue 不同，从技术上讲，不存在“React 组件文件”这样的东西，您可以拥有包含一个或多个 React 组件的 jsx/tsx 文件，但从技术上讲，它只是一个用 Babel 或 TypeScript 转译的普通 JavaScript 文件，该文件导出函数或类或运行时可以渲染您的应用程序react-dom。react-native