React工程師修煉指南

◆ 目錄：◆


前言
●第1章ES6基礎(chǔ)
1.1let及const
1.1.1let命令
1.1.2const命令
1.1.3臨時(shí)死區(qū)
1.1.4循環(huán)中的let及const
1.2解構(gòu)賦值
1.2.1數(shù)組的解構(gòu)
1.2.2對象的解構(gòu)
1.2.3解構(gòu)的默認(rèn)值及參數(shù)的解構(gòu)
1.3字符串?dāng)U展
1.3.1Unicode支持
1.3.2新增字符串方法
1.3.3模板字符串
1.4Symbol
1.5函數(shù)
1.5.1函數(shù)形參的默認(rèn)值
1.5.2函數(shù)形參不定參數(shù)
1.5.3箭頭函數(shù)
1.6類class
1.6.1類的基本語法
1.6.2靜態(tài)成員
1.6.3類的繼承
1.7異步編程
1.7.1ES5中的異步
1.7.2Promise基本語法
1.7.3Promise處理異步問題
1.7.4Promise里的其他方法
1.8模塊化
1.8.1導(dǎo)入導(dǎo)出基本使用
1.8.2導(dǎo)入導(dǎo)出變式寫法
1.8.3按需導(dǎo)入
1.9Set和Map集合
1.9.1Set集合
1.9.2Map集合
1.10小結(jié)
●第2章React詳解
2.1為什么使用 React
2.1.1專注于視圖層
2.1.2組件化開發(fā)和聲明式編程
2.1.3Virtual DOM
2.2ReactDOM
2.2.1React 引入方式
2.2.2ReactDOM
2.3React 視圖渲染
2.3.1ReactElement
2.3.2JSX
2.4create-react-app
2.4.1安裝 create-react-app
2.4.2項(xiàng)目構(gòu)建和啟動(dòng)
2.4.3項(xiàng)目入口文件
2.4.4React.StrictMode
2.5定義 React 組件
2.6組件間通信
2.6.1props 使用
2.6.2state 使用
2.6.3組件間的通信
2.6.4跨組件通信
2.7組件的生命周期
2.7.1掛載階段的生命周期函數(shù)
2.7.2更新階段的生命周期函數(shù)
2.7.3卸載階段的生命周期函數(shù)
2.8ref
2.8.1string ref
2.8.2createRef
2.9key
2.10添加事件
2.11表單
2.12其他特性
2.12.1children
2.12.2dangerouslySetInnerHTML
2.12.3函數(shù)式組件
2.13React Hooks
2.13.1常用Hooks
2.13.2Hooks 使用規(guī)則
2.13.3自定義 Hook
2.14小結(jié)
●第3章基于 Redux 狀態(tài)管理
3.1Redux 使用
3.1.1action、createStore 和 reducer 函數(shù)
3.1.2store
3.2React-Redux
3.2.1安裝與配置
3.2.2connect
3.2.3Hooks
3.3基于Redux 的Todos實(shí)現(xiàn)
3.3.1建立視圖
3.3.2建立數(shù)據(jù)模型以完善reducer
3.3.3數(shù)據(jù)關(guān)聯(lián)視圖完善功能
3.4reducer 拆分與合并
3.5rudux-thunk 中間件
3.6小結(jié)
●第4章React-Router
4.1什么是 React-Router
4.2React-Router 安裝與配置
4.3Route 組件
4.3.1Path匹配
4.3.2路由渲染
4.4路由信息
4.5withRouter和Router Hooks
4.5.1withRouter
4.5.2Router Hooks
4.6鏈接組件
4.6.1Link 組件
4.6.2NavLink 組件
4.7404視圖
4.8重定向
4.9Router 實(shí)戰(zhàn)
4.10小結(jié)
●第5章商城項(xiàng)目實(shí)戰(zhàn)
5.1模板搭建
5.1.1BasicLayout
5.1.2SecurityLayout
5.2導(dǎo)航組件
5.3登錄跳轉(zhuǎn)
5.3.1登錄頁面與邏輯實(shí)現(xiàn)
5.3.2用戶中心信息展示
5.4免登錄頁面
5.4.1首頁頁面
5.4.2商品列表
5.4.3商品詳情
5.5路由守衛(wèi)頁
5.5.1購物車
5.5.2確認(rèn)訂單
5.5.3支付
5.5.4訂單列表
5.6小結(jié)
●第6章React原理解析
6.1React源碼中的常用變量和數(shù)據(jù)結(jié)構(gòu)
6.1.1WorkTag
6.1.2SideEffectTag
6.1.3ExecutionContext
6.1.4PriorityLevel
6.1.5RootTag
6.1.6RootExitStatus
6.1.7currentEventTime
6.2初次渲染與更新
6.2.1ReactDOM.render
6.2.2setState
6.2.3forceUpdate
6.2.4render、setState、forceUpdate對比
6.2.5enqueueUpdate
6.2.6scheduleUpdateOnFiber
6.2.7時(shí)間計(jì)算
6.3任務(wù)調(diào)度
6.3.1performSyncWorkOnRoot
6.3.2renderRootSync
6.3.3workLoopSync
6.3.4performUnitOfWork
6.3.5beginWork
6.3.6更新階段
6.3.7協(xié)調(diào)
6.3.8commit
6.4Hook原理
6.4.1Hook基本數(shù)據(jù)結(jié)構(gòu)
6.4.2全局變量
6.4.3標(biāo)識(shí)路徑
6.4.4更新函數(shù)
6.5Hook API解析
6.5.1useReducer
6.5.2useState
6.5.3useContext
6.5.4useRef
6.5.5useEffect
6.5.6useLayoutEffect
6.5.7useMemo
6.5.8useCallback
6.6重點(diǎn)解析
6.6.1Context
6.6.2Refs
6.6.3事件系統(tǒng)
6.6.4setState異步Or同步
6.6.5diff
6.7小結(jié)
●第7章工程化配置
7.1webpack入門
7.1.1什么是webpack
7.1.2webpack安裝
7.1.3使用webpack
7.1.4webpack基礎(chǔ)
7.1.5webpack核心配置
7.2實(shí)戰(zhàn)React開發(fā)環(huán)境
7.2.1搭建前端開發(fā)基礎(chǔ)環(huán)境
7.2.2樣式配置
7.2.3靜態(tài)資源管理
7.2.4本地開發(fā)環(huán)境配置
7.2.5使用Babel支持ES6+
7.2.6集成React框架
7.3擴(kuò)展優(yōu)化
7.4小結(jié)