React

React是一個旨在簡化視覺界面開發的JavaScript函式庫。了解為什麼它如此受歡迎以及它解決了哪些問題。 React是一個JavaScript函式庫，旨在簡化視覺界面的開發。 React在Facebook開發並於2013年釋出，它驅動著一些最廣泛使用的應用程式，包括Facebook和Instagram等眾多應用程式。 它的主要目標是通過將UI切割成一系列的組件，使得在任何時間點上對界面及其狀態的推理變得容易。 React被用於構建單頁Web應用程式。 這個部落格上我寫了一系列關於React的資源和教程。 我將它們都收集在了React手冊中，這是一個方便的免費資源，你可以在這個頁面上下載。 現在就快來下載吧！

了解一下在學習React之前是否需要學習一些東西 如果您想學習React，首先需要掌握一些基礎知識。特別是一些在React中會反覆使用的最新JavaScript功能。 有時候人們認為某個特定功能是React提供的，但實際上它只是現代JavaScript語法。 起初不需要成為這些主題的專家，但您深入研究React時，就需要更加熟練地掌握這些知識。 我將列出一些事項，並提供我撰寫的文章的連結，以幫助您快速掌握基礎知識： JavaScript類 ES模組 非同步編程的基礎知識：回調函數，Promise，async/await 箭頭函數 this關鍵字 展開運算符 解構賦值 物件字面量 JavaScript函數式編程

許多人問我對於 React 和 Vue.js 的意見。以下是我的想法。 作為對 Vue 和 React 製作電子書和課程的經驗者，我也在許多小型專案中使用它們，因此我認為我可以回答這個問題，幫助你在這兩者之間作出選擇。 下面是我的印象。 兩者都很好且快速 在技術細節上沒有差別，它們都達到相同的目的，且都執行得很好。 Vue 更適合初學者 這是我的印象。 React 正試圖追趕 Vue.js 最大的賣點，即 Vue 的初學者友善性。反之，React 針對略有不同的受眾，這在其文件中得以體現。 相較於 Vue，React 需要相當程度的現代 JavaScript 知識。 JSX 比模板語言更難理解。另一方面，Vue 與 Angular 相似，這使得從 Angular 遷移更加簡單。 Vue 更像一個完整的套件，React 則有大量可供選擇的庫 在 Vue 中，擁有官方套件來滿足主要需求（如路由或狀態管理），而 React 則讓庫自由競爭最受歡迎解決方案的位置。這可能從不同的觀點來看是好或壞。 我認為擁有官方套件來滿足常見需求非常方便，尤其是這意味著所有事物都保持同步，而系統的整體變更也被整體思考。 React 擁有較大的使用者群和就業機會 React 的市場份額很大。我不會提及任何形式的調查或研究，因為在Google上輕鬆搜尋即可找到最新資訊。 Vue 也在不斷增長，但若你想專攻某項技術以獲得工作或自由工作機會，React 絕對是更大的池塘。當然，這個池塘中有更多開發人員，而較不熟悉的 Vue 可能也會有更多機會，因為開發人員相對較少。很難說。 Vue 是獨立的，React 受 Facebook 支援 有什麼不同呢？我有時在 React 的發行說明中（或其他地方）看到類似「在 Facebook，我們有 XXXXX 個 React 組件」或「在 Facebook，嘀嘀咕咕…」的語句。React 是 Facebook 工程師的副產品。它並非獨立產品，也永遠不會是。如果 Facebook 需要某種特定需求導致對 React 進行修改或變更，那會被引進。這也意味著有時會進行變更，而你應該跟上快速的發展，否則就「落伍了」。...

解決 JavaScript 疲勞的旅程 直到幾個月前，我一看到 JavaScript 就會感到焦慮不安。 我完全受困於所謂的 JavaScript 疲勞中，無法擺脫它。 這種情況持續了好幾年。 今天，我喜歡 JavaScript 及其生態系統。 這是怎麼發生的呢？ 我從九十年代就開始以某種形式使用 JavaScript，而現在我架上有一些書，看起來在今天顯得非常有趣，書中滿滿的 document.write 陳述。 大概是在 2012-2013 年間，關於 ES6 將會帶來的巨大變化的消息在各處都跳著。 起初，我無法掌握所有事情的進展。我無法一次接受這麼多變化。JavaScript 改變了，但我表示抗拒。學好它已經費了我很多時間，而它卻在我腳下改變。 我在一篇博文的評論中看到一個真實的 點子，它表示“如果你從一開始就一直在這裡的話（對，我就是那個老人），學習現代 JavaScript 會更加困難”： 我會認為，以前（對，我就是那麼老）在那裡是更加困難的 - Tim Tate 我在 2012 年正式開始深入研究 JavaScript 和 Node.js，之前從未經歷過像 ES6 這樣的語言變革。此前一個重大變化發生在 2009 年的 ES5。ES6 徹底改變了一切。它是 JavaScript 的一次巨大改進，每天你都會遇到很多可能出現在 ES6 規範中的新功能，但你真的不知道它們是否真的會包含進去，需要每天跟上進度，其他人在推特上都在談論這些也許會成為下一個大事的東西。 var 被抛棄了。 function 不再存在。 花了很長時間才學會的原型繼承，被類（class）的奧妙所覆蓋。 這只是冰山一角。整個 JavaScript 生態系統在過去幾年中發生了巨大變化。 建置一切事物 正在發生的一個重大轉變是"建置"。 我們從一個非常簡單的東西（使用 script 標籤引入 JavaScript）發展到需要構建步驟將我們的語言編譯到某個難以理解的巨大文件中。起初我強烈抵抗，我站在我的塔樓上，拿著大砲抵抗建置的部隊。 但當 Babel 軍力出現時，我起初更加抵抗，但最終我舉起了白旗，並加入了敵人。 我意識到 Babel 不僅僅是一個引入未來、邊緣功能的時髦庫，而是在未來可以使用作為 ES2017 的工具，同樣地適用於 ES2018、ES2019 等。無路可逃。擁抱未來，Babel 是你的朋友。...

當你想要建立一個新應用程式時，你有兩個選擇。 第一個選擇是使用你已經熟悉的技術來建立。如果你熟悉 React，那就繼續使用 React。 另一個選擇是選擇全新的技術堆疊。如果你熟悉 React，你可能會選擇使用 Svelte 或 Vue.js。如果你熟悉 Swift，你可能會選擇使用 React Native。 這是一個困難的問題，因為作為一個開發者，我認為我們應該平衡對某個技術的深入了解，成為該技術的專家，以及對各種技術都有一定的了解。 如果你所有的應用都使用 React，你就永遠不會知道 Vue.js 的優勢。相反的情況也是如此。 當 Twitter 或 Reddit 上出現關於 Vue vs React（或其他任何東西）的「在線戰爭」時，大多數時候，一方的支持者對另一方並不是非常了解，只是根據其他人的話來進行討論。 但在選擇技術堆疊之前，很少有時間能夠探索所有選項。 通常情況下，我可能會堅持使用我最熟悉的技術堆疊，目前恰好是 React 和 Next.js，除非我確定或認為其他技術是最佳選擇。三年後，我的默認選擇可能完全不同。我並沒有對工具產生依賴，我不是一個 React 開發者。我只是一個碰巧是軟體工程師的人，碰巧經常使用 React。 很久以前，我非常深入地研究了一個技術堆疊，然後一個新的項目出現了，其中使用 Node.js 或許是更好的選擇。我們作為一個團隊決定全力支持 Node.js，儘管我們遇到了很多未知的問題，但我認為這是一個不錯的選擇。 每次切換到新的技術堆疊時，你知道你正在放棄什麼，但你不知道你真正要面對什麼。 但這就是你建立專業知識的方式。下一個項目你就會知道這是否是一個好的選擇。只有時間能夠告訴你。

使用 Jest 和 react-testing-library 測試你的第一個 React 元件 開始測試 React 元件最簡單的方法是使用快照測試。快照測試是一種讓你在獨立環境中測試元件的技術。 如果你對軟體測試很熟悉，這就像你為類別進行單元測試一樣：你測試每個元件的功能。 我假設你已經使用 create-react-app 創建了一個 React 應用，這個應用已經預先安裝了我們需要的測試套件 Jest。 讓我們從一個簡單的測試開始。CodeSandbox 是一個很好的環境來嘗試這個。在 CodeSandbox 中創建一個 React sandbox，並在 components 文件夾中創建一個 App.js 元件，然後添加一個 App.test.js 文件。 import React from 'react' export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ) } 我們的第一個測試很簡單： test('First test', () => { expect(true).toBeTruthy() }) 當 CodeSandbox 檢測到測試文件時，它會自動執行這些測試，你可以點擊視圖底部的 “Tests” 按鈕來查看測試結果： 一個測試文件可以包含多個測試： 現在讓我們做一些更有用的事情，實際上測試一個 React 元件。我們現在只有一個沒有實際用途的 App 元件，所以讓我們先設置一個具有更多功能的小應用程式環境：我們之前構建的計數器應用程式。如果你跳過了這部分，你可以返回並閱讀我們是如何構建它的，但為了方便參考，我在這裡再次添加一遍。...

如何解決 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 '....

每個應用程式都需要管理狀態。在React中，我們可以使用hooks，尤其是useState()，並傳遞props來解決許多問題。 當事情變得比較複雜時，我喜歡立即轉向使用狀態管理庫。最近我最喜歡的之一是easy-peasy。 它基於Redux構建，並提供了一種更簡單的方式來與狀態交互。 我喜歡保持我的程式碼盡可能簡單。簡單易懂，簡單美觀。 應該盡量避免複雜性，並將其隱藏在向我們提供簡單接口的庫中。這就是這個庫的情況，也是我喜歡它的原因！ 使用以下命令進行安裝： npm install easy-peasy 首先，我們需要創建一個store（存儲庫）。存儲庫是存儲我們的狀態和修改狀態所需的函數的地方。 在專案的根目錄中的store.js文件中創建存儲庫，內容如下： store.js import { createStore, action } from 'easy-peasy' export default createStore({}) 我們稍後會在這個文件中添加更多東西。 現在，將React應用程序包裝到easy-peasy提供的StoreProvider組件中。這取決於您使用的工具。例如，在create-react-app中，將以下代碼添加到您的index.js文件中： //... import { StoreProvider } from 'easy-peasy' import store from '../store' ReactDOM.render( <React.StrictMode> <StoreProvider store={store}> <App /> </StoreProvider> </React.StrictMode>, document.getElementById('root') ) 這個操作使我們的存儲庫在應用程序的每個組件中都可用。 現在你可以在store.js文件中添加一些狀態和一些用於改變該狀態的操作。 讓我們進行一個簡單的例子。我們可以創建一個name狀態，並創建一個setName操作來改變名字： import { createStore, action } from 'easy-peasy' export default createStore({ name: '', setName: action((state, payload) => { state.name = payload }) }) 現在，您可以在應用程序的任何組件中從easy-peasy導入useStoreState和useStoreActions：...

我已經在這個博客上寫了很長一段時間了。在這段時間裡，我涵蓋了許多不同的主題。 回顧往事，我從一些隨機的 Web 開發主題開始，然後專注於 Go、React、Node.js、CSS、HTML、瀏覽器 APIs、Next.js、Vue.js、Svelte、數據庫、Python、Swift，甚至電子學和 C 語言。 有時候，當我有希望寫一些與我通常所寫的主題不同的內容時，我會考慮一下。 這是我的博客，它不是一本名為“Web 開發”或其他類似的出版物。 儘管如此，當你長時間寫關於一個主題時，即使是像我這樣涵蓋了廣泛範圍的主題，你也會開始覺得自己與讀者之間有一個“合約”。 如果我決定寫關於 X 的內容而讀者對此不感興趣，會發生什麼事呢？他們會停止閱讀或關注這個博客嗎？他們會取消訂閱郵件通訊嗎？ 除非你完全偏離了主題，否則幾乎從不會有這種情況。 你讀到了上面的主題列表嗎？它們之間幾乎沒有什麼相關性，除了它們都與編程有關。但是一位 React 開發者對於 C 語言或 CSS 沒有興趣。 因此，廣泛的專業領域是編程，在這個領域下我可以寫關於任何事情。 如果我開始寫關於園藝、狗、或者徒步旅行之類的內容，那就不一樣了。 有時候我會談論商業方面的事情，或者內容的製作，但這些都是相關的。 我考慮過在旅行時寫一些類似“旅遊博客”的帖子，只是為了做些不同的事情。也許有一天我會寫，儘管我不想讓讀者困惑。還有 Google 啊哈哈。 對我來說，規則是寫我想寫的內容。每天寫一篇帖子是關鍵。否則我早就停下來了。如果有一天我想寫關於旅行、烹飪或其他任何事情的內容，我就會去寫。 有時候我寫一篇關於如何為數字遊牧在整個歐洲旅行期間設置我的面包車的帖子，說實話，關於這些主題我獲得了更多的回覆。也許只是因為在他們那個時代這有些不尋常。 我將來要做的一件事是開始寫關於 SwiftUI 和 iOS 開發的內容。我已經考慮了好幾個月了。其實，我想已經有幾年了。 但現在我覺得是合適的時候了。 過去，我決定寫一些我不是非常熱衷的主題，比如數據庫。我對數據庫有多少熱情呢？我開始寫了幾天後就停下來了。 但我想，我可以寫一些我對於 iOS 應用的想法，計劃階段，開發過程，上架 App Store，等等的內容，這可能是我的一部分讀者非常感興趣的內容。 也許他們也有一個 iOS 應用的想法，這可能會是他們開始的觸發點。 我是否對 Web 開發厭倦了？絕對不是。而且任何 iOS 應用也需要與 Web 或 API 相應的對應組件，所以這不意味著我會停止寫關於它的內容。 而且我喜歡 JavaScript。 我只是喜歡編程。用代碼創造事物。不管是 Web 應用、iOS 應用還是桌面應用，都無關緊要。 對我來說，改變一下我寫關於什麼的方式只是為了多元化並保持我的能量水平高。 對我來說一直都是這樣。我會工作在一個 Web 應用上，然後轉到 iOS 應用，然後再轉到 macOS 開發，然後再回到 Web 應用。...

JSX是React引入的一個技術。讓我們深入了解一下。 JSX簡介 JSX入門 轉譯JSX JS in JSX 在JSX中使用HTML 您需要關閉所有標籤 駱駝命名法是新的標準 class變成className style屬性改變其語義 表單 React中的CSS 為什麼這比純CSS / SASS / LESS更受青睞？ 這是首選解決方案嗎？ JSX中的表單 value屬性和defaultValue屬性 更一致的onChange事件 JSX自動轉義 JSX中的空格 水平空格被修剪為1個 垂直空格被消除 在JSX中添加註釋 擴展屬性 如何在JSX中進行循環 JSX簡介 JSX是由React引入的一項技術。 儘管React在不使用JSX的情況下也可以正常工作，但它是與組件一起工作的理想技術，因此React從JSX中獲益良多。 起初，您可能會認為使用JSX就像混合HTML和JavaScript（以及CSS）。 但事實並非如此，因為使用JSX語法時，實際上是用JavaScript編寫一個組件UI的聲明語法。 您使用的不是字符串描述UI，而是使用JavaScript，這使您能夠做許多好事。 JSX入門 以下是如何定義包含字符串的h1標籤的示例： const element = <h1>Hello, world!</h1> 它看起來像JavaScript和HTML的奇怪混合，但實際上它是完全的JavaScript。 看起來像HTML，實際上是為了定義組件以及它們在標記中的定位而添加的語法糖。 在JSX表達式中，可以非常容易地插入屬性： const myId = 'test' const element = <h1 id={myId}>Hello, world!</h1> 只需注意，當屬性具有連字符（-）時，它會轉換為駝峰命名法。還有兩種特殊情況： class變成className for變成htmlFor 這是因為它們是JavaScript中的保留字。 以下是一個將兩個組件包裝到div標籤中的JSX片段的示例： <div> <BlogPostsList /> <Sidebar /> </div> 標籤始終需要關閉，因為這更像是XML而不是HTML（如果您還記得XHTML的日子，這將是熟悉的，但此後採用了HTML5鬆散語法）。在這種情況下，使用了自閉標籤。 請注意，我將2個組件包裝到div中。為什麼？因為**render()函數只能返回單個節點**，所以如果您要返回2個兄弟節點，只需添加一個父節點。它可以是任何標籤，不僅僅是div。 轉譯JSX 瀏覽器無法執行包含JSX代碼的JavaScript文件。它們必須首先轉換為常規JS。...