一、先搞懂核心定義(用生活化比喻) 可以把瀏覽器想象成一棟房子: BOM (Browser Object Model):瀏覽器對(duì)象模型 相當(dāng)于房子的整體結(jié)構(gòu)(比如大門、墻壁...
一、先搞懂核心定義(用生活化比喻) 可以把瀏覽器想象成一棟房子: BOM (Browser Object Model):瀏覽器對(duì)象模型 相當(dāng)于房子的整體結(jié)構(gòu)(比如大門、墻壁...
虛擬 DOM介紹 虛擬 DOM(Virtual DOM)是 React 中的核心概念之一。為了理解它,首先需要知道直接操作真實(shí)的 DOM 是代價(jià)高昂的,因?yàn)檫@可能引起瀏覽器的...
基于Vite創(chuàng)建開發(fā)環(huán)境 Vite是一個(gè)框架無關(guān)的前端工具鏈,可以快速的生成一個(gè) React + TS 的開發(fā)環(huán)境,并且可以提供快速的開發(fā)體驗(yàn) 說明: npm create ...
useReducer 作用:和useState的作用類似,用來管理相對(duì)復(fù)雜的狀態(tài)數(shù)據(jù) 基礎(chǔ)用法 定義一個(gè)reducer函數(shù)(根據(jù)不同的action返回不同的新狀態(tài)) 在組件中...
什么是前端路由 一個(gè)路徑 path 對(duì)應(yīng)一個(gè)組件 component ,當(dāng)我們?cè)跒g覽器中訪問一個(gè) path 的時(shí)候,path 對(duì)應(yīng)的組件會(huì)在頁面中進(jìn)行渲染 實(shí)際開發(fā)中的rou...
自定義Hook函數(shù) 概念:自定義Hook是以 use 打頭的函數(shù),通過自定義Hook函數(shù)可以用來實(shí)現(xiàn)邏輯的封裝和復(fù)用 簡(jiǎn)單demo 封裝一個(gè)useChannel自定義hook...
useEffect 的概念理解 useEffect是一個(gè)React Hook函數(shù),用于在React組件中創(chuàng)建不是由事件引起而是由渲染本身引起的操作(副作用),比如發(fā)送AJAX...
理解組件通信 概念:組件通信就是組件之間的數(shù)據(jù)傳遞,根據(jù)組件嵌套關(guān)系的不同,有不同的通信方法 父?jìng)髯?實(shí)現(xiàn)步驟 父組件傳遞數(shù)據(jù) - 在子組件標(biāo)簽上綁定屬性 子組件接收數(shù)據(jù) -...
React中獲取DOM 在 React 組件中獲取/操作 DOM,需要使用 useRef React Hook鉤子函數(shù),分為兩步: 使用useRef創(chuàng)建 ref 對(duì)象,并與 ...
核心概念與使用方式 定義異步組件 defineAsyncComponent函數(shù)(Vue3推薦方式)定義一個(gè)異步組件,它在運(yùn)行時(shí)是懶加載的。參數(shù)可以是一個(gè)異步加載函數(shù),或是對(duì)加...
受控表單綁定 概念:使用React組件的狀態(tài)(useState)控制表單的狀態(tài) 準(zhǔn)備一個(gè)React狀態(tài)值 通過value屬性綁定狀態(tài),通過onChange屬性綁定狀態(tài)同步的s...
組件基礎(chǔ)樣式方案 React組件基礎(chǔ)的樣式控制有兩種方式 行內(nèi)樣式(不推薦) class類名控制 注意:React中綁定類名的屬性是className而不是class。 cl...
useState基礎(chǔ)使用 useState 是一個(gè) React Hook(函數(shù)),它允許我們向組件添加一個(gè)狀態(tài)變量, 從而控制影響組件的渲染結(jié)果 本質(zhì):和普通JS變量不同的是...
組件是什么 概念:一個(gè)組件就是用戶界面的一部分,它可以有自己的邏輯和外觀,組件之間可以互相嵌套,也可以復(fù)用多次 組件化開發(fā)可以讓開發(fā)者像搭積木一樣構(gòu)建一個(gè)完整的龐大的應(yīng)用 R...
React 基礎(chǔ)事件綁定 語法:on + 事件名稱 = { 事件處理程序 },整體上遵循駝峰命名法 使用事件對(duì)象參數(shù) 語法:在事件回調(diào)函數(shù)中設(shè)置形參e 傳遞自定義參數(shù) 語法:...
什么是JSX 概念:JSX是JavaScript和XML(HTML)的縮寫,表示在JS代碼中編寫HTML模版結(jié)構(gòu),它是React中編寫UI模版的方式 優(yōu)勢(shì): HTML的聲明式...
安裝 Redux Toolkit 和 React-Redux 添加 Redux Toolkit 和 React-Redux 依賴包到你的項(xiàng)目中: 創(chuàng)建 Redux Store...
CORS(跨域資源共享)核心配置項(xiàng) CORS 是瀏覽器為解決跨域請(qǐng)求限制制定的規(guī)范,核心通過服務(wù)端響應(yīng)頭控制跨域權(quán)限,前端需配合特定配置(如攜帶 Cookie 時(shí))。以下是服...
密碼加鹽哈希 (Salted Hashing),這是前端加密的首選方案。原理:哈希 (Hash):對(duì)密碼執(zhí)行一個(gè)單向的哈希函數(shù)(如 SHA-256, SHA-512)。這個(gè)過...