关 于 本 书

本书面向的读者是有经验的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版本之外的其他版本能够运行这部分的示例。

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