構建和優(yōu)化一個合理的路由架構是前端攻城獅必須掌握的技能。在本章中，課程會以react-router-dom V5為例，學會如何使用組件化的思想搭建一個簡單、高效、可拓展的路由系統(tǒng)。想直接學習react-router-dom V6的同學可以跳過本章。
本章講解了如何將 TypeScript 與 React 結合，便攜更健壯的前端工程代碼。課程里對常見的 TypeScript 類型進行了簡單介紹講解，重點介紹了在 React 中遇到類型問題應該如何解決，即便對 TypeScript 沒有任何了解，通過本章的學習，同學也可以基本完成 React 和 TypeScript 的集成開發(fā)。
Hooks 是 React 的重要內容，React 使用各種 Hooks 來處理邏輯、更新數據。本章學習基礎 Hooks 如 useState useEffect ，高級 Hooks 如 useMemo useCallback useRef ，還有自定義 Hooks 和第三方 Hooks 。即學即用，使用 Hooks 重構之前的問卷列表頁。
- 5-1 Hooks閉包陷阱-React?？济嬖囶}
- 5-2 -useState讓頁面“動”起來
- 5-3 -state 一個組件的“獨家記憶”
- 5-4 -state特點-異步更新，合并后更新
- 5-5 state特點-不可變數據-非常重要的概念
- 5-6 實戰(zhàn)-重構列表頁-用useState實現增、刪、改
- 5-7 使用immer修改state-幫你擺脫“不可變數據”的痛苦
- 5-8 實戰(zhàn)-重構列表頁-使用immer讓開發(fā)更簡單
- 5-9 useEffect監(jiān)聽組件生命周期-創(chuàng)建、更新、銷毀
- 5-10 useEffect在開發(fā)環(huán)境下執(zhí)行兩次-模擬全流程，及早暴露bug
- 5-11 用useRef操作DOM元素-React的ref和Vue3的ref不一樣
- 5-12 使用useMemo緩存數據-React中常見的性能優(yōu)化手段
- 5-13 使用useCallback緩存函數
- 5-14 自定義Hooks-React Hooks的正確打開方式
- 5-15 使用自定義Hook獲取鼠標位置-組件公共邏輯抽離和復用
- 5-16 使用自定義Hook異步加載數據-模擬異步場景
- 5-17 使用第三方Hooks-ahooks和react-use
- 5-18 Hooks的三條使用規(guī)則
- 5-19 Hooks閉包陷阱-React?？济嬖囶}
- 5-20 章總結
本章從0講解JSX和Hook語法，詳細講解每一個知識點，學完即可掌握事件交互、循環(huán)、React緩存和React調試能力，能夠動手開發(fā)一個動態(tài)的頁面
- 3-1 【資料梳理】React 調試
- 3-2 React JSX語法講解（變量、條件、樣式、循環(huán)、屬性傳遞）
- 3-3 ReactHook基本介紹
- 3-4 useState語法講解（字符串、數字、數組、對象動態(tài)更新）
- 3-5 useState到底是同步更新還是異步更新
- 3-6 useEffect語法講解（模擬生命周期以及自定義Hook）
- 3-7 memo、useMemo和useCallback案例講解
- 3-8 useContext和useReducer案例演示
- 3-9 useRef基礎語法講解
- 3-10 useTransition 過渡使用
- 3-11 前端常用調試技巧
- 3-12 重難點梳理
- 3-13 【資料梳理】Hook開發(fā)規(guī)則
- 3-14 【資料梳理】React入門到進階
- 3-15 【資料梳理】useContext 和 useReducer
- 3-16 【資料梳理】useEffect語法講解
- 3-17 【資料梳理】useMemo_useCallback
- 3-18 【資料梳理】useRef
- 3-19 【資料梳理】useState語法講解
- 3-20 【資料梳理】React 調試
- 3-21 【階段練練練】用JSX實現一個TODO-LIST功能
React Native的升級與適配一直是困擾開發(fā)者的一個痛點，本章節(jié)將講解最新版React Native的升級與適配的經驗與技巧，同時會對比不同升級方式的優(yōu)缺點，并會對React Native過去一年中的重要更新做個總結，并且給出適配建議。
1. 掌握diff原則，理解React VDOM DIFF算法的實現與原因
- 12-1 完善實現React VDOM DIFF算法
- 12-2 實現useReducer，掌握Hooks的底層結構實現與函數組件的狀態(tài)-1
- 12-3 實現useReducer，掌握Hooks的底層結構實現與函數組件的狀態(tài)-2
- 12-4 節(jié)點刪除.mp4
- 12-5 初步實現多個節(jié)點的React VDOM DIFF-1
- 12-6 初步實現多個節(jié)點的React VDOM DIFF-2
- 12-7 完善實現React VDOM DIFF算法
- 12-8 如何移動DOM節(jié)點
- 12-9 實現useState.mp4
- 12-10 子節(jié)點為null、undefined、布爾值
本章將使用 Create-React-App 創(chuàng)建 React 項目環(huán)境，它是 React 官方推薦的創(chuàng)建工具。此外本章還會配置 ESLint 和 Prettier 規(guī)范代碼格式，并把代碼提交到 git 倉庫。
- 3-1 -使用Create-React-App創(chuàng)建項目-React官網推薦的方式
- 3-2 -準備工作-安裝必備軟件
- 3-3 -使用Create-React-App創(chuàng)建項目-React官網推薦的方式
- 3-4 -使用Vite創(chuàng)建React 項目-Vite是前端熱門工具
- 3-5 -使用eslint檢查代碼語法錯誤-提前識別，防患于未然
- 3-6 -使用prettier規(guī)范代碼風格-統(tǒng)一風格，多人開發(fā)也不怕亂
- 3-7 -提交代碼到git倉庫-選擇國內平臺
- 3-8 -使用husky執(zhí)行pre-commit檢查-把非規(guī)范代碼拒之門外
- 3-9 -使用commit-lint規(guī)范commit提交格式-讓git記錄清晰可讀
- 3-10 -【加餐】vite和webpack的區(qū)別-vite使用ES-Module增加啟動速度
- 3-11 -章總結
本章手把手帶同學實現一個簡易的 React 框架，擴展同學們技術視野，幫助同學們了解 React 底層實現。通過本章學習，有助于同學從底層思考技術問題，擴展技術視野，將自己的技術水準向前更近一步。
- 11-1 React 代碼是如何被轉化成原生 JS 代碼的
- 11-2 createElement 底層的實現
- 11-3 Babel 轉換 JSX 的實現
- 11-4 ReactDOM.render 方法的實現邏輯
- 11-5 Concurrent Mode 實現思路
- 11-6 Fiber 的原理和基礎實現（上）
- 11-7 Fiber 的原理和基礎實現（下）
- 11-8 Render & Commit 階段
- 11-9 Reconciliation 階段（上）
- 11-10 Reconciliation 階段（中）
- 11-11 Reconciliation 階段（下）
- 11-12 函數組件的實現
- 11-13 useState 的實現
本章將帶大家使用TS的語法進行前端 React 代碼的開發(fā)，過程中會給大家講解在 React 和 Redux 等前端核心框架上如何正確巧妙的使用TypeScript。本章的最后，我們將產出一個完整的爬蟲項目，并通過可視化的方式，對爬取到的數據進行展示。
學習前：底層源碼的高效學習方法分享，包括如何高效學習React源碼，如何debug React源碼，如何運行React測試用例及如何成為React Contributor 。
學前技術儲備：React核心知識點講解
學前技術儲備：React核心知識點講解
1. 理解React合成事件的必要性 2. 解釋項目中的合成事件以及原生事件場景和bug 3. 通過自己實現React合成事件，深入理解框架級別的事件
路由是 Web 多頁系統(tǒng)的必備配置，否則無法實現多頁面和頁面跳轉。React-router 是 React 項目路由配置的不二選擇。本章使用 React-router 配置路由，并講解相關的 Layout Outlet 等知識點。即學即用，將路由用于問卷項目中，配置首頁、列表、標星、回收站等頁面。
主要講解React創(chuàng)建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
React主要API介紹，在這里你能了解它的用法，為下一章源碼分析打基礎。
React主要API介紹，在這里你能了解它的用法，為下一章源碼分析打基礎。
React主要API介紹，在這里你能了解它的用法，為下一章源碼分析打基礎。
本章從什么是測試入手，簡介了測試的基本概念，介紹通用測試工具 Jest 和 React 測試框架 react-testing-library，然后使用這兩種工具完成Button組件的單元測試。
表單組件是 Web 開發(fā)中比較獨立的部分，React 中也是如此。本章講解常見的表單組件，如 input radio checkbox 等，并學習幾種常見的表單校驗工具。即學即用，開發(fā)登錄、注冊頁，并配置校驗規(guī)則。
- 9-1 什么是受控組件-React表單組件的重要概念
- 9-2 什么是受控組件-React表單組件的重要概念
- 9-3 使用textarea組件-通過dangerouslySetInnerHTML使文本換行
- 9-4 使用radio單選按鈕-受控組件的設計思路
- 9-5 使用checkbox復選按鈕-模擬真實的業(yè)務場景
- 9-6 使用select下拉框組件
- 9-7 使用form組件和submit方法
- 9-8 使用AntD開發(fā)ListSearch搜索組件
- 9-9 ListSearch搜索修改URL參數-體現組件設計的解耦合
- 9-10 使用AntD的Form組件開發(fā)注冊頁
- 9-11 使用AntD的Form組件開發(fā)登錄頁，并實現“記住我”功能
- 9-12 使用AntD表單組件的校驗功能，校驗用戶名和密碼的格式
- 9-13 使用第三方表單校驗工具React-Hook-Form
- 9-14 使用第三方表單校驗工具Formik
- 9-15 章總結
本章節(jié)，介紹了hooks的 核心考點，和class的對比，面試過程中要注意的一些點，以及面試解答分析。
- 22-1 出幾道 React-Hooks 面試題
- 22-2 class 組件存在哪些問題
- 22-3 用 useState 實現 state 和 setState 功能
- 22-4 用 useEffect 模擬組件生命周期
- 22-5 用 useEffect 模擬 WillUnMount 時的注意事項
- 22-6 useRef 和 useContext
- 22-7 useReducer 能代替 redux 嗎？
- 22-8 使用 useMemo 做性能優(yōu)化
- 22-9 使用 useCallback 做性能優(yōu)化
- 22-10 什么是自定義 Hook（上）
- 22-11 什么是自定義 Hook（下）
- 22-12 使用 Hooks 的兩條重要規(guī)則
- 22-13 為何 Hooks 要依賴于調用順序？
- 22-14 class 組件邏輯復用有哪些問題？
- 22-15 Hooks 組件邏輯復用有哪些好處
- 22-16 Hooks 使用中的幾個注意事項
- 22-17 Hooks 面試題解答
性能優(yōu)化是所有 Web 項目必備的事項。本章將對問卷項目進行性能優(yōu)化，使用 useMemo 和 useCallback 緩存數據，使用路由懶加載和 webpack 拆分代碼。最終將 main.js 代碼體積從 1.6M 優(yōu)化到 33KB ，極大提升加載效率。
- 18-1 -抽離公共代碼antd和react，合理使用HTTP緩存
- 18-2 -useState傳入函數，只在組件渲染時執(zhí)行一次
- 18-3 -使用useMemo緩存B端統(tǒng)計頁的鏈接和二維碼Elem
- 18-4 -使用useCallback緩存添加組件的函數
- 18-5 -使用React.memo優(yōu)化子組件更新
- 18-6 -分析B端構建出的bundle文件，體積太大，需要拆分
- 18-7 -配置路由懶加載，拆分編輯頁和統(tǒng)計頁，優(yōu)化代碼體積
- 18-8 -抽離公共代碼antd和react，合理使用HTTP緩存
- 18-9 -CRA根據路由懶加載自動拆分CSS文件
- 18-10 -章總結
主要講解React創(chuàng)建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
主要講解React創(chuàng)建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
主要講解React創(chuàng)建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
主要講解React創(chuàng)建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
本章會講解學習這門課程之前必備的基礎知識，主要講解ES6、RN等必備知識點，專門為新手學員準備的，這些內容在后面的實戰(zhàn)中都會用到。
工廠模式是前端常用設計模式之一。本章將詳細講解工廠模式，從概念背景，到代碼示例和 UML 類圖，最后到它的具體使用場景。
