ReactHooks开发实战 pdf下载

作者带你手撕所有代码，在掌握Hooks之外，助你大幅提高编码水平

1. 基础环境搭建：手撕Webpack

2. 核心API解读：11种API原理和应用指导

3. Redux精讲：带你读源码，并提供实践案例

4. Hooks实践避坑：解读实际开发中最常见的问题

5. 企业集Hooks库：一网打尽10大经典Hooks库

6. 完整Hooks企业案例：从0构建完整电商网站

这是一本完全从企业实践角度出发，为初学者和进阶者撰写的React Hooks开发指导手册。来自多家大厂的业界专家给予高度评价，他们均认为这本书是入门并精通React Hooks的好书。

本书结合一线项目代码对React Hooks核心API及相关技术点进行了深入解读，并配有大量图例，让读者的学习过程更轻松，更有趣。为了帮助读者解决实际落地问题，书中不仅通过真实案例尽量还原实际开发场景，还专门总结了实际开发过程中经常出现的典型问题。为了帮助读者把所学知识轻松运用到实际工作中，本书还给出一个完整的企业级开发项目，从0到1完整展现项目开发过程。

本书共7章。
第1章对当前前端市场进行简单分析，首先对React Hooks在当前前端市场中的定位及其与其他相关技术的异同进行深入解读，然后对React Hooks整个生命周期体系进行全面讲解。

第2章重点介绍开发技术选型方法、基础工具安装方法及基础项目搭建流程，帮助读者从0到1搭建真实的开发环境。

第3章基于真实的场景案例，对React Hooks核心API进行详细讲解，并且对API使用优化进行了具体说明。这是本书的重点，也是读者真正把React Hooks用好的基础。

第4章着重对React Redux在React Hooks中的使用以及相关注意事项进行详细说明，并重点介绍了企业开发过程中常用的配套插件，这是提升开发效率的基础。

第5章重点介绍了实际React Hooks开发场景中经常遇到的典型问题及其解决方法和相关注意事项。

第6章基于作者的多年实践经验，分享了10个可以提升开发效率的企业级开发库，这里不仅对各个库的基本使用方法进行了介绍，还对其高级使用技巧、工作原理进行了分析。

第7章分享了一个真实电商订单系统开发和上线的完整流程。从项目创建，到eslintrc、Webpack等基础工具的配置，再到对常用业务组件的封装（HTTP、菜单、权限、路由配置），本章都进行了详细介绍。此外，本章使用最新的TypeScript语言进行示例说明与分析。

鬼哥（本名杨云海）
毕业于桂林电子科技大学软件工程专业。现就职于某一线互联网企业，任资深前端工程师。曾就职于美团、游族网络，任高级前端工程师。深耕前端领域近10年，拥有丰富的企业级前端项目开发经验。

在前端工程化、数据可视化方面拥有丰富的实战经验，曾运用最新的数据可视化技术three.js完成某重点现代化项目。
精通Vue、React等前端主流技术，尤其是在React技术方面，拥有多个千万级用户产品开发经验。

热爱分享和总结，积极参与了多个开源平台和技术社区，现为CSDN博客专家、掘金优秀创作者、GitHub仓库作者（有上百颗星）。

*熊焰
龙陵物联 技术总监
本书通过企业级开发案例讲解React Hooks。无论对于初学者还是有一定经验的开发者来说，本书都是学习React Hooks非常不错的选择，你可以从书中看到作者对Hooks的深度理解，并让自己产生不同的思维碰撞。

*张仁阳
珠峰教育 技术总监
React Hooks解决了组件之间难以复用状态逻辑、复杂组件难以理解和维护等问题，已经成为现在主流的开发方式。本书循序渐进，清晰明了地讲解了React Hooks的方方面面，一定可以帮助你攻克React Hooks企业级开发难题。

*心月
某大厂高级前端工程师
前360、58资深前端工程师
React受到越来越多前端开发者的喜欢，而Hooks是React 16.8推出的新特性，解决了很多class编程中不容易处理的问题。Hooks给我们的编程带来了很多便利，但它有一定的学习成本。本书深入浅出地讲解了React Hooks的企业级实践，给出了丰富翔实的案例，引导初学者逐步掌握React Hooks的方方面面。从基础概念到环境搭建，再到React Hooks核心API原理的解读，更有企业级Hooks开发案例，本书让新人也能一步步成长为React Hooks高手。

*陈辰
某大厂资深前端工程师
《小白实战大前端》作者
我们可以在React的常规应用中写类组件和函数组件。函数组件简单，易维护，但没有自己的状态，React 16.8引入的Hooks彻底解决了这个问题。当然这仅是Hooks的众多优点之一，如果你想了解更多，那么建议阅读本书。本书从Hooks生命周期入手讲解常规技巧，分析实际案例，是大家了解Hooks的很好选择。

*银国徽
基础架构和视频架构前端专家
本书站在前端开发视角帮助大家更好地理解、学习 React Hooks 相关知识，从概念、理论到开发实战全部覆盖，还配备了大量开发实例，适合初级开发者用来快速掌握相关技能。

前言

第1章　初识React Hooks1

1.1　React Hooks概述1

1.1.1　React Hooks的优点1

1.1.2　React Hooks的缺点7

1.1.3　使用React Hooks时的注意事项10

1.2　React Hooks生命周期11

1.2.1　理解React Hooks生命周期12

1.2.2　函数式渲染与生命周期的关系12

1.2.3　函数式渲染的特点15

第2章　基础环境搭建16

2.1　基础工具安装16

2.2　创建基础项目17

2.3　基础项目目录优化18

2.4　初始化项目配置21

第3章　核心API原理解读与实践25

3.1　useState 25

3.1.1　上手使用useState 25

3.1.2　浅谈useState异步27

3.1.3　使用useState时的注意事项29

3.1.4　useState原理解读34

3.2　useRef37

3.2.1　上手使用useRef38

3.2.2　使用useRef时的注意事项40

3.3　forwardRef45

3.3.1　上手使用forwardRef45

3.3.2　使用forwardRef时的注意事项47

3.4　useImperativeHandle 50

3.4.1　上手使用useImperativeHandle50

3.4.2　使用useImperativeHandle时的

　　　注意事项53

3.4.3　useImperativeHandle原理解读54

3.5　useEffect55

3.5.1　上手使用useEffect55

3.5.2　使用useEffect时的注意事项61

3.5.3　useEffect原理解读69

3.6　useLayoutEffect70

3.6.1　上手使用useLayoutEffect70

3.6.2　useEffect与useLayoutEffect的

　　　区别72

3.7　useReducer74

3.7.1　上手使用useReducer74

3.7.2　useState与useReducer的实例

　　　对比77

3.7.3　使用useReducer时的注意事项88

3.8　useMemo88

3.8.1　上手使用React.memo88

3.8.2　上手使用useMemo 94

3.8.3　React.memo与useMemo的最佳

　　　使用场景102

3.9　useCallback102

3.9.1　上手使用useCallback102

3.9.2　使用useCallback时的注意

事项109

3.10　useContext110

3.11　自定义Hooks115

3.11.1　上手自定义Hooks 115

3.11.2　编写自定义Hooks的注意

事项118

第4章　React Redux原理解读与

　　　　实践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常见问题解析154

5.1　如何正确实现组件复用154

5.1.1　合理使用有状态组件和无状态

　　　组件154

5.1.2　使用上下文管控依赖项155

5.1.3　状态的可组合性156

5.1.4　分层复用158

5.2　如何在组件加载时正确发起异步

　　任务159

5.3　需要注意哪些React Hooks错误

　　写法163

5.4　如何进行React Hooks场景下的

　　优化169

5.4.1　函数定义位置优化169

5.4.2　组件更新优化170

5.4.3　针对高频操作做防抖优化174

5.4.4　提高代码可读性和性能177

第6章　常见的企业级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章　企业级React Hooks项目

　　　　架构与实战209

7.1　创建项目209

7.2　eslintrc配置212

7.3　Webpack配置214

7.4　全局Less和Ant懒加载配置216

7.5　环境变量配置219

7.6　技术与需求220

7.7　路由配置221

7.8　HTTP封装223

7.9　登录页面开发229

7.10　Mock.js配置236

7.11　权限封装240

7.12　左侧菜单封装243

7.13　Breadcrumb封装246

7.14　异步Modal封装249

7.15　实现SVG Icon253

7.16　打包与上线256

【为什么要写本书】

曾几何时，前端圈盛传这样一句话：“小公司用Vue，大公司用React。如果自己不去大公司，只要学会Vue就可以了，没有学习React的必要。”难道真的是这样吗？并不是！这句话放到2016～2019年没有什么错，也确实代表着当时的市场情况，但是国内互联网在经过2019年之后的高速发展，React的使用量在国内有了很大的增长。我们再来看看Stack Overflow 2022年关于Web框架使用情况的问卷调查，见右图。

由右图可以很直观地看到React在前端框架中的地位。想必大家此时会有疑惑，这本书的主角是React Hooks，React使用率高，并不代表React Hooks的使用率就高呀！为此笔者在几个前端技术群做了一个问卷调查，调查的结果大致如下页图所示。

基于上面两个问卷调查，笔者决定写一本React Hooks实践指导书。因为上面的调查说明读者需要这样一本书，而且有越来越多的人正在加入React Hooks的阵营。当然，还有一个更重要的原因：网络上关于React Hooks的学习资料相对匮乏，现有的资料大多只是对React Hooks进行概念性介绍，而实操性介绍很少。读者如果通过这些资料来入门React Hooks，不仅会浪费大量时间，而且容易产生错误理解，走入歧途。学习一门新技术，如果开始的理解就是错误的，那么随着后续的不断使用，会连锁出现理解错误。

笔者经常遇到React Hooks新人在技术交流群里问技术难点问题，从其言语之中能够感受到他们的焦虑。笔者在帮助他们解决问题时提到自己想写一本关于React Hooks的书，他们听后都非常激动，并且不断鼓励笔者，这让笔者下定决心把这本书写好。

【本书适用人群】

想提升自己、为进入大厂做准备的前端开发人员。

想规范项目开发的前端开发人员。

其他想学习React Hooks的前端开发人员。

对前端有兴趣的服务端开发人员。

【本书能给你带来什么】

学习一门技术最好的方式是带着需求、带着目的学习。1000次理论讲解可能都比不过一次实践。基于这个观点，本书不从理论层面介绍React Hooks，而从实战层面讲解React Hooks的使用方法，其中会穿插一些必要的理论介绍。

本书不仅讲解了React Hooks的企业级实践，而且讲解了React Hooks与React Redux的配合使用。为了提升读者的知识广度，本书还通过一个实际案例（第7章）完整呈现了大厂企业级项目的上线发布流程。

本书主要从如下7个方面进行讲解，帮助读者真正学会并掌握React Hooks技术。

初识React Hooks：主要为了让读者初步认识React Hooks，了解与其他前端框架相比React Hooks有什么独特的优势及特点。

基础环境搭建：从0到1搭建React Hooks项目开发环境，手写Webpack配置。

核心API原理解读与实践：结合实际场景对React Hooks的每个API进行讲解，帮助读者掌握React Hooks的基础使用方法，并知道如何在各种场景下合理使用React的每个API，让读者知其然亦知其所以然。

React Redux原理解读与实践：解读Redux源码，并且通过实践案例学习React Redux。

React Hooks常见问题解析：解析一些真实开发场景下的问题，通过实例化讲解，让读者在实际开发中解决此类问题时游刃有余。

常见的企业级Hooks解读：分享一些常用优秀的Hooks库，以提升读者的开发效率，并讲解这些Hooks库的具体使用场景与使用方式。

企业级React Hooks项目架构与实战：通过一个实际的电商后台管理系统项目，搭建一个大型企业级通用开发环境，讲解一些标准化的目录，以及标准化的AJAX请求封装、组件封装、权限封装、通用工具函数封装、企业级开发规范等内容。

通过对本书的学习和实战，读者将不仅能掌握React Hooks的企业级开发实战技巧，还能深入理解React Hooks，从而写出高质量的企业级代码。

【如何阅读本书】

阅读本书需要掌握的基础知识有JavaScript、ES6、CSS、HTML、Webpack、网络基础、React基础。其实不仅是阅读本书，学习React Hooks这门技术需要的基础知识也只有这么多。

那么具体如何阅读本书呢？

1. 阅

读一本技术书和读一本小说的区别还是很大的。读小说最重要的是专注，而读技术书，除了专注，还需要思考和实践（写代码）。这里所说的思考是指带着问题去学习。带着问题去学习，即使是学习一个简单的API也会有不一样的收获。比如，我们学习React Hooks时就可以带着如下问题：

为什么使用React Hooks的人越来越多而使用Class的人越来越少？

React Hooks和React Class有什么区别？

读者只有带着问题去学习，才会产生属于自己的理解，否则对新知识的理解会一直停留在使用层面。当然，上述问题仅是举例，大家应该列出自己的问题。

那么这里所说的实践指的又是什么呢？在阅读本书的时候，请务必动手实现每一章的代码。即使看似很简单的代码，笔者也建议读者动手写一遍。自己手写过后，再对着代码阅读书中对应的文字解释，然后思考代码为什么这么写，在实际开发中要如何用，这样就会很快学会对应的内容。

2. 练

记住，代码是写出来的，不是看或者听出来的！无论看书还是看视频，都要自己动手把相关的代码写出来。比如，阅读完本书以后，会发现自己手中有大量的代码（学习过程中写了很多代码），这个时候应该把这些代码再重新写十几遍。此时脑中留下的就只有代码及其逻辑了，而不是那些枯燥的文字。只有手上真真切切有了一个可运行的企业级的项目架构，才算是真正完成了对本书的阅读和学习！

3. 运用

笔者虽然经历过很多实战项目，但是从来没有放弃对好代码的收集，并经常“偷偷”阅读同事的代码和项目架构，“偷偷”把同事的项目代码、项目架构和自己的做对比，然后取其精华，去其糟粕。笔者也会把自己的代码架构融入他人的架构中，吸收他人好的架构模式。只有把自己写过的代码运用到真实的项目场景中去，多对比、多使用，才会更好地理解代码的好与坏。对本书的学习也是如此，大家除了要随着本书写一遍书中的代码外，还要自己去实现一遍，然后与本书提供的代码进行比较，经过优化后再把自己的代码运用到实际项目中。

另外有一点要提醒大家注意，第1～6章中所涉案例均采用JavaScript语言编写，而第7章为了更加贴近实际开发需求，采用TypeScript语言编写。