React Hooks实战 下载 pdf 百度网盘 epub 免费 2025 电子书 mobi 在线

主要内容 ●构建 可调用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

John Larsen从20世纪80年代开始从事编程工作，开始是在Commodore VIC-20上编写Basic，随后又涉猎了Java、PHP、C#以及JavaScript等领域。他还编写了同样由曼宁出版社出版的Get Programming with JavaScript一书。他在英国当了25年的数学老师，为高中生讲授计算机知识，并为学校开发与教学类、学习类以及沟通有关的Web程序。

暂无出版社相关信息，正在全力查找中！

暂无相关书籍摘录，正在全力查找中！

在线阅读地址：React Hooks实战在线阅读

在线听书地址：React Hooks实战在线收听

在线购买地址：React Hooks实战在线购买

暂无原文赏析，正在全力查找中！

编辑推荐

使用React Hooks后，你很快就会发现，代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks， 可以将组件分成多个函数、管理状态和副作用，并且不必声明类即可调用React内置的功能。而且，上述所有的操作，都不涉及重新调整组件的层级。

《React Hooks实战》将指导你使用hook开发性能优秀、可复用度高的React组件。首先，你将学习如何使用hook创建组件代码。接下来，你会亲自实现一个资源预订应用程序，这个示例演示了如何管理本地状态、应用程序状态以及类似请求数据之类的副作用。书中的代码示例以及图表可帮助你更加轻松地学习hook。

前言

关 于 本 书

本书面向的读者是有经验的React开发者。本书介绍了目前React内置的hook特性，并展示了在开发应用程序时，如何在React函数式组件中使用hook管理组件内部状态，跨多组件管理状态，以及经过外部API同步组件状态。本书还演示了hook方法在封装、重用、简化组件代码、扩展性等方面的优势。同时，还探讨了React团队仍在研发的、更具实验性的Suspense和Concurrent模式。

本书读者对象

如果你之前使用过React，并且希望了解hook究竟能如何改进代码，怎样将代码从类组件迁移到函数式组件，如何在代码中整合Suspense和Concurrent模式以提升开发体验和用户体验，那么本书将会为你解答这些疑问。你应该具备使用create-react-app新建应用程序，并使用npm(或者Yarn)安装相关依赖的基础。本书的示例代码采用了现代JavaScript语法和模式，例如解构、默认参数、扩展运算符、可选链运算符。因此，虽然这些语法在次被使用时会有简短的介绍，但是还是希望你对它们越熟悉越好。

本书的结构：路线图

本书包括两部分，共13章。

第Ⅰ部分介绍了React Hooks的语法和使用方法，这是React内置的，非实验且稳定的特性。为你展示了如何开发自己的hook，以及如何使用现有React第三方库提供的hook。

●  第1章会从React近的一些更新以及即将进行的一些改动开始讲述，尤其会关注React Hooks如何帮助你组织、维护以及分享组件。

●  第2章介绍个hook——useState。组件可以使用useState管理状态，并在状态值发生变化时触发重新渲染。

●  有时候，多个状态之间会产生关联关系，其中一个状态变化会引起其他状态随之改变。第3章讲解的useReducer hook为你提供一种集中管理多个状态的方法。

●  React旨在令应用程序的状态与UI保持同步。在有些情况下，应用程序需要从其他地方获取状态，或者在文档之外显示状态，例如浏览器的标题中。当应用程序在组件范围之外执行副作用操作时，应当将这部分代码用useEffect hook包装起来，以便同步所有的代码块。第4章详细讨论useEffect。

●  第5章使用useRef hook在不引起重新渲染的情况下更新状态(如操作一个计时器的ID)以及维持页面中元素的引用，例如表单中的文本框。

●  应用程序由多个组件组成，第6章会带你研究多个组件之间共享状态的策略，如何通过prop向下传递状态；会向你展示如何共享useState和useReducer的updater(更新)函数，以及useReducer的dispatch(分派)函数；并且还会展示如何利用useCallback hook为函数创建不会被改变的引用。

●  有时候，组件会依赖函数以某种方式生成或者转换数据。如果这些函数需要执行相对较长的时间才能结束，你就会希望只有在必要时才调用它们。第7章将会展示如何利用 useMemo hook限制大开销函数的执行。

●  同一个状态值有时候会在应用程序中为多个组件共用。第8章解释了如何避免在多级组件间自上而下传递prop，使用React Context API以及useContext hook共享状态。

●  React Hooks仅仅是函数。你可以将调用这些hook的代码迁移到组件外的函数中。这类函数被称为自定义hook，它们可以在组件之间共享，也可以跨项目共享。第9章解释了其中的原因，并通过大量的示例指导你创建自定义hook，还将会重点阐述hook的规则。

●  主流的React库均已经升级到与hook协作的版本。第10章将会使用 React Router的第三方hook管理URL中的状态，同时还使用React Query轻松地将UI与存储在服务器的状态保持同步。

本书的第Ⅱ部分解释大型应用程序如何更加有效地加载组件，以及如何使用Suspense组件和错误边界将回退UI作为加载资源管理。随后，深入探讨一些要用于整合Suspense与数据加载的实验性API，后则是那些在Concurrent模式下运行的实验性API。

●  第11章讨论代码分割。我们利用React.lazy懒加载组件，当组件被懒加载时使用Suspense组件展示回退UI，当加载过程发生错误时利用错误边界展示回退UI。

●  在第12章中，我们将涉及更多的实验领域，看看如何将数据获取以及图片加载与Suspense整合在一起。

●  终，在第13章中，我们将会探索那些只能在Concurrent模式下运行的实验性API，包括useTransition和useDeferredValue这两个hook以及SuspenseList组件，它们都可以改进应用程序中状态变更时的用户体验。确切地说，它们还尚未确定终的工作方式，但是本章将会提前讲解它们试图解决的问题。

虽然，本书的主要示例是随着书中课程的深入逐步创建起来的，但是这并不妨碍你直接学一章或者某一个hook。如果你想单独运行某个代码示例，可以从代码仓库的对应分支中下载代码，然后运行即可。

上述章节还包括一系列的练习，便于我们实践所学的知识。这些练习大多数会让你将示例应用程序中某一个页面的功能在另外一个页面重复实现。例如，书中的示例先演示如何更新Bookables页面，然后再要求你在Users页面中执行同样的操作。实践是一种有效的学习策略，不过在必要的情况下，也可以直接查看代码仓库中已经写好的代码。

关于代码

在本书中，随着每一章的深入，我们将逐步创建一个可以运行的预订应用程序，并将其作为本书的示例。这个示例为我们讨论以及实践React Hooks提供了良好的依托。但请注意，本书的重点在于hook，而非这个预订应用程序，因此本书列出了大部分的代码，然而仍然有一些代码更新后并没有同步在书中，你可以从示例应用程序在GitHub的代码仓库中找到的代码。

书中一些简单的示例并不属于预订应用程序的一部分。这些代码，如果是基于React的，就会保存在CodeSandbox中；如果是基于原生JavaScript的，则会被保存在JS Bin中。本书的代码清单中列出了指向GitHub、CodeSandbox或者JS Bin的对应链接。

本书的示例均已在React 17.0.1下经过了测试。除了第13章，因为其中的示例使用了实验版React，所以无法保证除所在分支使用的React版本之外的其他版本能够运行这部分的示例。

可扫描封底二维码获取本书网上资源。