你是否曾經感到困惑,不知道該選擇React、Angular還是Vue.js?別擔心,這系列將為你深入解說這三個最受歡迎的前端框架以及jQueryJS庫,從學習曲線、性能、社區支持、適用場景等多個方面進行詳細解說,以幫助你做出明智的選擇。React基本概念解析React是由Meta(Facebook)所開發的流行JavaScript庫,旨在幫助開發者快速地建立動態、交互式的Web應用程式。其主要特點包括組件化、虛擬DOM(VirtualDOM)、JSX/TSX語法、高效的數據流以及強大的社區支持,下面分別展開說明:組件化(Componentization):React允許開發者創建獨立、可重用的組件,這些組件可以被組合在一起,構建出複雜的用戶界面(UI)。每個組件都有自己的狀態和屬性,讓UI的管理和更新變得直觀且容易掌控。VirtualDOM(虛擬DOM):傳統的DOM操作可能會很耗時,尤其是當DOM變得非常大時。React通過引入VirtualDOM來優化這個過程。當組件的狀態改變時,React首先在VirtualDOM上做更改,然後比較新舊VirtualDOM的差異,並只將必要的更改應用到真實的DOM上,大大提高了性能。JSX/TSX語法:React採用了JSX/TSX語法,允許開發者在JavaScript或TypeScript代碼中編寫類似HTML的標記。使得組件的結構變得清晰、易讀,並允許開發者以更直觀、聲明式的方式來定義組件的UI。單向數據流(OneWayDataFlow):React遵循單向數據流的原則,所有數據的流動都是單向的,從父組件流向子組件。這樣的設計使得組件的狀態管理變得更加可預測且容易理解,有助於提高應用程式的可維護性和可測試性。強大的社區和生態系統:React擁有活躍且多元化的社區,提供大量的開源庫、工具和資源。無論是對於新手還是經驗豐富的開發人員,React的強大社區和豐富生態系統都能提供很大的支援。Hooks與函式組件的崛起:React的版本16.8引入了Hooks,這是一種讓函式組件具有狀態和生命週期功能的新特性。Hooks的出現使得函式組件更加強大,可以完成許多之前只能通過類組件實現的功能,並且使得組件的寫法更加簡潔、易讀。狀態管理與外部交互:React本身並不包括狀態管理的解決方案,但社區中有許多流行的狀態管理庫,例如Redux和MobX。Redux是一個預測性的狀態容器,它不僅可以用於React,還可以用於其他JavaScript框架。通過合理的狀態管理,可以更好地組織和處理應用中的數據流。在與外部API的交互上,可以使用各種HTTP客戶端庫,例如Axios或者FetchAPI。React也有相應的Hooks(例如useEffect)來處理副作用,例如數據的獲取和處理。建立你的第一個網路應用安裝Node.js和npm:你需要安裝Node.js和npm(NodePackageManager)以便能夠運行和管理React應用程式的依賴。你可以從Node.js官方網站]https://nodejs.org/zhtw下載並安裝它。安裝CreateReactApp:CreateReactApp可以幫助你快速地創建和運行新的React應用程式。你可以通過運行以下命令來全局安裝CreateReactApp:Bashnpminstallgcreatereactapp安裝完成後,你可以使用createreactapp命令來創建一個新的React應用程式。創建你的第一個React應用程式:使用CreateReactApp創建一個新的React應用程式是非常直接的。你只需要在終端中運行以下命令:Bashnpxcreatereactappmyapp這將創建一個名為myapp的新目錄,其中包含了一個新的React應用程式的所有文件和依賴。運行你的React應用程式:一旦你的應用程式已經被創建,你可以通過運行npmstart命令來啟動它。這將在你的瀏覽器中打開一個新的窗口,顯示你的React應用程式。開始編寫你的第一個React應用程式:通過修改src/App.js文件,你可以開始編寫你自己的React代碼。以下是一個簡單的React應用程式示例,該程式包含三個基本組件:Header,Sidebar和Content。每個組件都在其自己的文件中定義,並且由一個主App組件組合在一起。Header.js:JavascriptimportReactfrom"react";functionHeader{returnheaderh1MyReactApp/h1/header;};exportdefaultHeader;Sidebar.js:JavascriptimportReactfrom"react";functionSidebar{returnasidenavulliahref"home"Home/a/liliahref"services"Services/a/liliahref"contact"Contact/a/li/ul/nav/aside;};exportdefaultSidebar;Content.js:JavascriptimportReactfrom"react";functionContent{returnmainpWelcometoourwebsite!/p/main;};exportdefaultContent;App.js:JavascriptimportReactfrom"react";importHeaderfrom"./Header";importSidebarfrom"./Sidebar";importContentfrom"./Content";functionApp{returndivHeader/Sidebar/Content//div;};exportdefaultApp;瞭解組件與狀態管理組件創建:函式組件與類組件:你可以選擇使用函式組件或類組件。函式組件通常更簡單,而類組件提供更多的功能。然而,隨著Hooks的引入,函式組件現在也能使用許多先前僅限於類組件的功能。函式組件:JavascriptimportReactfrom"react";functionFunctionComponent{returndiv函式組件/div;};exportdefaultFunctionComponent;類組件:Javascript//ClassComponent.jsimportReact,{Component}from"react";classClassComponentextendsComponent{render{returndiv類組件/div;};};exportdefaultClassComponent;函式組件優化:你可以透過React.memo進行函式組件的優化,以避免不必要的渲染,這是與類組件的PureComponent功能相似的。JavascriptconstMemoComponentReact.memoFunctionComponent;組件組織:每個組件通常有自己的文件,包括JavaScript(或TSX)文件和CSS文件。許多開發者也可能選擇使用SCSS或LESS等CSS預處理器來組織他們的樣式文件。目錄結構:依據你的應用程式的規模和複雜程度,你可能會想要將組件分組並按照功能或區域來組織它們。例如,你可能會有一個目錄用於通用組件,另一個目錄用於特定功能或頁面的組件。你的應用目錄可能會是這樣的結構:plaintextsrc/|assets///images,fontsetc.|components/||Common/|||Header.js|||Footer.js||FeatureA/|||FeatureAComponent.js||FeatureB/|||FeatureBComponent.js|utils///utilityfunctions|App.js組件樹:你的組件會形成一個層次結構,其中某些組件會包含其他組件。理解這個層次結構並合理地組織你的組件樹是維護清晰、可維護的代碼基礎非常重要的。下面是一個簡單的範例,展示了如何在App.js中引用其他組件:javascriptimportReactfrom"react";importHeaderfrom"./components/Common/Header";importFooterfrom"./components/Common/Footer";importFeatureAComponentfrom"./components/FeatureA/FeatureAComponent";importFeatureBComponentfrom"./components/FeatureB/FeatureBComponent";functionApp{returndivHeader/FeatureAComponent/FeatureBComponent/Footer//div;};exportdefaultApp;屬性和狀態:Props(屬性):你可以通過屬性(props)將數據傳遞給組件。props是只讀的,並應視為組件的配置。它通常是從父組件傳遞到子組件的,並且不應該在子組件內被修改。HelloComponent.jsjavascriptimportReactfrom"react";functionHelloComponentprops{returndivHello,{props.name}!/div;};exportdefaultHelloComponent;App.jsjavascriptimportReactfrom"react";importHelloComponentfrom"./HelloComponent";functionApp{returnHelloComponentname"邱敬幃"/;};exportdefaultApp;State(狀態):如果你的組件需要維護內部狀態,你可以使用React的state功能。在函式組件中,你可以使用useState,而在類組件中,你會使用this.state和this.setState來讀取和更新狀態。函式組件:ReactHooks:ReactHooks是自React16.8版本以來新增的功能,它允許你在不使用class的情況下使用state以及其他的功能。下面是一些常用的Hooks:useState:useState是一個讓你在函式組件中添加state的Hook。javascriptimportReact,{useState}from"react";functionExample{constcount,setVal]useState0;returndivbuttononClick{setValcount+1}點擊/button/div;};useEffect:useEffect讓你在函式組件中執行sideeffect。javascriptimportReact,{useState,useEffect}from"react";functionExample{constcount,setVal]useState0;useEffect{document.title已點擊${count}次;};returndivbuttononClick{setValcount+1}點擊/button/div;};useContext:接受一個contextobject(React.createContext的返回值)並返回該context的當前值,如下例所示:javascriptimportReact,{useContext}from"react";constThemeContextReact.createContext"light";functionExample{constthemeuseContextThemeContext;returndivtheme{theme}/;};類組件:javascriptimportReact,{Component}from"react";classCountComponentextendsComponent{constructorprops{superprops;this.state{count:0};};increment{this.setState{count:this.state.count+1};};render{returndivbuttononClick{this.increment}增加/buttonpCount:{this.state.count}/p/div;};};exportdefaultCountComponent;useReducerHook:useReducer是React提供的另一個用於狀態管理的Hook。適用於當狀態邏輯複雜或涉及多個子值時,並且允許你以更結構化的方式組織你的狀態邏輯。JavascriptimportReact,{useReducer}from"react";constinitialState{count:0};functionreducerstate,action{switchaction.type{case"increment":return{count:state.count+1};case"decrement":return{count:state.count1};default:thrownewError;};};functionCounter{conststate,dispatch]useReducerreducer,initialState;returnCount:{state.count}buttononClick{dispatch{type:"decrement"}}減少/buttonbuttononClick{dispatch{type:"increment"}}增加/button/;};exportdefaultCounter;事件處理:在React中處理事件與處理HTML事件非常相似,但有一些語法和命名慣例的差異。以下是一些重要的的差異:React事件名稱使用駝峰命名法(camelCase),而不是全部小寫。不能使用returnfalse來阻止默認行為。必須明確地呼叫preventDefault。你需要將事件處理函式傳遞給組件的特定元素,而不是直接在HTML標籤中添加它。事件處理範例:以下是一個React事件處理的範例,展示了如何在函式組件中定義和使用事件處理函式:javascriptimportReactfrom"react";functionEventHandling{functionClick{alert"已點擊";};returnbuttononClick{Click}點擊/button;};exportdefaultEventHandling;範例中我們在EventHandling組件內部定義了一個名為Click的函式。這個函式將在按鈕被點擊時被調用,並彈出一個警告框。然後,我們將Click函式傳遞給button元素的onClick屬性。這是React事件處理的典型模式,讓你可以在組件的元素上指定自定義的事件處理行為。此外,也可以使用類組件來處理事件。在類組件中,通常會看到事件處理函式作為組件實例的方法,並使用匿名函式或者在一般函式中綁定this。例如:javascriptimportReact,{Component}from"react";classEventHandlingClassextendsComponent{Click{alert"已點擊";};render{returnbuttononClick{this.Click}點擊/button;};};exportdefaultEventHandlingClass;在這個範例中,Click方法是使用匿名函式定義的,這樣它可以在onClick事件觸發時保留正確的this上下文。然後,我們將this.Click傳遞給button元素的onClick屬性,以便在按鈕被點擊時調用Click方法。傳遞參數給事件處理函式:在一些情況下,你可能想要在事件處理函式中訪問其他值。你可以通過匿名函式將參數傳遞給事件處理函式:JavascriptimportReactfrom"react";functioncustomList{items}{functionClickindex{alertindex;};returnul{items.mapitem,indexlikey{index}onClick{Clickindex}{item}/li}/ul;};exportdefaultcustomList;範例中,我們通過創建匿名函式將index參數傳遞給Click函式來實現。表單事件處理:在React中,可以使用onChange和onSubmit事件來處理表單的輸入和提交。以下是一個基本的表單事件處理範例:JavascriptimportReact,{useState}from"react";functioncustomForm{constvalue,setValue]useState"";functionChangeevent{setValueevent.target.value;};functionSubmitevent{alertvalue;event.preventDefault;};returnformonSubmit{Submit}label名字:inputtype"text"value{value}onChange{Change}//labelbuttontype"submit"送出/button/form;};exportdefaultcustomForm;範例中,我們定義了Change和Submit函式來處理表單的onChange和onSubmit事件。當用戶輸入時,Change會更新value狀態。當用戶提交表單時,Submit會透過event.preventDefault;阻止表單的默認提交行為,並彈出一個警告框顯示用戶輸入的名字。與外部API交互:在React應用程式中,你可能會需要與外部API交互以獲取或發送數據。你可以使用JavaScript的fetchAPI、axios或其他HTTP客戶端庫來實現。以下是使用fetchAPI的例子:javascriptimportReact,{useState,useEffect}from"react";functionFetchData{constdata,setData]useStatenull;useEffect{fetch"https://pardn.io/test".thenresponseresponse.json.thendatasetDatadata;},];returndiv{data?div{JSON.stringifydata}/div:"讀取中"}/div;};樣式(CSS):在React中,有多種方法可以樣式化你的組件。以下是幾種常見的樣式化方法:標準CSS:通過創建CSS文件並在你的組件中導入它來應用樣式。這是一種簡單且直接的方法,但在大型項目中可能不易於維護。css.button{backgroundcolor:steelblue;color:fff;padding:0.5rem1rem;border:none;borderradius:0.25rem;};javascriptimport"./styles.css";functionCustomButton{returnbuttonclassName"button"點擊/button;};exportdefaultCustomButton;CSSModules:CSSModules通過局部範疇(localscoping)解決命名衝突的問題。每個模塊的類名都是局部的,而不是全局的,這意味著類名不會在全局範疇中衝突。透過創建一個.module.css文件,然後在你的JavaScript文件中使用特定的語法導入它,並使用導入的對象來訪問類名。css.button{backgroundcolor:steelblue;color:fff;padding:0.5rem1rem;border:none;borderradius:0.25rem;};javascriptimportstylefrom"./style.module.css";functionCustomButton{returnbuttonclassName{styles.button}點擊/button;};exportdefaultCustomButton;通過導入的style對象訪問的,這個對象的鍵是CSS文件中的類名,而值是在構建過程中自動生成的唯一類別名。CSSinJS:CSSinJS是將CSS嵌入到JavaScript文件中。例如,styledcomponents是一個流行的CSSinJS庫。javascriptimportReactfrom"react";importstyledfrom"styledcomponents";constButtonstyled.buttonbackgroundcolor:steelblue;color:fff;padding:0.5rem1rem;border:none;borderradius:0.25rem;;functionCustomButton{returnButton點擊/Button;};exportdefaultCustomButton;InlineStyles:你也可以使用InlineStyles在React組件中應用樣式。這是一種快速的方法,但不適合大型應用或需要很多自定義樣式的情況。javascriptfunctionCustomButton{constStyle{backgroundColor:"steelblue",color:"fff",padding:"0.5rem1rem",border:"none",borderRadius:"0.25rem"};returnbuttonstyle{Style}點擊/button;};exportdefaultCustomButton;各種方法都有其優點和缺點。標準CSS和CSSModules適合於希望將樣式和JavaScript保持分開的項目。而CSSinJS和行內樣式允許更動態的樣式,並能夠在JavaScript中訪問樣式值,這對於某些項目可能是必需的。查看React的官方文檔和教程:React的官方文檔]https://zhhans.react.dev是一個非常棒的學習資源,它包括了導覽、教程和詳細的API參考。通過閱讀文檔和完成官方教程,你可以快速地瞭解React的基本概念和使用方法。系列文章React開發入門:打造動態前端的框架ahref"https://pardn.io/blog/frontendframeworkangular"target"self"網頁前端新手必讀!Angular入門指南詳解/aahref"https://pardn.io/blog/frontendframeworkvuejs"target"self"Vue.js入門指南:打造獨特且易於維護的前端界面/a三個框架與jQuery的比較,堅持不使用框架又會如何?:10/20相關連結作者:PardnChiu]https://github.com/pardnchiu輕量化框架:PDExtensionjs]https://github.com/pardnchiu/PDExtensionjsReact的官方文檔:https://zhhans.react.dev]https://zhhans.react.devNode.js官方網站:https://nodejs.org/zhtw]https://nodejs.org/zhtw