-
内容大纲
使用React Hooks后,你很快就会发现,代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks,可以将组件分成多个函数、管理状态和副作用,并且不必声明类即可调用React内置的功能。而且,上述所有的操作都不涉及重新调整组件的层级。
本书将指导你使用hook开发性能优秀、可复用度高的React组件。首先,你将学习如何使用hook创建组件代码。接下来,你会亲自实现一个资源预订应用程序,这个示例演示了如何管理本地状态、应用程序状态以及类似请求数据之类的副作用。书中的代码示例以及图表可帮助你更加轻松地学习hook。
主要内容:
构建可调用React功能的函数组件;
管理本地状态、共享状态以及应用程序状态;
学习内置hook、自定义hook以及第三方hook;
利用React Query加载、更新和缓存数据;
利用代码分割和React Suspense请求数据并提升页面体验。 -
作者介绍
约翰·拉森(John Larsen),从20世纪80年代开始从事编程工作,最开始是在Commodore VIC-20上编写Basic,随后又涉猎了Java、PHP、C#以及JavaScript等领域。他还编写了同样由曼宁出版社出版的Get Programming with JavaScript一书。他在英国当了25年的数学老师,为高中生讲授计算机知识,并为学校开发与教学类、学习类以及沟通有关的Web程序。 -
目录
第Ⅰ部分 React Hooks介绍及应用
第1章 逐渐演进的React
1.1 什么是React
1.1.1 用组件构建UI
1.1.2 同步状态和UI
1.1.3 理解组件的类型
1.2 React中的新增功能
1.3 可以为函数式组件添加状态的React Hooks
1.3.1 有状态的函数式组件:更少的代码,更好的组织结构
1.3.2 自定义hook:更易于代码复用
1.3.3 第三方的hook提供了完备的、经过良好测试的功能
1.4 通过Concurrent模式和Suspense获得更好的UX
1.4.1 Concurrent模式
1.4.2 Suspense
1.5 全新的React发布渠道
1.6 本书读者对象
1.7 开始吧
1.8 本章小结
第2章 使用useState hook管理组件的状态
2.1 搭建预订管理应用程序
2.1.1 通过create-react-app生成应用程序的框架
2.1.2 编辑四个关键文件
2.1.3 为应用程序添加数据库文件
2.1.4 创建页面组件和UserPicker.js文件
2.2 通过useState存储、使用和设置值
2.2.1 给变量赋新值并不会更新UI
2.2.2 调用useState返回一个值和一个updater函数
2.2.3 调用updater函数替换之前的状态值
2.2.4 将函数传递给useState作为初始值
2.2.5 设置新状态时需要使用之前的状态
2.3 多次调用useState以处理多个状态值
2.3.1 使用下拉菜单设置状态
2.3.2 使用复选框设置状态
2.4 复习函数式组件概念
2.5 本章小结
第3章 使用useReducer hook管理组件的状态
3.1 在响应一个事件时更新多个状态值
3.1.1 不可预测的状态变化会将用户带离焦点
3.1.2 通过可预测的状态变化让用户沉浸在电影中
3.2 通过useReducer管理更复杂的状态
3.2.1 使用reducer及一个预定义的action集更新状态
3.2.2 为BookablesList组件构建reducer
3.2.3 使用useReducer访问组件状态并分派action
3.3 通过函数生成初始状态
3.3.1 引入WeekPicker组件
3.3.2 创建用以处理日期和星期的工具函数
3.3.3 构建帮助组件管理日期的reducer
3.3.4 向useReducerhook传递初始化函数
3.3.5 使用WeekPicker更新BookingsPage
3.4 复习useReducer的相关概念
3.5 本章小结
第4章 处理副作用
4.1 通过简单示例探讨useEffectAPI
4.1.1 在每次渲染后运行副作用
4.1.2 仅当组件被挂载时运行副作用
4.1.3 通过返回一个函数清理副作用
4.1.4 通过指定依赖项控制effect的运行时间
4.1.5 总结调用useEffect hook的方式
4.1.6 在浏览器重绘之前调用useLayoutEffect运行effect
4.2 获取数据
4.2.1 新建一个db.json文件
4.2.2 设置JSON服务器
4.2.3 通过useEffect hook获取数据
4.2.4 使用async和await
4.3 获取BookablesList组件的数据
4.3.1 测试数据加载的过程
4.3.2 更新reducer以管理加载中状态和错误状态
4.3.3 创建一个用于加载数据的辅助函数
4.3.4 加载可预订对象
4.4 本章小结
第5章 使用useRef hook管理组件状态
5.1 更新状态但不触发重新渲染
5.1.1 对比useState和useRef在更新状态值时的区别
5.1.2 调用useRef
5.2 在ref中保存计时器ID
5.3 保存DOM元素的引用
5.3.1 在事件响应中将焦点设置到指定元素上
5.3.2 利用ref控制文本框
5.4 本章小结
第6章 管理应用程序的状态
6.1 向子组件传递共享状态
6.1.1 通过设置子组件的prop传递父组件的状态
6.1.2 从父组件接收状态作为prop
6.1.3 从父组件接收updater函数作为prop
6.2 拆分组件
6.2.1 将组件视为大型应用程序的一部分
6.2.2 在一个页面上组织多个组件
6.2.3 创建BookableDetails组件
6.3 共享useReducer返回的状态和dispatch函数
6.3.1 在BookablesView组件中管理状态
6.3.2 从reducer中删除一个action
6.3.3 在BookablesList组件中接收状态和dispatch函数
6.4 共享useState返回的状态和updater函数
6.4.1 在BookablesView组件中管理选定的可预订信息
6.4.2 在BookablesList中接收可预订信息和updater函数
6.5 使用useCallback传递函数以避免重复定义
6.5.1 使用prop传入的函数作为依赖项
6.5.2 使用useCallbackhook维护函数的标识
6.6 本章小结
第7章 使用useMemo管理性能
7.1 厨子不喜欢制作一人份的小蛋糕
7.1.1 使用高开销算法生成变位词
7.1.2 避免多余的函数调用
7.2 通过useMemo记忆化高开销函数
7.3 在Bookings页面上组织组件
7.3.1 使用useState管理选定的可预订对象
7.3.2 使用useReducer和useState管理选定的星期和预订信息
7.4 使用useMemo高效创建预订信息网格组件
7.4.1 生成时间段和日期的网格
7.4.2 生成预订信息的查询对象
7.4.3 提供数据加载函数getBookings
7.4.4 创建BookingsGrid组件并调用useMemo
7.4.5 在useEffect中获取数据时处理多个响应竞争的情况
7.5 本章小结
第8章 使用ContextAPI管理状态
8.1 从上层的组件树中获取状态
8.1.1 当页面首次加载时显示一条行为召唤的消息
8.1.2 当用户选定预订信息时显示预订信息详情
8.1.3 显示一个用于编辑用户预订信息的按钮问题
8.1.4 显示一个用于编辑用户预订信息的按钮解决方案
8.2 使用自定义的provider和多个context
8.2.1 将对象用作contextprovider的值
8.2.2 将状态移到自定义provider中
8.2.3 使用多个context
8.2.4 为context指定一个默认值
8.3 本章小结
第9章 创建自定义hook
9.1 将功能提取到自定义hook中
9.1.1 重新组织通用功能
9.1.2 在组件外部声明自定义hook
9.1.3 在自定义hook中调用自定义hook
9.2 遵循hook的规则
9.2.1 仅在组件的最顶层调用hook
9.2.2 只从React函数式组件中调用hook
9.2.3 使用ESLint插件检查hook的规则
9.3 更多关于自定义hook的示例
9.3.1 使用useWindowSizehook获取窗口尺寸
9.3.2 使用useLocalStoragehook获取/设置值
9.4 使用自定义hook消费context值
9.5 使用自定义hook封装数据请求
9.5.1 开发useFetchhook
9.5.2 使用useFetchhook返回的data、status和error属性
9.5.3 创建专用的数据请求hook:useBookings
9.6 本章小结
第10章 使用第三方hook
10.1 利用ReactRouter访问URL中的状态
10.1.1 设置路由并开启嵌套路由功能
10.1.2 为Bookables页面添加嵌套的路由
10.1.3 利用useParamshook获取URL参数
10.1.4 使用useNavigatehook导航
10.2 获取和设置查询字符串中的查询参数
10.2.1 从查询字符串获取查询参数
10.2.2 设置查询字符串
10.3 使用ReactQuery让数据获取过程更流畅
10.3.1 ReactQuery简介
10.3.2 组件可访问ReactQuery的client实例
10.3.3 使用useQuery获取数据
10.3.4 访问查询缓存中的数据
10.3.5 使用useMutation更新服务端状态
10.4 本章小结
第Ⅱ部分 揭秘React Concurrent特性
第11章 利用Suspense进行代码分割
11.1 利用import函数动态导入代码
11.1.1 新建Web页面并在单击按钮时加载JavaScript
11.1.2 默认导出和命名导出
11.1.3 使用静态导入加载JavaScript
11.1.4 调用import函数动态加载JavaScript
11.2 利用lazy和Suspense动态导入组件
11.2.1 利用lazy函数将组件包装成懒加载组件
11.2.2 利用Suspense组件声明回退内容
11.2.3 理解lazy和Suspense组件协同工作的方式
11.2.4 根据路由进行代码分割
11.3 利用错误边界捕获异常
11.3.1 在React文档中查看错误边界的示例
11.3.2 开发一个自定义错误边界
11.3.3 从异常中恢复
11.4 本章小结
第12章 整合数据请求和Suspense
12.1 使用Suspense请求数据
12.1.1 封装promise并上报其状态
12.1.2 利用promise状态整合Suspense
12.1.3 尽可能早地开始请求数据
12.1.4 请求新的数据
12.1.5 从异常中恢复
12.1.6 阅读React文档
12.2 整合ReactQuery、Suspense和错误边界
12.3 使用Suspense加载图片
12.3.1 使用ReactQuery和Suspense提供图片加载回退UI
12.3.2 利用ReactQuery提前请求图片和数据
12.4 本章小结
第13章 实验特性:useTransition、useDeferredValue和SuspenseList
13.1 在不同状态间更顺滑地过渡
13.1.1 利用useTransition避免状态退化
13.1.2 利用isPending为用户提供反馈
13.1.3 为通用组件添加过渡特性
13.1.4 利用useDeferredValue保存旧值
13.2 使用SuspenseList管理多个回退UI
13.2.1 显示多种来源的数据
13.2.2 利用SuspenseList控制多个回退UI
13.3 Concurrent模式及未来
13.4 本章小结
同类热销排行榜
- C语言与程序设计教程(高等学校计算机类十二五规划教材)16
- 电机与拖动基础(教育部高等学校自动化专业教学指导分委员会规划工程应用型自动化专业系列教材)13.48
- 传感器与检测技术(第2版高职高专电子信息类系列教材)13.6
- ASP.NET项目开发实战(高职高专计算机项目任务驱动模式教材)15.2
- Access数据库实用教程(第2版十二五职业教育国家规划教材)14.72
- 信号与系统(第3版下普通高等教育九五国家级重点教材)15.08
- 电气控制与PLC(普通高等教育十二五电气信息类规划教材)17.2
- 数字电子技术基础(第2版)17.36
- VB程序设计及应用(第3版十二五职业教育国家规划教材)14.32
- Java Web从入门到精通(附光盘)/软件开发视频大讲堂27.92
推荐书目
-
孩子你慢慢来/人生三书 华人世界率性犀利的一枝笔,龙应台独家授权《孩子你慢慢来》20周年经典新版。她的《...
-
时间简史(插图版) 相对论、黑洞、弯曲空间……这些词给我们的感觉是艰深、晦涩、难以理解而且与我们的...
-
本质(精) 改革开放40年,恰如一部四部曲的年代大戏。技术突变、产品迭代、产业升级、资本对接...