和 Vue 相比，使用 React 時(shí)更需要開發(fā)人員了解其原理，面試也會(huì)重點(diǎn)考察。本章講解 JSX 編譯、事件機(jī)制、batchUpdate ，組件更新渲染過程等 React 原理?？嫉闹R(shí)點(diǎn)和面試題。
- 8-1 React原理-考點(diǎn)串講
- 8-2 React原理-考點(diǎn)串講
- 8-3 再次回顧不可變值
- 8-4 vdom和diff是實(shí)現(xiàn)React的核心技術(shù)
- 8-5 JSX本質(zhì)是什么
- 8-6 說一下 React 的合成事件機(jī)制
- 8-7 說一下React的batchUpdate機(jī)制
- 8-8 簡(jiǎn)述React事務(wù)機(jī)制
- 8-9 說一下React組件渲染和更新的過程
- 8-10 React-fiber如何優(yōu)化性能
- 8-11 React原理-考點(diǎn)總結(jié)和復(fù)習(xí)
- 8-12 【任務(wù)】介紹 React 的 batchUpdate 機(jī)制
和 Vue 一樣，React 也是面試必備技能，而且大廠的考察概率更高。本章講解 React 基本使用，高級(jí)特性，性能優(yōu)化，redux 等內(nèi)容的知識(shí)點(diǎn)和面試題。
- 7-1 React使用-考點(diǎn)串講
- 7-2 React使用-考點(diǎn)串講
- 7-3 關(guān)于 React17
- 7-4 JSX基本知識(shí)點(diǎn)串講
- 7-5 JSX如何判斷條件和渲染列表
- 7-6 React事件為何bind this
- 7-7 React 事件和 DOM 事件的區(qū)別
- 7-8 React表單知識(shí)點(diǎn)串講
- 7-9 React父子組件通訊
- 7-10 setState為何使用不可變值
- 7-11 setState 是同步還是異步
- 7-12 setState何時(shí)會(huì)合并state
- 7-13 React18中setState的變化
- 7-14 React組件生命周期
- 7-15 React基本使用-知識(shí)點(diǎn)總結(jié)和復(fù)習(xí)
- 7-16 React函數(shù)組件和class組件有何區(qū)別
- 7-17 什么是React非受控組件
- 7-18 什么場(chǎng)景需要用React Portals
- 7-19 是否用過React Context
- 7-20 React如何異步加載組件
- 7-21 React性能優(yōu)化-SCU的核心問題在哪里
- 7-22 React性能優(yōu)化-SCU默認(rèn)返回什么
- 7-23 React性能優(yōu)化-SCU一定要配合不可變值
- 7-24 React性能優(yōu)化-PureComponent和memo
- 7-25 React性能優(yōu)化-了解immutable.js
- 7-26 什么是React高階組件
- 7-27 什么是React Render Props
- 7-28 React高級(jí)特性考點(diǎn)總結(jié)
- 7-29 Redux考點(diǎn)串講
- 7-30 描述Redux單項(xiàng)數(shù)據(jù)流
- 7-31 串講react-redux知識(shí)點(diǎn)
- 7-32 Redux action如何處理異步
- 7-33 簡(jiǎn)述Redux中間件原理
- 7-34 串講react-router知識(shí)點(diǎn)
- 7-35 React使用-考點(diǎn)總結(jié)
- 7-36 【任務(wù)】React 為何需要 SCU ？
主要講解React創(chuàng)建更新中的主要兩種方式ReactDOM.render和setState，他們具體做了什么。
學(xué)習(xí)完 React 的使用和原理，就來模擬面試吧。本章給出了大量的 React 常考面試題，幫你驗(yàn)證學(xué)習(xí)效果，溫故知新。
React是什么？他的出現(xiàn)解決了什么問題？讓我們通過制作一個(gè)購物網(wǎng)站來認(rèn)識(shí)react的基礎(chǔ)知識(shí)吧。在本章中，將會(huì)圍繞類組件的知識(shí)點(diǎn)帶同學(xué)們慢慢領(lǐng)悟React的特征。
- 3-1 【概念理解】React的前世今生
- 3-2 章節(jié)總覽
- 3-3 【概念理解】React的前世今生
- 3-4 【組件化】初識(shí)React函數(shù)式組件
- 3-5 【概念理解】JSX 編程思維
- 3-6 【組件化】配置React的CSS模組
- 3-7 【延伸閱讀】CSS in JS (JSS)
- 3-8 【資源配置】加載媒體與字體文件
- 3-9 【組件化】創(chuàng)建class類組件
- 3-10 【延伸閱讀】React的行內(nèi)樣式與CSS
- 3-11 【概念理解】State vs Props
- 3-12 【事件驅(qū)動(dòng)】React Event 事件處理
- 3-13 【異步處理】獲取網(wǎng)絡(luò)API數(shù)據(jù)
- 3-14 【異步處理】setState的異步開發(fā)
- 3-15 【死與新生】探索React組件的生命周期
- 3-16 【概念理解】React 17 版本變化
- 3-17 【討論題】什么是 React？
本章將直接帶同學(xué)們使用 React 基礎(chǔ)語法上手一款小游戲的開發(fā)，在簡(jiǎn)單實(shí)戰(zhàn)的過程中帶同學(xué)們了解 React 18 的代碼開發(fā)方式、調(diào)試工具，以及常見的基礎(chǔ)語法。通過本章學(xué)習(xí)，同學(xué)們可以對(duì) React 開發(fā)有一個(gè)非?；A(chǔ)的認(rèn)識(shí)，有助于后續(xù)系統(tǒng)性學(xué)習(xí)。
- 2-1 React 開發(fā)調(diào)試工具安裝
- 2-2 如何在網(wǎng)頁中快速使用 React（下）
- 2-3 React 開發(fā)調(diào)試工具安裝
- 2-4 React常見語法初探（上）
- 2-5 React 常見語法初探（中）
- 2-6 React 常見語法初探（下）
- 2-7 React 工程初始化和游戲功能預(yù)覽
- 2-8 實(shí)現(xiàn)棋盤布局
- 2-9 下棋邏輯的實(shí)現(xiàn)（上）
- 2-10 下棋邏輯的實(shí)現(xiàn)（下）
- 2-11 借助數(shù)據(jù)設(shè)計(jì)實(shí)現(xiàn)游戲狀態(tài)計(jì)算邏輯（上）
- 2-12 借助數(shù)據(jù)設(shè)計(jì)實(shí)現(xiàn)游戲狀態(tài)計(jì)算邏輯（下）
- 2-13 優(yōu)化拆分組件實(shí)現(xiàn)數(shù)據(jù)共享
- 2-14 歷史回溯功能的實(shí)現(xiàn)
介紹 React 的歷史、背景和每次版本更新。介紹 React 的核心概念：組件化 + 數(shù)據(jù)驅(qū)動(dòng)視圖。對(duì)比 React 和 Vue ，其實(shí) React 比 Vue 更簡(jiǎn)潔。
React主要API介紹，在這里你能了解它的用法，為下一章源碼分析打基礎(chǔ)。
本章回顧了 React 的基礎(chǔ)知識(shí)，從而引出了全新的 React Hooks，詳細(xì)講解了 useState、useEffect、自定義Hook 等內(nèi)容。
學(xué)前技術(shù)儲(chǔ)備：React核心知識(shí)點(diǎn)講解
- 2-1 Thinking in React，即用React的方式寫React-1
- 2-2 React的迭代歷史：那些標(biāo)志性的變革，如類組件、Fiber、Hooks、Concurrent等
- 2-3 Thinking in React，即用React的方式寫React-1
- 2-4 Thinking in React，即用React的方式寫React-2
- 2-5 React中的狀態(tài)管理與狀態(tài)管理庫-1
- 2-6 React中的狀態(tài)管理與狀態(tài)管理庫-2
- 2-7 state (狀態(tài))與props (屬性)
- 2-8 React中的組件，如函數(shù)組件、類組件等
- 2-9 Hooks
- 2-10 Context
- 2-11 React腳手架以及企業(yè)級(jí)框架
- 2-12 React 組件的常見性能優(yōu)化-1
- 2-13 React 組件的常見性能優(yōu)化-2
- 2-14 React 組件的常見性能優(yōu)化-3
性能提高：React Lanes模型源碼剖析，包括：React Lanes模型背景、模型的應(yīng)用、模型常用工具函數(shù)，最后講解React1 8新增的transition和 useDeferredValue原理 。
React 是國內(nèi)流行的前端框架，尤其大廠應(yīng)用較多。本章講解 React 基礎(chǔ)應(yīng)用，助你通過 React 技術(shù)棧的面試。
- 18-1 React使用-考點(diǎn)串講
- 18-2 React使用-考點(diǎn)串講
- 18-3 關(guān)于 React17
- 18-4 JSX基本知識(shí)點(diǎn)串講
- 18-5 JSX如何判斷條件和渲染列表
- 18-6 React事件為何bind this
- 18-7 React 事件和 DOM 事件的區(qū)別
- 18-8 React表單知識(shí)點(diǎn)串講
- 18-9 React父子組件通訊
- 18-10 setState為何使用不可變值
- 18-11 setState 是同步還是異步
- 18-12 setState何時(shí)會(huì)合并state
- 18-13 React18中setState的變化
- 18-14 React組件生命周期
- 18-15 React基本使用-知識(shí)點(diǎn)總結(jié)和復(fù)習(xí)
- 18-16 React函數(shù)組件和class組件有何區(qū)別
- 18-17 什么是React非受控組件
- 18-18 什么場(chǎng)景需要用React Portals
- 18-19 是否用過React Context
- 18-20 React如何異步加載組件
- 18-21 React性能優(yōu)化-SCU的核心問題在哪里
- 18-22 React性能優(yōu)化-SCU默認(rèn)返回什么
- 18-23 React性能優(yōu)化-SCU一定要配合不可變值
- 18-24 React性能優(yōu)化-PureComponent和memo
- 18-25 React性能優(yōu)化-了解immutable.js
- 18-26 什么是React高階組件
- 18-27 什么是React Render Props
- 18-28 React高級(jí)特性考點(diǎn)總結(jié)
- 18-29 Redux考點(diǎn)串講
- 18-30 描述Redux單項(xiàng)數(shù)據(jù)流
- 18-31 串講react-redux知識(shí)點(diǎn)
- 18-32 Redux action如何處理異步
- 18-33 簡(jiǎn)述Redux中間件原理
- 18-34 串講react-router知識(shí)點(diǎn)
- 18-35 React使用-考點(diǎn)總結(jié)
- 18-36 【任務(wù)】React 為何需要 SCU ？
本章中對(duì)React 框架優(yōu)勢(shì)、React 18 版本特點(diǎn)特性，以及課程整體的教學(xué)思路和方法，進(jìn)行了梳理，幫助大家更加清晰的認(rèn)識(shí) React 18。
本章節(jié)，介紹了hooks的 核心考點(diǎn)，和class的對(duì)比，面試過程中要注意的一些點(diǎn)，以及面試解答分析。
- 14-1 出幾道 React-Hooks 面試題
- 14-2 class 組件存在哪些問題
- 14-3 用useState實(shí)現(xiàn)state和setState功能
- 14-4 用 useEffect 模擬組件生命周期
- 14-5 用useEffect模擬WillUnMount時(shí)的注意事項(xiàng)
- 14-6 useRef和useContext
- 14-7 useReducer能代替redux嗎
- 14-8 使用useMemo做性能優(yōu)化
- 14-9 使用useCallback做性能優(yōu)化
- 14-10 什么是自定義Hook（上）
- 14-11 什么是自定義 Hook（下）
- 14-12 使用 Hooks 的兩條重要規(guī)則
- 14-13 為何Hooks要依賴于調(diào)用順序？
- 14-14 class 組件邏輯復(fù)用有哪些問題？
- 14-15 Hooks組件邏輯復(fù)用有哪些好處
- 14-16 Hooks使用中的幾個(gè)注意事項(xiàng)
- 14-17 Hooks 面試題解答
- 14-18 【任務(wù)】對(duì)比 React Hooks 和 Vue3 Comp
- 14-19 后續(xù)學(xué)習(xí)建議
我們?cè)撚媚男┘夹g(shù)來完成本項(xiàng)目？這其中最關(guān)鍵的 React 技術(shù)，他的核心原理是什么？最新的 18 版本有哪些新的功能。如果你是一個(gè)前端架構(gòu)師，該怎么畫一張技術(shù)架構(gòu)圖？
- 4-1 面試重點(diǎn)：React 18 的并發(fā)渲染原理（上）React 執(zhí)行的三層架構(gòu)
- 4-2 根據(jù)需求分析結(jié)果做技術(shù)選型（下）
- 4-3 React 18 的重要更新和使用之新特性
- 4-4 React 18 的重要更新和使用之新API
- 4-5 面試重點(diǎn)：React 18 的并發(fā)渲染原理（上）React 執(zhí)行的三層架構(gòu)
- 4-6 面試重點(diǎn)：React 18 的并發(fā)渲染原理（中）React 執(zhí)行的三層架構(gòu)
- 4-7 面試重點(diǎn)：React 18 的并發(fā)渲染原理（下）React 執(zhí)行的三層架構(gòu)
- 4-8 職場(chǎng)技巧：如何畫一張技術(shù)架構(gòu)圖（上）
- 4-9 職場(chǎng)技巧：如何畫一張技術(shù)架構(gòu)圖（中）
- 4-10 職場(chǎng)技巧：如何畫一張技術(shù)架構(gòu)圖（下）
1. 通過手寫實(shí)現(xiàn)Hooks，從而掌握Hooks底層數(shù)據(jù)結(jié)構(gòu)，理解單鏈表與React規(guī)則的關(guān)聯(lián) 2. 掌握diff原則，理解React VDOM DIFF算法的實(shí)現(xiàn)與原因 3. 通過useReducer/useState的實(shí)現(xiàn)，掌握React狀態(tài)值的存儲(chǔ)與更新
React 是國內(nèi)流行的前端框架，尤其大廠應(yīng)用較多。本章講解 React 高級(jí)應(yīng)用和原理的考點(diǎn)和面試題，助你通過 React 技術(shù)棧的面試。
- 19-1 React真題演練-5-React和Vue的區(qū)別
- 19-2 React原理-考點(diǎn)串講
- 19-3 再次回顧不可變值
- 19-4 vdom和diff是實(shí)現(xiàn)React的核心技術(shù)
- 19-5 JSX本質(zhì)是什么
- 19-6 說一下 React 的合成事件機(jī)制
- 19-7 說一下 React 的 batchUpdate 機(jī)制
- 19-8 簡(jiǎn)述React事務(wù)機(jī)制
- 19-9 說一下React組件渲染和更新的過程
- 19-10 React-fiber如何優(yōu)化性能
- 19-11 React原理-考點(diǎn)總結(jié)和復(fù)習(xí)
- 19-12 【任務(wù)】介紹 React 的 batchUpdate 機(jī)制
- 19-13 React真題演練-1-組件之間如何通訊
- 19-14 React真題演練-2-ajax應(yīng)該放在哪個(gè)生命周期
- 19-15 React真題演練-3-組件公共邏輯如何抽離
- 19-16 React真題演練-4-React常見性能優(yōu)化方式
- 19-17 React真題演練-5-React和Vue的區(qū)別
本章開始，我們將正式開啟React的學(xué)習(xí)之旅，首先讓我們一起來學(xué)習(xí)，如何搭建開發(fā)環(huán)境，并學(xué)會(huì)如何啟動(dòng)一個(gè)react + typescript 的項(xiàng)目?！玖?，TS基礎(chǔ)不太好得同學(xué)，也可以先移步第13章附錄篇，補(bǔ)一下基礎(chǔ)再來進(jìn)修哦】
構(gòu)建和優(yōu)化一個(gè)合理的路由架構(gòu)是前端攻城獅必須掌握的技能。在本章中，課程會(huì)以react-router-dom V6為例，學(xué)會(huì)如何使用組件化的思想搭建一個(gè)簡(jiǎn)單、高效、可拓展的路由系統(tǒng)。
本章主要針對(duì)React hooks進(jìn)行講解，介紹了如何應(yīng)用第三方 think-react-store（基于React context 和 hook實(shí)現(xiàn)的實(shí)現(xiàn)數(shù)據(jù)流解決方案） 完成數(shù)據(jù)流操作，并繼續(xù)進(jìn)行我們的”造輪子“之旅，完成了多個(gè)自定義hook的開發(fā)，這些也都將直接應(yīng)用在之后的實(shí)戰(zhàn)項(xiàng)目中，并會(huì)結(jié)合項(xiàng)目需求逐步優(yōu)化，變成”好輪子“。
- 3-1 使用think-react-store實(shí)現(xiàn)數(shù)據(jù)處理【基于React context 和 hook的數(shù)據(jù)流解決方案
- 3-2 useContext和useReducer實(shí)現(xiàn)數(shù)據(jù)流管理
- 3-3 useTitleHook【根據(jù)url修改頁面title的自定義hook】
- 3-4 useHttpHook【基于fetch api 封裝具有監(jiān)測(cè)功能的自定義hook】
- 3-5 使用think-react-store實(shí)現(xiàn)數(shù)據(jù)處理【基于React context 和 hook的數(shù)據(jù)流解決方案】
- 3-6 Fiber架構(gòu)解析
- 3-7 hooks 組件對(duì)應(yīng)的生命周期
- 3-8 【討論題】說說你對(duì) react hooks得認(rèn)識(shí)
在做RN開發(fā)的時(shí)候通常離不了JS 和Native之間的通信，比如：初始化RN時(shí)Native向JS傳遞數(shù)據(jù)，JS調(diào)用Native的相冊(cè)選擇圖片，JS調(diào)用Native的模塊進(jìn)行一些復(fù)雜的計(jì)算，Native將一些數(shù)據(jù)(GPS信息，陀螺儀，傳感器等)主動(dòng)傳遞給JS等，在本章中我將向大家介紹在RN中JS和Native之間通信的幾種方式以及其原理和使用技巧。
- 16-1 走進(jìn)React Native Android混合開發(fā)實(shí)戰(zhàn)
- 16-2 走進(jìn)React Native Android混合開發(fā)實(shí)戰(zhàn)
- 16-3 React Native 混合開發(fā)實(shí)戰(zhàn)(Android篇)-1【解鎖新的開發(fā)方式】
- 16-4 React Native 混合開發(fā)實(shí)戰(zhàn)(Android篇)-2【解鎖新的開發(fā)方式】
- 16-5 React Native 混合開發(fā)實(shí)戰(zhàn)(Android篇)-3【解鎖新的開發(fā)方式】
- 16-6 React Native 混合開發(fā)實(shí)戰(zhàn)(Android篇)-4【解鎖新的開發(fā)方式】
- 16-7 React Native 混合開發(fā)實(shí)戰(zhàn)(Android篇)-5【解鎖新的開發(fā)方式】
- 16-8 React Native 混合開發(fā)實(shí)戰(zhàn)(Android篇)-6【解鎖新的開發(fā)方式】
- 16-9 走進(jìn)React Native iOS混合開發(fā)實(shí)戰(zhàn)
- 16-10 React Native 混合開發(fā)實(shí)戰(zhàn)(iOS篇)-1【解鎖新的開發(fā)方式】
- 16-11 React Native 混合開發(fā)實(shí)戰(zhàn)(iOS篇)-2【解鎖新的開發(fā)方式】
- 16-12 React Native 混合開發(fā)實(shí)戰(zhàn)(iOS篇)-3【解鎖新的開發(fā)方式】
在學(xué)習(xí)了vue插件開發(fā)之后，我們將來學(xué)習(xí)前端工程化中另一流行框架React插件的開發(fā)，本章就將從React原理解析開始，深度解析super-tiny-compiler編譯器實(shí)現(xiàn)原理，從zbestpc項(xiàng)目移植到react項(xiàng)目集成工程化腳手架，徹底搞懂React插件實(shí)現(xiàn)原理。
- 18-1 React項(xiàng)目運(yùn)行原理解析
- 18-2 React Hooks狀態(tài)管理+組件化
- 18-3 React JSX+Babel開發(fā)模式
- 18-4 React Babel生產(chǎn)環(huán)境編譯
- 18-5 Babel編譯原理解析
- 18-6 super-tiny-compiler編譯器原理分析
- 18-7 super-tiny-compiler編譯器之詞法解析
- 18-8 super-tiny-compiler編譯器之AST生成
- 18-9 super-tiny-compiler編譯器之AST轉(zhuǎn)換
- 18-10 super-tiny-compiler編譯器之代碼生成
- 18-11 Babel typescript預(yù)設(shè)功能詳解
- 18-12 Babel preset混合實(shí)現(xiàn)tsx編譯
- 18-13 webpack+babel-loader實(shí)現(xiàn)模塊化+jsx編譯
- 18-14 CRA項(xiàng)目初始化+react-scripts啟動(dòng)源碼分析
- 18-15 zbestpc項(xiàng)目移植React
- 18-16 zbestpc項(xiàng)目集成ReactRouter
- 18-17 react項(xiàng)目集成工程化腳手架
工欲善其事必先利其器，本章將為大家精選了一些RN基礎(chǔ)知識(shí)，有RN基礎(chǔ)的同學(xué)可跳過這一章，直接進(jìn)入項(xiàng)目實(shí)戰(zhàn)環(huán)節(jié)。
- 2-1 React必備基礎(chǔ)講解-1
- 2-2 開發(fā)環(huán)境搭建指導(dǎo)-Mac平臺(tái)【持續(xù)更新】
- 2-3 開發(fā)環(huán)境搭建指導(dǎo)-Windows平臺(tái)【持續(xù)更新】
- 2-4 VS Code開發(fā)React Native實(shí)用技巧【持續(xù)更新】
- 2-5 ES6,ES7,ES8學(xué)習(xí)指南-1
- 2-6 ES6,ES7,ES8學(xué)習(xí)指南-2
- 2-7 ES6,ES7,ES8學(xué)習(xí)指南-3
- 2-8 React必備基礎(chǔ)講解-1
- 2-9 React必備基礎(chǔ)講解-2
- 2-10 React Native Hooks開發(fā)指南
- 2-11 React Native調(diào)試技巧實(shí)戰(zhàn)應(yīng)用【持續(xù)更新】
- 2-12 創(chuàng)建支持TS項(xiàng)目，對(duì)比和僅支持JS語言的RN項(xiàng)目
- 2-13 本章總結(jié)
本章詳細(xì)介紹 React 18 的基礎(chǔ)語法，全面使用基于 Hook 和函數(shù)組件的思路進(jìn)行教學(xué)，幫助同學(xué)不僅掌握 React 提供的語法 API，同時(shí)掌握基于數(shù)據(jù)驅(qū)動(dòng)的函數(shù)式編程開發(fā)理念，真正掌握新版本 React 的編程精髓。通過本章學(xué)習(xí)，同學(xué)們可以完整的掌握 React 18 中核心 API 的使用。
- 3-1 React UI 展示相關(guān)概念詳解（上）
- 3-2 React UI 展示相關(guān)概念詳解（下）
- 3-3 使用事件和狀態(tài)實(shí)現(xiàn)交互
- 3-4 useState 原理講解 & 事件查缺補(bǔ)漏
- 3-5 Immutable 數(shù)據(jù) & Immer 的使用（上）
- 3-6 Immutable 數(shù)據(jù) & Immer 的使用（下）
- 3-7 理解聲明式編程及其開發(fā)規(guī)范
- 3-8 通過父子組件傳值解決數(shù)據(jù)共享問題
- 3-9 組件狀態(tài)重置背后的運(yùn)行機(jī)理
- 3-10 Key 值的作用詳解
- 3-11 使用 Reducer 聚合數(shù)據(jù)處理邏輯（上）
- 3-12 使用 Reducer 聚合數(shù)據(jù)處理邏輯（下）
- 3-13 Reducer 的優(yōu)缺點(diǎn)解析（上）
- 3-14 Reducer 的優(yōu)缺點(diǎn)解析（下）
- 3-15 使用 Context 完成深層組件傳值
- 3-16 Context 實(shí)際使用技巧 & 通過 Children 進(jìn)行父子組件間 JSX 內(nèi)容的傳遞
- 3-17 使用 Reducer & Context 實(shí)現(xiàn) TodoList 功能
代碼實(shí)踐：打造輪子，自己的mini react框架，包括：造輪子的優(yōu)勢(shì)以及步驟，搭建自己的mini react項(xiàng)目。
“造輪子”是一個(gè)過程，要想造企業(yè)級(jí)輪子，自然需要更加豐富全面的技術(shù)。從本章開始，將帶領(lǐng)大家在梳理鞏固知識(shí)的同時(shí)，進(jìn)行“實(shí)用輪子”的開發(fā)，為后續(xù)實(shí)戰(zhàn)項(xiàng)目做好準(zhǔn)備。本章中，將分別針對(duì)React.js的核心知識(shí)，以及UmiJs的基礎(chǔ)知識(shí)，進(jìn)行梳理，并應(yīng)用這些知識(shí)帶領(lǐng)大家完成多款自定義組件（LazyLoad、ErrorBoundary、 Modal）的開發(fā)。
- 2-1 react組件生命周期（上）
- 2-2 前端開發(fā)環(huán)境搭建
- 2-3 前端開發(fā)環(huán)境搭建之Window 下安裝 nvm
- 2-4 UmiJs極速入門（上）
- 2-5 Umijs極速入門（下）
- 2-6 react組件生命周期（上）
- 2-7 react組件生命周期（下）
- 2-8 react組件之間的通信方式
- 2-9 Dva數(shù)據(jù)處理及數(shù)據(jù)mock
- 2-10 基于react context api 實(shí)現(xiàn)數(shù)據(jù)流管理
- 2-11 LazyLoad組件開發(fā)【基于lazy 與 suspense 實(shí)現(xiàn)的懶加載組件】
- 2-12 ErrorBoundary組件開發(fā)【基于React錯(cuò)誤邊界技術(shù)實(shí)現(xiàn)的組件】
- 2-13 Modal組件開發(fā)【基于createPortal 創(chuàng)建自定義彈窗組件】
- 2-14 使用 ref api 來操作dom和組件
- 2-15 react 生命周期函數(shù)總結(jié)
- 2-16 【討論題】大家在面試過程中遇到的 react 面試題
- 2-17 【討論題】談一談 react 中的狀態(tài)管理
本章主要講解，在React中，結(jié)合Enzyme，如何使用TDD的流程對(duì)業(yè)務(wù)組件進(jìn)行單元測(cè)試，通過例子幫助大家理解TDD與單元測(cè)試，同時(shí)也引出單元測(cè)試和TDD的一些優(yōu)劣點(diǎn)。
- 5-1 React 環(huán)境中配置 Jest（1）
- 5-2 React 環(huán)境中配置 Jest（1）
- 5-3 React 環(huán)境中配置 Jest（2）
- 5-4 Enzyme 的配置及使用
- 5-5 【討論題】你對(duì) Enzyme 是怎么理解的
- 5-6 使用 TDD 的方式開發(fā) Header 組件 (1)
- 5-7 使用 TDD 的方式開發(fā) Header 組件 (2)
- 5-8 Header 組件樣式新增及快照測(cè)試
- 5-9 通用代碼提取封裝
- 5-10 UndoList 的實(shí)現(xiàn)（1）
- 5-11 UndoList 的實(shí)現(xiàn)（2）
- 5-12 UndoList 樣式修飾及測(cè)試代碼優(yōu)化
- 5-13 UndoList 編輯功能實(shí)現(xiàn) （1）
- 5-14 UndoList 編輯功能實(shí)現(xiàn) （2）
- 5-15 UndoList 編輯功能實(shí)現(xiàn)（3）
- 5-16 CodeCoverage 代碼覆蓋率
- 5-17 章節(jié)小結(jié)
本章講解了如何將 TypeScript 與 React 結(jié)合，便攜更健壯的前端工程代碼。課程里對(duì)常見的 TypeScript 類型進(jìn)行了簡(jiǎn)單介紹講解，重點(diǎn)介紹了在 React 中遇到類型問題應(yīng)該如何解決，即便對(duì) TypeScript 沒有任何了解，通過本章的學(xué)習(xí)，同學(xué)也可以基本完成 React 和 TypeScript 的集成開發(fā)。
本章將會(huì)基于react hooks 繼續(xù)完成購物車組件，并通過函數(shù)式組件來學(xué)習(xí)hooks相關(guān)知識(shí)與技巧。
- 4-1 【討論題】React Hooks 深度分析
- 4-2 【概念理解】 什么是鉤子(hooks)
- 4-3 【狀態(tài)鉤子】使用useState管理組件state
- 4-4 【概念理解】副作用 side effect
- 4-5 【副作用鉤子】使用useEffect異步獲取數(shù)據(jù)
- 4-6 【副作用鉤子】useEffect 使用指南
- 4-7 【全局?jǐn)?shù)據(jù)傳遞】Context 與 useContext
- 4-8 【全局?jǐn)?shù)據(jù)傳遞】組件化Context Provider
- 4-9 【高階組件HOC】withAddToCart()
- 4-10 【自定義Hook】useAddToCart()
- 4-11 【討論題】React Hooks 深度分析
構(gòu)建和優(yōu)化一個(gè)合理的路由架構(gòu)是前端攻城獅必須掌握的技能。在本章中，課程會(huì)以react-router-dom V5為例，學(xué)會(huì)如何使用組件化的思想搭建一個(gè)簡(jiǎn)單、高效、可拓展的路由系統(tǒng)。想直接學(xué)習(xí)react-router-dom V6的同學(xué)可以跳過本章。
