123,123,123

內(nèi)容簡(jiǎn)介

　　這是一本完全從企業(yè)實(shí)踐角度出發(fā)，為初學(xué)者和進(jìn)階者撰寫(xiě)的React Hooks開(kāi)發(fā)指導(dǎo)手冊(cè)。來(lái)自多家大廠的業(yè)界專家給予高度評(píng)價(jià)，他們均認(rèn)為這本書(shū)是入門(mén)并精通React Hooks的好書(shū)。本書(shū)結(jié)合一線項(xiàng)目代碼對(duì)React Hooks核心API及相關(guān)技術(shù)點(diǎn)進(jìn)行了深入解讀，并配有大量圖例，讓讀者的學(xué)習(xí)過(guò)程更輕松，更有趣。為了幫助讀者解決實(shí)際落地問(wèn)題，書(shū)中不僅通過(guò)真實(shí)案例盡量還原實(shí)際開(kāi)發(fā)場(chǎng)景，還專門(mén)總結(jié)了實(shí)際開(kāi)發(fā)過(guò)程中經(jīng)常出現(xiàn)的典型問(wèn)題。為了幫助讀者把所學(xué)知識(shí)輕松運(yùn)用到實(shí)際工作中，本書(shū)還給出一個(gè)完整的企業(yè)級(jí)開(kāi)發(fā)項(xiàng)目，從0到1完整展現(xiàn)項(xiàng)目開(kāi)發(fā)過(guò)程。本書(shū)共7章。第1章對(duì)當(dāng)前前端市場(chǎng)進(jìn)行簡(jiǎn)單分析，首先對(duì)React Hooks在當(dāng)前前端市場(chǎng)中的定位及其與其他相關(guān)技術(shù)的異同進(jìn)行深入解讀，然后對(duì)React Hooks整個(gè)生命周期體系進(jìn)行全面講解。第2章重點(diǎn)介紹開(kāi)發(fā)技術(shù)選型方法、基礎(chǔ)工具安裝方法及基礎(chǔ)項(xiàng)目搭建流程，幫助讀者從0到1搭建真實(shí)的開(kāi)發(fā)環(huán)境。第3章基于真實(shí)的場(chǎng)景案例，對(duì)React Hooks核心API進(jìn)行詳細(xì)講解，并且對(duì)API使用優(yōu)化進(jìn)行了具體說(shuō)明。這是本書(shū)的重點(diǎn)，也是讀者真正把React Hooks用好的基礎(chǔ)。第4章著重對(duì)React Redux在React Hooks中的使用以及相關(guān)注意事項(xiàng)進(jìn)行詳細(xì)說(shuō)明，并重點(diǎn)介紹了企業(yè)開(kāi)發(fā)過(guò)程中常用的配套插件，這是提升開(kāi)發(fā)效率的基礎(chǔ)。第5章重點(diǎn)介紹了實(shí)際React Hooks開(kāi)發(fā)場(chǎng)景中經(jīng)常遇到的典型問(wèn)題及其解決方法和相關(guān)注意事項(xiàng)。第6章基于作者的多年實(shí)踐經(jīng)驗(yàn)，分享了10個(gè)可以提升開(kāi)發(fā)效率的企業(yè)級(jí)開(kāi)發(fā)庫(kù)，這里不僅對(duì)各個(gè)庫(kù)的基本使用方法進(jìn)行了介紹，還對(duì)其高級(jí)使用技巧、工作原理進(jìn)行了分析。第7章分享了一個(gè)真實(shí)電商訂單系統(tǒng)開(kāi)發(fā)和上線的完整流程。從項(xiàng)目創(chuàng)建，到eslintrc、Webpack等基礎(chǔ)工具的配置，再到對(duì)常用業(yè)務(wù)組件的封裝（HTTP、菜單、權(quán)限、路由配置），本章都進(jìn)行了詳細(xì)介紹。此外，本章使用最新的TypeScript語(yǔ)言進(jìn)行示例說(shuō)明與分析。

作者簡(jiǎn)介

　　鬼哥（本名楊云海）畢業(yè)于桂林電子科技大學(xué)軟件工程專業(yè)?，F(xiàn)就職于某一線互聯(lián)網(wǎng)企業(yè)，任資深前端工程師。曾就職于美團(tuán)、游族網(wǎng)絡(luò)，任高級(jí)前端工程師。深耕前端領(lǐng)域近10年，擁有豐富的企業(yè)級(jí)前端項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)。在前端工程化、數(shù)據(jù)可視化方面擁有豐富的實(shí)戰(zhàn)經(jīng)驗(yàn)，曾運(yùn)用最新的數(shù)據(jù)可視化技術(shù)three.js完成某國(guó)家級(jí)重點(diǎn)現(xiàn)代化項(xiàng)目。精通Vue、React等前端主流技術(shù)，尤其是在React技術(shù)方面，擁有多個(gè)千萬(wàn)級(jí)用戶產(chǎn)品開(kāi)發(fā)經(jīng)驗(yàn)。熱愛(ài)分享和總結(jié)，積極參與了多個(gè)開(kāi)源平臺(tái)和技術(shù)社區(qū)，現(xiàn)為CSDN博客專家、掘金優(yōu)秀創(chuàng)作者、GitHub倉(cāng)庫(kù)作者（有上百顆星）。

圖書(shū)目錄

第1章　初識(shí)React Hooks1
1.1　React Hooks概述1
1.1.1　React Hooks的優(yōu)點(diǎn)1
1.1.2　React Hooks的缺點(diǎn)7
1.1.3　使用React Hooks時(shí)的注意事項(xiàng)10
1.2　React Hooks生命周期11
1.2.1　理解React Hooks生命周期12
1.2.2　函數(shù)式渲染與生命周期的關(guān)系12
1.2.3　函數(shù)式渲染的特點(diǎn)15
第2章　基礎(chǔ)環(huán)境搭建16
2.1　基礎(chǔ)工具安裝16
2.2　創(chuàng)建基礎(chǔ)項(xiàng)目17
2.3　基礎(chǔ)項(xiàng)目目錄優(yōu)化18
2.4　初始化項(xiàng)目配置21
第3章　核心API原理解讀與實(shí)踐25
3.1　useState 25
3.1.1　上手使用useState 25
3.1.2　淺談useState異步27
3.1.3　使用useState時(shí)的注意事項(xiàng)29
3.1.4　useState原理解讀34
3.2　useRef37
3.2.1　上手使用useRef38
3.2.2　使用useRef時(shí)的注意事項(xiàng)40
3.3　forwardRef45
3.3.1　上手使用forwardRef45
3.3.2　使用forwardRef時(shí)的注意事項(xiàng)47
3.4　useImperativeHandle 50
3.4.1　上手使用useImperativeHandle50
3.4.2　使用useImperativeHandle時(shí)的
　　　注意事項(xiàng)53
3.4.3　useImperativeHandle原理解讀54
3.5　useEffect55
3.5.1　上手使用useEffect55
3.5.2　使用useEffect時(shí)的注意事項(xiàng)61
3.5.3　useEffect原理解讀69
3.6　useLayoutEffect70
3.6.1　上手使用useLayoutEffect70
3.6.2　useEffect與useLayoutEffect的
　　　區(qū)別72
3.7　useReducer74
3.7.1　上手使用useReducer74
3.7.2　useState與useReducer的實(shí)例
　　　對(duì)比77
3.7.3　使用useReducer時(shí)的注意事項(xiàng)88
3.8　useMemo88
3.8.1　上手使用React.memo88
3.8.2　上手使用useMemo 94
3.8.3　React.memo與useMemo的最佳
　　　使用場(chǎng)景102
3.9　useCallback102
3.9.1　上手使用useCallback102
3.9.2　使用useCallback時(shí)的注意
　　　　　　事項(xiàng)109
3.10　useContext110
3.11　自定義Hooks115
3.11.1　上手自定義Hooks 115
3.11.2　編寫(xiě)自定義Hooks的注意
　　　　　　　事項(xiàng)118
第4章　React Redux原理解讀與
　　　　實(shí)踐123
4.1　Redux123
4.2　Provider128
4.2.1　上手使用Provider128
4.2.2　Provider原理解讀130
4.3　useSelector131
4.3.1　上手使用useSelector131
4.3.2　useSelector原理解讀134
4.4　useDispatch135
4.4.1　上手使用useDispatch135
4.4.2　useDispatch原理解讀140
4.5　useStore140
4.5.1　上手使用useStore141
4.5.2　useStore原理解讀144
4.6　useReduxContext144
4.6.1　上手使用useReduxContext144
4.6.2　useReduxContext原理解讀147
4.7　中間件redux-logger148
4.8　中間件redux-persist150
第5章　React Hooks常見(jiàn)問(wèn)題解析154
5.1　如何正確實(shí)現(xiàn)組件復(fù)用154
5.1.1　合理使用有狀態(tài)組件和無(wú)狀態(tài)
　　　組件154
5.1.2　使用上下文管控依賴項(xiàng)155
5.1.3　狀態(tài)的可組合性156
5.1.4　分層復(fù)用158
5.2　如何在組件加載時(shí)正確發(fā)起異步
　　任務(wù)159
5.3　需要注意哪些React Hooks錯(cuò)誤
　　寫(xiě)法163
5.4　如何進(jìn)行React Hooks場(chǎng)景下的
　　優(yōu)化169
5.4.1　函數(shù)定義位置優(yōu)化169
5.4.2　組件更新優(yōu)化170
5.4.3　針對(duì)高頻操作做防抖優(yōu)化174
5.4.4　提高代碼可讀性和性能177
第6章　常見(jiàn)的企業(yè)級(jí)Hooks解讀183
6.1　constate183
6.2　react-hook-form186
6.3　use-debounce189
6.4　useLocalStorage191
6.5　react-useportal193
6.6　useHover196
6.7　React router hooks196
6.8　use-http201
6.9　React Use204
6.10　ahooks208
第7章　企業(yè)級(jí)React Hooks項(xiàng)目
　　　　架構(gòu)與實(shí)戰(zhàn)209
7.1　創(chuàng)建項(xiàng)目209
7.2　eslintrc配置212
7.3　Webpack配置214
7.4　全局Less和Ant懶加載配置216
7.5　環(huán)境變量配置219
7.6　技術(shù)與需求220
7.7　路由配置221
7.8　HTTP封裝223
7.9　登錄頁(yè)面開(kāi)發(fā)229
7.10　Mock.js配置236
7.11　權(quán)限封裝240
7.12　左側(cè)菜單封裝243
7.13　Breadcrumb封裝246
7.14　異步Modal封裝249
7.15　實(shí)現(xiàn)SVG Icon253
7.16　打包與上線256