主要内容 ●构建 可调用React功能的函数组件 ●管理本地状态、共享状态以及应用程序状态 ●学习内置hook、自定义hook以及第三方hook ●利用React Query加载、 更新和缓存数据 ●利用代码 分割和React Suspense请求数据并提升页面体验

第Ⅰ部分 React Hooks介绍及应用 第1章 逐渐演进的React 3 1.1 什么是React 3 1.1.1 用组件构建UI 4 1.1.2 同步状态和UI 6 1.1.3 理解组件的类型 9 1.2 React中的新增功能 11 1.3 可以为函数式组件添加 状态的React Hooks 12 1.3.1 有状态的函数式组件： 更少的代码，更好的 组织结构 12 1.3.2 自定义hook：更易于 代码复用 14 1.3.3 第三方的hook提供了 完备的、经过良好测试 的功能 17 1.4 通过Concurrent模式和 Suspense获得更好的UX 18 1.4.1 Concurrent模式 19 1.4.2 Suspense 20 1.5 全新的React发布渠道 21 1.6 本书读者对象 21 1.7 开始吧 22 1.8 本章小结 22 第2章 使用useState hook管理组件 的状态 23 2.1 搭建预订管理应用程序 24 2.1.1 通过create-react-app 生成应用程序的框架 26 2.1.2 编辑四个关键文件 27 2.1.3 为应用程序添加数据库 文件 30 2.1.4 创建页面组件和 UserPicker.js文件 31 2.2 通过useState存储、使用和 设置值 32 2.2.1 给变量赋新值并不会 更新UI 33 2.2.2 调用useState返回一个值 ���一个updater函数 36 2.2.3 调用updater函数替换 之前的状态值 40 2.2.4 将函数传递给useState 作为初始值 43 2.2.5 设置新状态时需要使用 之前的状态 44 2.3 多次调用useState以处理 多个状态值 46 2.3.1 使用下拉菜单设置 状态 46 2.3.2 使用复选框设置状态 49 2.4 复习函数式组件概念 52 2.5 本章小结 55 第3章 使用useReducer hook 管理组件的状态 57 3.1 在响应一个事件时更新 多个状态值 58 3.1.1 不可预测的状态变化会 将用户带离焦点 58 3.1.2 通过可预测的状态变化 让用户沉浸在电影中 59 3.2 通过useReducer管理更 复杂的状态 61 3.2.1 使用reducer及一个预 定义的action集更新 状态 62 3.2.2 为BookablesList组件 构建reducer 64 3.2.3 使用useReducer访问组件 状态并分派action 67 3.3 通过函数生成初始状态 70 3.3.1 引入WeekPicker组件 71 3.3.2 创建用以处理日期和 星期的工具函数 72 3.3.3 构建帮助组件管理 日期的reducer 73 3.3.4 向useReducer hook传递 初始化函数 74 3.3.5 使用WeekPicker更新 BookingsPage 75 3.4 复习useReducer的相关 概念 76 3.5 本章小结 79 第4章 处理副作用 81 4.1 通过简单示例探讨 useEffect API 82 4.1.1 在每次渲染后运行副 作用 82 4.1.2 仅当组件被挂载时运行 副作用 84 4.1.3 通过返回一个函数清理 副作用 86 4.1.4 通过指定依赖项控制 effect的运行时间 88 4.1.5 总结调用useEffect hook 的方式 91 4.1.6 在浏览器重绘之前调用 useLayoutEffect运行 effect 91 4.2 获取数据 92 4.2.1 新建一个db.json文件 92 4.2.2 设置JSON服务器 92 4.2.3 通过useEffect hook获取 数据 94 4.2.4 使用async和await 96 4.3 获取BookablesList组件的 数据 97 4.3.1 测试数据加载的过程 97 4.3.2 更新reducer以管理加载 中状态和错误状态 98 4.3.3 创建一个用于加载 数据的辅助函数 100 4.3.4 加载可预订对象 102 4.4 本章小结 103 第5章 使用useRef hook管理组件 状态 105 5.1 更新状态但不触发重新 渲染 106 5.1.1 对比useState和useRef 在更新状态值时的 区别 106 5.1.2 调用useRef 108 5.2 在ref中保存计时器ID 109 5.3 保存DOM元素的引用 112 5.3.1 在事件响应中将焦点 设置到指定元素上 112 5.3.2 利用ref控制文本框 115 5.4 本章小结 118 第6章 管理应用程序的状态 119 6.1 向子组件传递共享状态 120 6.1.1 通过设置子组件的prop 传递父组件的状态 120 6.1.2 从父组件接收状态 作为prop 121 6.1.3 从父组件接收updater 函数作为prop 123 6.2 拆分组件 125 6.2.1 将组件视为大型应用 程序的一部分 125 6.2.2 在一个页面上组织 多个组件 126 6.2.3 创建BookableDetails 组件 127 6.3 共享useReducer返回的 状态和dispatch函数 129 6.3.1 在BookablesView组件 中管理状态 130 6.3.2 从reducer中删除 一个action 131 6.3.3 在BookablesList组件 中接收状态和dispatch 函数 131 6.4 共享useState返回的状态 和updater函数 134 6.4.1 在BookablesView组件中 管理选定的可预订 信息 135 6.4.2 在BookablesList中接收 可预订信息和updater 函数 136 6.5 使用useCallback传递函数 以避免重复定义 141 6.5.1 使用prop传入的函数 作为依赖项 142 6.5.2 使用useCallback hook 维护函数的标识 143 6.6 本章小结 144 第7章 使用useMemo管理 性能 147 7.1 厨子不喜欢制作一人份的 小蛋糕 148 7.1.1 使用高开销算法生成 变位词 149 7.1.2 避免多余的函数 调用 151 7.2 通过useMemo记忆化 高开销函数 152 7.3 在Bookings页面上组织 组件 153 7.3.1 使用useState管理选定的 可预订对象 155 7.3.2 使用useReducer和useState管理选定的星期和预订 信息 155 7.4 使用useMemo**创建 预订信息网格组件 158 7.4.1 生成时间段和日期的 网格 158 7.4.2 生成预订信息的查询 对象 161 7.4.3 提供数据加载函数 getBookings 163 7.4.4 创建BookingsGrid组件 并调用useMemo 164 7.4.5 在useEffect中获取数据 时处理多个响应竞争 的情况 167 7.5 本章小结 172 第8章 使用Context API管理 状态 175 8.1 从上层的组件树中获取 状态 176 8.1.1 当页面**加载时显示 一条行为召唤的 消息 177 8.1.2 当用户选定预订信息时 显示预订信息详情 178 8.1.3 显示一个用于编辑用户 预订信息的按钮—— 问题 179 8.1.4 显示一个用于编辑用户 预订信息的按钮—— 解决方案 180 8.2 使用自定义的provider和 多个context 185 8.2.1 将对象用作context provider 的值 186 8.2.2 将状态移到自定义 provider中 187 8.2.3 使用多个context 191 8.2.4 为context指定一个 默认值 195 8.3 本章小结 195 第9章 创建自定义hook 197 9.1 将功能提取到自定义 hook中 199 9.1.1 重新组织通用功能 201 9.1.2 在组件外部声明 自定义hook 202 9.1.3 在自定义hook中调用 自定义hook 203 9.2 遵循hook的规则 205 9.2.1 仅在组件的*顶层 调用hook 206 9.2.2 只从React函数式组件中 调用hook 206 9.2.3 使用ESLint插件检查 hook的规则 206 9.3 更多关于自定义hook的 示例 207 9.3.1 使用useWindowSize hook 获取窗口尺寸 207 9.3.2 使用useLocalStorage hook 获取/设置值 209 9.4 使用自定义hook消费 context值 210 9.5 使用自定义hook封装数据 请求 213 9.5.1 开发useFetch hook 213 9.5.2 使用useFetch hook返回 的data、status和error 属性 214 9.5.3 创建专用的数据请求 hook：useBookings 216 9.6 本章小结 220 第10章 使用第三方hook 223 10.1 利用React Router访问 URL中的状态 224 10.1.1 设置路由并开启嵌套 路由功能 225 10.1.2 为Bookables页面添加 嵌套的路由 226 10.1.3 利用useParams hook 获取URL参数 227 10.1.4 使用useNavigate hook 导航 229 10.2 获取和设置查询字符串中 的查询参数 233 10.2.1 从查询字符串获取 查询参数 234 10.2.2 设置查询字符串 239 10.3 使用React Query让数据 获取过程更流畅 242 10.3.1 React Query简介 243 10.3.2 组件可访问React Query 的client实例 245 10.3.3 使用useQuery获取 数据 245 10.3.4 访问查询缓存中的 数据 248 10.3.5 使用useMutation更新 服务端状态 251 10.4 本章小结 254 第Ⅱ部分 揭秘React Concurrent特性 第11章 利用Suspense进行代码 分割 259 11.1 利用import函数动态导入 代码 260 11.1.1 新建Web页面并在 单击按钮时加载 JavaScript 260 11.1.2 默认导出和命名 导出 261 11.1.3 使用静态导入 加载JavaScript 261 11.1.4 调用import函数动态 加载JavaScript 262 11.2 利用lazy和Suspense动态 导入组件 264 11.2.1 利用lazy函数将组件 包装成懒加载 组件 264 11.2.2 利用Suspense组件 声明回退内容 267 11.2.3 理解lazy和Suspense 组件协同工作的 方式 270 11.2.4 根据路由进行代码 分割 271 11.3 利用错误边界捕获 异常 273 11.3.1 在React文档中查看 错误边界的示例 274 11.3.2 开发一个自定义错误 边界 275 11.3.3 从异常中恢复 277 11.4 本章小结 278 第12章 整合数据请求和 Suspense 281 12.1 使用Suspense请求 数据 282 12.1.1 封装promise并上报 其状态 283 12.1.2 利用promise状态 整合Suspense 284 12.1.3 尽可能早地开始请求 数据 285 12.1.4 请求新的数据 286 12.1.5 从异常中恢复 289 12.1.6 阅读React文档 290 12.2 整合React Query、Suspense和错误边界 292 12.3 使用Suspense加载 图片 294 12.3.1 使用React Query 和Suspense提供图片 加载回退UI 295 12.3.2 利用React Query提前 请求图片和数据 297 12.4 本章小结 299 第13章 实验特性：useTransition、useDeferredValue和 SuspenseList 301 13.1 在不同状态间更顺滑地 过渡 302 13.1.1 利用useTransition 避免状态退化 303 13.1.2 利用isPending为用户 提供反馈 304 13.1.3 为通用组件添加过渡 特性 306 13.1.4 利用useDeferredValue 保存旧值 307 13.2 使用SuspenseList管理多个回退UI 309 13.2.1 显示多种来源的 数据 310 13.2.2 利用SuspenseList控制 多个回退UI 311 13.3 Concurrent模式及 未来 313 13.4 本章小结 314