SWC 是一個越來越被提到的工具。 它可以將任何 JavaScript 或 TypeScript 代碼轉換為同樣適用於較舊的瀏覽器和現代瀏覽器的 JavaScript。 簡而言之，它是新的 Babel。 但更快。 據說速度快了 20 倍以上。 作為一個「普通開發者」，你不會直接使用它。 但它被其他工具使用。 近來我們可以看到對速度的持續關注。主要是因為工具改用了更優化的系統語言，例如 Rust，而不是像 JavaScript 這樣不太優化的語言，後者在其他用例中更為優化。 在 2022 年 12 月發布的 Vite 4 現在支援 SWC 而不是 Babel。這反過來又使其更快。 SWC 也被 Turbopack 使用，後者是由 Vercel 提供的 JavaScript/TypeScript 打包器/構建系統，並作為 Vite 和 Webpack 的替代方案。
當我需要創建React應用程式並需要後端時，我會首選使用 Next.js 框架。 Next.js 提供了許多內建功能，它非常受歡迎，遵循的約定也避免了我在分析和決策方面的困惑。 但有時我只想創建一個單純的 React 應用程式，也許是為了進行演示或開始一個專案，而不需要 Next.js 提供的所有內容。 我不想擔心這些，我只想自由地進行 React 實驗。 我過去使用過 create-react-app，但現在我使用 Vite。 Vite 是一個現代化的工具，提供了開發伺服器，速度非常快，許多 JavaScript 社群的人認為它是最佳選擇。 此外，它並不是一個特定於 React 的工具，因此你學到的任何東西都可以應用到其他支援的框架，例如Svelte、Vue等。 要使用 Vite 創建一個項目，首先進入你存放所有專案的文件夾，例如我個人的案例中是在用戶的主文件夾中的 dev 文件夾下。 然後運行 npm create [[email protected]](/cdn-cgi/l/email-protection)。 為項目選擇一個名稱，該名稱也將是項目的文件夾名稱。在這個案例中，我選擇 “test”： 現在可以選擇一個框架，選擇 “React”。 然後選擇 JavaScript 或 TypeScript，依照個人喜好選擇。你也可以選擇使用 SWC。 完成！ 現在進入新建立的專案資料夾： cd test 運行以下指令安裝相依套件： npm install 然後運行以下指令開始應用程式： npm run dev 應用程式應該會在 http://localhost:5173 運行（如果該埠口已被使用，則可能會不同）。 現在你已經準備好在此應用程式上工作了！ 以下是在 VS Code 中打開的應用程式資料夾。 你可以看到，Vite 已經創建了一個基本的應用程式，現在你可以打開 src/App.jsx 開始在其中進行開發工作。 這樣的工具之美在於，現在你可以新增文件，Vite 會自動識別它們，而無需像我們以前需要在 Node.js 專案中那樣重啟 npm run dev。...
如何解決 useEffect 運行兩次的問題 React 18 於 2022 年 3 月發佈，改變了 useEffect() 的默認行為。 起初，我甚至沒有意識到這一點，這個改變被埋在了大量的新功能之中。 如果您的應用程式在升級到 React 18 後運作怪異，那是因為 useEffect 的默認行為變成運行兩次。 這只在開發模式下發生，但這是每個人構建應用程式的模式。 而且只在嚴格模式下發生，但這是使用 Vite、create-react-app 或 Next.js 構建的應用程式的默認模式。 造成這種情況有其原因。 這並不是您的程式碼有問題，而是 React 現在的運作方式。 唯一的解決辦法是禁用嚴格模式。 嚴格模式很重要，因此這只是一個臨時解決辦法，直到您修正了這個改變引入的任何問題。 在 Vite 中，請前往 src/main.jsx，從以下程式碼中刪除 <React.StrictMode> 包裝元件： import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode>, ) 改為： import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import '....