内容简介
本书以丰富的实例对React的底层原理与应用进行了细致的讲解,具体内容包括React的快速入门,React组件的状态、通信与生命周期,React路由,React Hooks,状态管理,基于Nest或Midway的全栈化方案,以及两个React综合实战项目——搭建React组件库和UI自动化测试平台。
本书结构清晰,内容由浅入深,适合任何对React感兴趣,并计划深入学习React的读者。
目录
第1章 React快速入门 001
1.1 传统前端开发到现代前端架构 001
1.2 使用React的理由 002
1.2.1 虚拟DOM 004
1.2.2 diff算法 007
1.2.3 key 010
1.3 ReactDOM 015
1.3.1 react-dom与react的关系 017
1.3.2 组件中的状态响应 019
1.3.3 React基本引入方式 020
1.3.4 开箱即用的React引入 022
1.3.5 Vite快速初始化 023
思考题 025
第2章 组件与视图渲染 027
2.1 React组件初探 027
2.1.1 类组件 028
2.1.2 函数组件 030
2.2 组件状态与通信 030
2.2.1 state 031
2.2.2 props 036
2.2.3 props导致的更新 040
2.2.4 父传子通信 045
2.2.5 子传父通信 052
2.2.6 兄弟组件通信 053
2.2.7 跨组件分层通信 057
2.3 组件生命周期 061
2.3.1 类组件生命周期 061
2.3.2 函数组件生命周期 066
2.4 遍历渲染 067
2.4.1 遍历渲染对象 067
2.4.2 遍历渲染数组 069
2.5 React事件机制 071
思考题 073
第3章 React Router 074
3.1 配置路由 077
3.2 React Router实现原理 079
3.3 React Router V6详解 085
3.4 路由守卫 091
3.5 哈希路由和历史路由 095
思考题 097
第4章 React Hooks深入浅出 098
4.1 useState 101
4.2 useState是同步的还是异步的? 106
4.3 useEffect 110
4.4 useLayoutEffect 112
4.5 useEffect和useLayoutEffect的区别 113
4.6 useRef 120
4.7 useMemo和useCallback 124
4.8 useContext 127
4.9 useReducer 130
4.10 自定义Hook 135
4.10.1 功能型Hook 137
4.10.2 业务型Hook 140
4.10.3 实现一个完整版useRequest 143
4.11 ahooks入门 158
思考题 164
第5章 React状态管理方案 165
5.1 主流状态管理方案 165
5.2 Redux 170
5.3 react-redux 174
5.4 实现一个简易版Redux 178
思考题 184
第6章 全栈化与Serverless 185
6.1 Nest.js快速入门 186
6.2 数据库连接和初始化 208
6.3 快速构建CRUD 213
6.4 基于Nest.js的RBAC权限控制系统实现 216
6.5 JWT登录及伪造请求解决方案 224
6.6 跨端扫码登录 237
6.7 Midway.js入门 242
6.8 Midway.js实现注册、登录、鉴权 252
思考题 262
第7章 企业级React项目实战 263
7.1 搭建React组件库 263
7.2 搭建UI自动化测试平台 269
思考题 279
结语 280
前言/序言
React是一个用于构建用户界面的开源JavaScript库。其提供的组件化开发模式、虚拟DOM等为交互式用户界面的开发提供了自由、快捷、高性能的开发体验,因而在Web开发中得到了广泛的认可,并成为众多企业级应用的首选。
对比众多的React教程资源,本书并不局限于React的简单使用,还关注React相关技术的实现原理,通过深挖源码的设计逻辑,并结合实践经验与丰富示例,帮助读者更直观地理解并实现应用。通过本书,读者将系统性地了解React的方方面面,从基础知识到进阶技巧,从路由管理到状态管理,再到全栈开发,帮助读者全面理解并掌握React。
以下是本书各章的主要内容。
第1章:主要介绍前端框架的一些基础知识,以及React的优势及特点等。读者将通过简单的实例快速了解React的使用,以及ReactDOM相关知识。
第2章:围绕React组件相关知识展开,包括组件状态与通信、生命周期,以及React的事件机制等内容。读者将了解到类组件和函数组件的定义、使用方法和最佳实践。
第3章:介绍如何在React应用中使用路由,以及路由的实现原理、路由守卫等内容。
第4章:介绍React 16版本之后的核心概念——Hook,读者将会学习到React的基本内置Hook、主流开源库的Hook,以及如何自定义地实现一些常用Hook。
第5章:介绍React项目中主流的状态管理库,尤其是基于Redux的react-redux的应用。
第6章:主要讲解如何基于Nest.js和Midway.js成为一个全栈开发者,包含一些后端的知识以及前后端联调的知识点。
第7章:基于React的两个综合实战项目——React组件库和UI自动化测试平台。
希望通过本书的学习,读者不仅能掌握React的核心思想与技术细节,还能够培养独立解决问题的能力,为将来的职业生涯打下坚实的基础。
前端开发领域发展迅速,由于编者的水平与认识存在局限性,书中难免存在疏漏,敬请读者批评指正。
编著者