最近因為在用React.js在寫一個個人網站而有了一些奇怪的感悟，
React.js其實不是一個程式，
而是一個體系，裡面包括了一個所謂「編譯器」、一套語法，
這種東西在業界通常會被「框架 Framework」。
然而，好玩的點來了，其實只要把React.js拆開來，
會發現其實React.js的本質就只是一個由node.exe編譯而成的一個程式叫vite.exe，
而什麼npm run dev、npm run build都只是在用npm.exe來執行vite.exe而已，
實際上你不用npm跑，用batch、用sh跑沒什麼差別。
而這個vite.exe在做的就是讀取vite.config.ts的文字檔，
再把內容拆解成指令去讀取其他被指定的資料夾，
然後再把指定的資料夾裡的檔案讀取成新的指令，
最後依照這些指令生成一個index.html和相關的javascript檔。
從這個角度來看，
其實在寫React.js的jsx檔時，並不是真的在寫程式，
因為寫程式的最終產物一般會被認為是用來直接操作電腦行為，
也就是程式，可以是C/C++的機械碼、可以是Python對Python Engine的指令集，
只不過最終的產物依舊是用來直接操作電腦行為。
但React.js更多像是在給vite.exe寫設定檔案，
告訴一個已經存在、已經被編譯完成的、用於生成文字檔的程式如何執行是一模一樣的，
而最後生成的也不是用於操作電腦，而是一些文字檔。
如果以抽象化的角度來看，
我寫一個程式讀取設定檔，
然後依據設定檔裡的人名列表輸出一堆Email的html，
其實就和React.js在做的事情沒什麼差別，
只是React.js的設定檔格式、語法和javascipt有點像而已，
其實如果有人用C/C++寫一個行為和vite.exe完全相同的程式，
基本上是可以完全平替現有的vite.exe，
當然沒這個必要就是了。
我認為這種理解方法應該會清楚Node.js、Javascript和React.js的關係，
以及React.js的運作模式，
否則如果完全以C/C++這種傳統程式語言的思考模式來理解的話，
會變得很容易失去方向，
例如我在C/C++裡用iostream讀了一個檔案，
那順理成章的它會被放置到記憶體裡，
然而在React.js裡，你寫了一行import xx.json，
實際上並不是放「進入記憶體」的行為，
而是告訴vite.exe「記得在build時也要把它也搬到dist裡」，
那很多一個程式的進行的順序就會變得無法理解。
Published by