React Hooks开发实战
上QQ阅读APP看书,第一时间看更新

Preface
前言

为什么要写本书

曾几何时,前端圈盛传这样一句话:“小公司用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语言编写。

致谢

本书能够顺利完成,首先需要感谢前端开发这个行业,这个行业激发了笔者的热情,也给了笔者很好的发展。在这里笔者要由衷感谢前端技术的领头人,也是笔者在前端领域的第一位导师——大漠穷秋。

另外还要感谢正在阅读本书的各位读者,大家对笔者的关注和肯定,才是真正促成本书出版的原因。

希望前端越来越好,互联网越来越好。