"本书是一本专为前端开发读者打造的详细指南，旨在帮助读者全面掌握 React.js 技术，并提升开发
能力。本书从 React.js 基础概念入手，带领读者逐步深入学习 React 脚手架应用、 React 生命周期等核心
内容，助力读者建立对React.js 技术栈的整体认知和项目搭建能力。本书丰富的实例和经验分享有助于
读者掌握**实践，涵盖了 React 动画、 Redux、路由、 Hooks 等关键主题的深入解析，帮助读者在实
际开发中更加熟练地应用这些技术。此外，书中还包含企业官网项目实战案例，通过学习实际经验来提
升问题解决能力，为未来的开发工作做好准备。
无论你是初学者还是希望进阶成为 React.js 高手，都能在本书中找到启示和指引，一起踏上 React.js
之旅，探索编程的乐趣与挑战！"

目 录


第1章 JavaScript基础知识\t1
1.1 JavaScript构造函数\t1
1.1.1 原始构造函数\t1
1.1.2 构造函数中的实例属性和静态属性\t2
1.1.3 构造函数中的实例方法和静态方法\t3
1.2 ES6 class关键字创建类\t4
1.3 class类继承\t6
1.3.1 属性继承\t6
1.3.2 方法继承\t7
1.3.3 创建类的私有属性和方法\t8
1.4 深入解析JavaScript ES6展开运算符\t9
1.5 ES6数组迭代方法\t11
1.5.1 map()方法\t11
1.5.2 forEach()方法\t12
1.5.3 filter()方法\t14
1.5.4 some()方法\t15
1.5.5 every()方法\t16
1.5.6 reduce()方法\t17
1.6 ES6解构赋值\t18
1.7 箭头函数中的this指向\t20
第2章 React基础入门\t23
2.1 React简介\t23
2.1.1 React、Vue、Angular三大框架流行趋势\t24
2.1.2 React的优势\t24
2.2 Hello React开启你的React之旅\t25
2.3 React组件化开发\t27
2.4 渲染书籍列表案例\t29
2.5 计数器案例\t31
2.6 JSX语法详解\t32
2.6.1 JSX基本使用\t32
2.6.2 JSX中嵌入表达式\t34
2.6.3 JSX绑定属性\t35
2.6.4 动态设置class属性\t37
2.7 绑定this的三种方法\t39
2.8 事件参数传递\t42
2.9 菜单排他\t43
2.10 React条件渲染\t44
2.11 React列表渲染\t46
第3章 React脚手架应用\t49
3.1 安装create-react-app脚手架\t49
3.2 React脚手架项目目录结构及作用\t50
3.3 React脚手架渲染Hello React\t51
3.4 React函数式组件的定义及使用\t53
第4章 React生命周期\t55
4.1 认识生命周期\t55
4.2 componentDidMount()生命周期函数的应用\t56
4.3 componentDidUpdate()生命周期函数的应用\t58
4.4 componentWillUnmount()生命周期函数的应用\t59
第5章 组件通信\t62
5.1 组件嵌套\t62
5.2 父组件向子组件传递数据\t64
5.3 prop-types数据类型校验\t66
5.4 子组件向父组件传递数据\t67
5.5 组件通信选项卡案例\t70
5.6 children子元素模拟插槽\t74
5.7 props模拟插槽\t75
5.8 模拟作用域插槽\t76
5.9 Context数据传递\t79
5.10 事件总线\t82
第6章 React组件化开发\t85
6.1 setState()的作用以及用法\t85
6.2 组件性能优化shouldComponentUpdate\t87
6.3 组件性能优化PureComponent\t89
6.4 函数组件性能优化\t91
6.5 组件中state数据不可变性原则\t92
6.6 使用ref获取DOM的三种方式\t93
6.7 ref获取组件\t95
6.8 受控组件与非受控组件\t97
6.9 Checkbox受控表单组件应用\t99
6.10 Select受控表单组件应用\t102
6.11 React高阶组件\t104
6.12 高阶组件的应用场景\t106
6.13 高阶组件应用案例\t107
6.14 Portals的应用\t109
6.15 Fragment组件\t110
第7章 React动画及CSS样式\t112
7.1 react-transition-group动画库\t112
7.2 CSSTransition生命周期函数\t115
7.3 SwitchTransition动画\t116
7.4 TransitionGroup动画\t118
7.5 在React中如何引入CSS\t120
7.5.1 内联式CSS\t120
7.5.2 CSS文件引入\t122
7.5.3 CSS Module\t123
7.5.4 CSS in JS\t124
7.5.5 styled-components的数据传递和动态样式设置\t126
7.5.6 添加class属性\t127
第8章 Redux\t130
8.1 Redux简介\t130
8.2 Redux订阅与取消订阅\t132
8.3 调用函数生成action对象\t133
8.4 react-redux库的应用\t135
8.5 Redux异步请求数据\t138
8.6 reduce-thunk中间件的应用\t141
8.7 Redux模块拆分\t145
8.8 Redux Toolkit的应用\t146
第9章 React-Router\t150
9.1 路由的基本应用\t150
9.2 NavLink的应用\t152
9.3 Navigate重定向导航组件\t154
9.4 配置Not Found页面\t156
9.5 嵌套路由\t157
9.6 链式路由跳转\t159
9.7 高阶组件实现在class组件中使用useNavigate()\t161
9.8 动态路由参数传递\t163
9.9 路由查询参数传递\t165
9.10 抽离路由匹配规则模块\t167
9.11 懒加载与路由分包\t169
第10章 React Hooks\t171
10.1 体验Hooks\t171
10.2 useState详解\t174
10.3 Redux Hook\t175
10.4 shallowEqual性能优化\t177
10.5 useEffect Hook\t179
10.6 useContext Hook\t181
10.7 useRef Hook\t183
10.8 useMemo和useCallback Hook\t184
10.9 自定义Hook\t187
10.10 使用第三方Hook\t191
第11章 项目实战\t193
11.1 项目概述\t193
11.2 创建React项目\t195
11.3 配置路径别名及less样式\t197
11.4 CSS样式重置\t199
11.5 配置Router\t200
11.6 封装Axios网络请求\t203
11.7 Header区域样式开发\t205
11.8 实现首页Banner区域和广告区域样式布局\t208
11.9 实现首页商家推荐区域和产品中心区域样式布局\t211
11.10 Footer区域样式开发\t215
11.11 发送网络请求获取首页数据\t217
11.12 父组件向子组件传值（一）\t220
11.13 父组件向子组件传值（二）\t222
11.14 产品列表页面布局\t224
11.15 渲染产品列表数据\t227
11.16 产品详情页面业务逻辑\t231
11.17 使用Ant Design实现轮播图模块\t234
第12章 React组件库Ant Design\t237
12.1 Ant Design简介及安装\t237
12.2 Ant Design按钮和图标\t238
12.3 Ant Design表单和输入框\t243
12.4 Ant Design导航菜单和布局\t246
12.5 Ant Design数据展示和表格\t248
12.6 Ant Design弹窗和通知\t251
12.7 Ant Design图表和地图\t253
12.8 Ant Design自定义主题和样式定制\t256