考慮下面 LoremComponent.tsx 中宣告的 React 代碼：
const foo = "bar";
export default (props) => {
return (
<h1>{foo}</h1>
)
}
變數 foo 的生命周期是多少 -
- 如果 LoremComponent.tsx 沒有在任何地方匯入，那么這個變數不會在記憶體中宣告嗎？
- 如果組件是在其他組件中匯入的，那么變數 foo 的生命周期是多少？
- 或者直到 React 應用程式運行？
uj5u.com熱心網友回復：
我認為從根本上講，您將 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 組件檔案”之類的東西，您可以擁有包含一個或多個 React 組件的 jsx/tsx 檔案，但從技術上講，它只是用 Babel 或 TypeScript 轉譯的普通 JavaScript 檔案，檔案匯出函式或類然后 React 庫可以使用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466125.html