網(wǎng)站的建設(shè)與管理自考,做互聯(lián)網(wǎng)網(wǎng)站待遇,北京公關(guān)公司,信息流優(yōu)化師證書React 入門#xff1a;從 JSX 到組件化#xff0c;搞定核心知識點 #x1f680; 一、 什么是 React 為什么選擇 React#xff1f;#x1f3af; 如果你問前端圈的程序猿 “現(xiàn)在最火的 UI 庫是什么”#xff0c;十有八九會聽到 “React” 這個名字。簡單來說#xf…React 入門從 JSX 到組件化搞定核心知識點 一、 什么是 React 為什么選擇 React如果你問前端圈的程序猿 “現(xiàn)在最火的 UI 庫是什么”十有八九會聽到 “React” 這個名字。簡單來說React 是 Facebook現(xiàn)在的 Meta推出的一個用于構(gòu)建用戶界面的 JavaScript 庫它就像一個超級高效的 “UI 建筑師”讓我們能輕松搭建出交互豐富、性能能打的網(wǎng)頁。為什么要學(xué) React 呢“react 一開始就是組件思想非常的純粹”。和傳統(tǒng)前端開發(fā)相比React 有三個 “撒手锏”響應(yīng)式數(shù)據(jù)變了 UI 自動更、數(shù)據(jù)綁定數(shù)據(jù)和 UI 手拉手、組件化把頁面拆成一塊塊可復(fù)用的 “積木”。雖然有人說它入門門檻比 Vue 高一點但一旦上手你會發(fā)現(xiàn)這種 “激進(jìn)” 的設(shè)計思路特別適合復(fù)雜應(yīng)用開發(fā)畢竟誰不想寫一次代碼到處復(fù)用呢二、JSX 語法在 JS 里寫 HTML這操作有點秀?2.1 什么是 JSX第一次看到 JSX 代碼的同學(xué)可能會懵“這到底是 JS 還是 HTML” 其實官方解釋很直白 ——JSX 就是 “XML in JS”在 JavaScript 里寫 XML而我們熟悉的 HTML本質(zhì)上就是一種特殊的 XML?？纯聪旅娴睦觠sx// JSX寫法 const element h2JSX 是 React 中用于描述用戶界面的語法擴(kuò)展/h2 // 等效的原生JS寫法JSX的編譯結(jié)果 const element2 createElement(h2, null,JSX 是 React 中用于描述用戶界面的語法擴(kuò)展);這兩行代碼效果完全一樣但顯然 JSX 版本更像 “人話”。所以說JSX 本質(zhì)是createElement函數(shù)的語法糖它的存在就是為了讓我們寫 UI 時少掉點頭發(fā)畢竟誰愿意對著一堆嵌套的函數(shù)調(diào)用流淚呢2.2 JSX 的基本語法雖然 JSX 看起來像 HTML但它有幾個 “小怪癖” 需要注意必須有根元素包裹就像快遞必須有包裝盒JSX 返回的內(nèi)容也得有個 “根容器”。比如下面用div當(dāng)容器也可以用 React 提供的Fragment文檔碎片當(dāng) “隱形容器”避免多一層不必要的 DOM 節(jié)點。jsx// 正確有根元素包裹 return ( div h1title/h1 pcontent/p /div ) // 錯誤沒有根元素 return ( h1title/h1 pcontent/p )class 要寫成 className如果你在 JSX 里寫div classboxReact 會給你拋錯 —— 因為class是 JavaScript 的關(guān)鍵字所以得改用className。比如jsx// 正確寫法 span classNametitleHello/span // 錯誤寫法會報錯 span classtitleHello/span表達(dá)式要用大括號包起來想在 JSX 里插入變量或表達(dá)式用{}就行比如jsxconst name React; const isLoggedIn true; // 插入變量 return h1Hello {name}!/h1; // 插入條件表達(dá)式 return {isLoggedIn ? div已登錄/div : div未登錄/div};三、組件化前端開發(fā)的 “樂高積木”3.1 什么是組件組件就像網(wǎng)頁的 “功能模塊”—— 把 HTML、CSS、JS 打包成一個獨立單元完成特定功能。比如下面的JuejinHeader是頭部組件Ariticles是文章列表組件它們就像樂高積木拼在一起就成了完整頁面。jsx// 頭部組件 function JuejinHeader() { return( div header h1JueJin首頁/h1 /header /div ) } // 文章列表組件 const Ariticles () { return( div Articles /div ) }3.2 為什么 React 選函數(shù)當(dāng)組件React 里的組件大多是函數(shù)這可不是隨便選的。函數(shù)適合做組件因為能將 JSX 邏輯封裝成一個組件。想想看函數(shù)接收參數(shù)、處理邏輯、返回結(jié)果組件接收數(shù)據(jù)、處理交互、返回 UI簡直是天造地設(shè)比如最簡化的組件長這樣jsx// 一個簡單的簽到組件 const Checkin () { return( divCheckin/div ) }一行不多一行不少邏輯和 UI 完美融合3.3 根組件與子組件組合形成組件樹整個 React 應(yīng)用就像一棵大樹有一個 “根組件”其他組件都是它的 “子組件”。以掘金首頁為例展示根組件、子組件以及組件樹的知識內(nèi)容。下面代碼的JuejinHeader、Ariticles都是APP的子組件jsxfunction JuejinHeader() { return( // jsx 最外層 div header h1JueJin首頁/h1 /header /div ) } const Ariticles () { return( div Articles /div ) } const Checkin () { return( div Checkin /div ) } const TopArticles () { return( div TopArticles /div ) } // 根組件 function APP() { // 子組件們 return( div {/* h1Hello bReact!/b/h1 */} {/* 頭部組件 */} JuejinHeader / main {/* 組件也和html 一樣聲明自定義組件 */} {/* 組件化讓我們像搭積木一樣組合成頁面 */} Ariticles / aside Checkin / TopArticles / /aside /main /div ) } export default APP組件樹以一個根組件為起點就像樹干其他組件作為 “子組件”樹枝和樹葉嵌套在其中形成明確的層級關(guān)系。整個 React 應(yīng)用的 UI 結(jié)構(gòu)本質(zhì)上就是一棵組件樹的可視化呈現(xiàn)。上面這段代碼形成的組件樹結(jié)構(gòu)如下APP根 ├─ JuejinHeader └─ main ├─ Ariticles └─ aside ├─ Checkin └─ TopArticles四、狀態(tài)讓組件 “動” 起來的魔法4.1 什么是 state 狀態(tài)如果說組件是 “身體”那狀態(tài)state就是 “靈魂”—— 它是組件內(nèi)部的 “數(shù)據(jù)倉庫”決定了組件的樣子和行為。比如用戶是否登錄、待辦事項列表、當(dāng)前顯示的名字這些都是狀態(tài)。4.2 useState狀態(tài)管理的 “金鑰匙”React 提供了useState這個鉤子函數(shù)來管理狀態(tài)它的用法就像 “拆盲盒”jsx// 引入useState import { useState } from react; // 聲明狀態(tài)初始值為vuesetName用于更新狀態(tài) const [name, setName] useState(vue);這幾行代碼做了三件事聲明了一個叫name的狀態(tài)初始值是 “vue”得到一個更新狀態(tài)的函數(shù)setName當(dāng)setName被調(diào)用時組件會重新渲染UI 自動更新比如 3 秒后更新狀態(tài)頁面會自動變化jsx// 3秒后將name從vue改為react setTimeout(() { setName(react); }, 3000);效果展示4.3 多種狀態(tài)管理一個組件可以有多個狀態(tài)就像一個人可以有 “姓名”“年齡”“職業(yè)” 多個屬性。比如同時管理三個狀態(tài)jsx// 框架名稱狀態(tài) const [name, setName] useState(vue); // 待辦事項列表狀態(tài) const [todos, setTodos] useState([ { id: 1, title: 學(xué)習(xí)react, done: false }, { id: 2, title: 學(xué)習(xí)node, done: false } ]); // 登錄狀態(tài) const [isLoggedIn, setIsLonggedIn] useState(false);每個狀態(tài)獨立管理互不干擾代碼邏輯清晰得很五、渲染讓數(shù)據(jù) “長” 成 UI 的藝術(shù)?5.1 條件渲染根據(jù)狀態(tài) “變魔術(shù)”React 里的條件渲染就像 “if-else” 的可視化版本jSX中不能直接使用“if-else”語法因為 JSX 大括號{}內(nèi)只能放表達(dá)式而if else是語句通常使用三目運算符代替。比如判斷待辦事項是否為空jsx// 有數(shù)據(jù)時顯示列表無數(shù)據(jù)時顯示提示 todos.length 0 ? ( ul {/* 列表內(nèi)容 */} /ul ) : ( div暫無待辦事項/div )登錄狀態(tài)的顯示也是同理jsx// 根據(jù)登錄狀態(tài)顯示不同內(nèi)容 {isLoggedIn ? div已登錄/div : div未登錄/div}5.2 列表渲染用 map () 批量 “生產(chǎn)” UI當(dāng)需要渲染列表比如待辦事項、商品列表時map()方法就是神器。比如渲染 todos 列表jsxul { todos.map((todo) ( // 每個列表項必須有唯一key li key{todo.id} {todo.title} /li )) } /ul這里有個小細(xì)節(jié)每個列表項必須加key屬性通常用唯一 ID這是 React 的 “性能暗號”幫助它快速識別哪些項沒變避免重復(fù)渲染 —— 不加 key 雖然能運行但可能會有性能問題哦六、 事件處理給組件 “裝開關(guān)”React 里的事件處理就像給組件裝開關(guān)點擊、輸入等操作都會觸發(fā)對應(yīng)的函數(shù)。語法上有個小特點事件名要用駝峰命名比如onClick而不是onclick。比如登錄按鈕的點擊事件jsx// 切換登錄狀態(tài)的函數(shù) const toggleLogin () { setIsLonggedIn(!isLoggedIn); }; // 按鈕綁定點擊事件 button onClick{toggleLogin} {isLoggedIn ? 退出登錄 : 登錄} /button點擊按鈕時toggleLogin函數(shù)會切換isLoggedIn狀態(tài)按鈕文字和登錄狀態(tài)顯示會自動更新 —— 這就是 “數(shù)據(jù)驅(qū)動 UI” 的魅力我們只需要管數(shù)據(jù)怎么變UI 自然會跟上。七、實戰(zhàn)演練-簡單的學(xué)習(xí)任務(wù)清單登陸界面7.1 代碼展示// JSX 負(fù)責(zé)UI // use 使用 // state 數(shù)據(jù)狀態(tài) import {useState} from react; import ./App.css; function App() { // const name vue; // useState 會返回一個數(shù)組 // 數(shù)組的第一個元素是狀態(tài)值第二個元素是更新狀態(tài)值的函數(shù) const [name,setName] useState(vue); const [todos, setTodos] useState([{ id: 1, title: 學(xué)習(xí)react, done: false, }, { id: 2, title: 學(xué)習(xí)node, done: false, }]); const [isLoggedIn,setIsLonggedIn] useState(false); setTimeout(() { setName(react); },3000); // 組件的數(shù)據(jù)業(yè)務(wù)、交互等 // JSX js里面class 是js 關(guān)鍵字 不能用用className const toggleLogin () { setIsLonggedIn(!isLoggedIn); } return( // 文檔碎片標(biāo)簽 div h1Hello span classNametitle{name}!/span/h1 { todos.length 0 ? ( ul { todos.map((todo) ( li key{todo.id} {todo.title} /li )) } /ul ) : (div暫無待辦事項/div) } {isLoggedIn ? div已登錄/div:div未登錄/div} button onClick {toggleLogin} {isLoggedIn?退出登錄:登錄} /button /div ) } export default App7.2 項目介紹這個項目是一個基于 React 的簡單示例主要展示了 React 的核心特性具體如下技術(shù)基礎(chǔ)使用 React 框架開發(fā)采用 JSX 語法描述 UI 界面通過import引入 React 的useState狀態(tài)管理API。核心功能動態(tài)文本展示通過name狀態(tài)控制標(biāo)題文本初始顯示 “Hello vue!”3 秒后自動更新為 “Hello react!”。待辦事項列表基于todos狀態(tài)渲染待辦事項列表若列表為空則顯示 “暫無待辦事項”。登錄狀態(tài)切換通過isLoggedIn狀態(tài)管理登錄狀態(tài)點擊按鈕可切換 “登錄 / 退出登錄” 狀態(tài)并同步顯示對應(yīng)的狀態(tài)文本。React 特性體現(xiàn)狀態(tài)管理使用useState鉤子管理組件內(nèi)部狀態(tài)name、todos、isLoggedIn通過狀態(tài)更新函數(shù)如setName、setIsLonggedIn觸發(fā) UI 重新渲染。條件渲染通過三元表達(dá)式根據(jù)狀態(tài)如todos.length、isLoggedIn動態(tài)展示不同 UI 內(nèi)容。JSX 語法在 JavaScript 中直接編寫類似 HTML 的標(biāo)簽同時支持嵌入變量如{name}和表達(dá)式。整體是一個用于演示 React 狀態(tài)與 UI 聯(lián)動、組件化開發(fā)思想的基礎(chǔ)示例。7.3 效果亮個相八、總結(jié)React 核心知識清單 結(jié)語8.1 知識清單React 是專注于 UI 的庫核心是組件化和響應(yīng)式JSX 是 “JS 里寫 XML” 的語法糖簡化 UI 開發(fā)組件是函數(shù)封裝 UI 和邏輯可組合成組件樹用useState管理狀態(tài)狀態(tài)變則 UI 變條件渲染用三目運算符列表渲染用map()key事件處理用駝峰命名綁定函數(shù)操作狀態(tài)8.2 結(jié)語學(xué) React 就像學(xué)搭積木 —— 一開始可能覺得 “這零件怎么拼”但掌握了 JSX、組件、狀態(tài)這些 “基礎(chǔ)塊” 后你會發(fā)現(xiàn)再復(fù)雜的頁面也能一步步搭出來。React 更加激進(jìn)但這種激進(jìn)恰恰讓它成為前端開發(fā)的 “瑞士軍刀”—— 無論是小應(yīng)用還是大型項目都能應(yīng)對自如。現(xiàn)在你已經(jīng)掌握了 React 的核心概念接下來就動手寫寫代碼吧畢竟實踐才是最好的老師