零、前言

React 是一个 JavaScript 库,用于构建高效和可扩展的 web 应用。React 由 Facebook 开发,用于许多大型 web 应用,如 Facebook、Instagram、Netflix 和 WhatsApp web。

React 16.8 版本中引入了 React 挂钩,解决了 React 项目中的许多常见问题。挂钩使组件不那么复杂,更简洁,更易于阅读和重构。此外,它们使许多 React 特性更易于使用和理解,并且我们避免了使用包装器组件。

这本书是学习英语的权威指南。您将学习 React 挂钩的所有方面,这些挂钩用于管理 React 组件中的状态和效果,以及通过挂钩使用其他 React 功能,例如上下文。通过实际示例,您将学习如何使用可扩展且易于理解的代码开发大规模高效的应用。

本书还深入研究了高级概念,例如将挂钩与 Redux 和 MobX 等库结合使用。此外,您还将了解何时以及如何有效地迁移现有项目以响应挂钩。

这本书是给谁的

本书面向具有 JavaScript 和 React 框架的任何专业水平的 web 开发人员。这本书还将迎合那些一直在迁移以应对其高级特性集和功能的开发人员。

这本书涵盖的内容

第一章介绍了 React 和 React 挂钩,涵盖了 React 和 React 挂钩的基本原理、它们是什么以及为什么使用它们。然后,我们通过引入状态挂钩作为类组件中 React 状态的替代方法来了解挂钩的功能。最后,我们介绍 React 提供的挂钩的种类,并介绍我们将在本书中学习的几个挂钩。

第 2 章使用状态挂钩,通过重新实现useState挂钩来解释挂钩是如何深入工作的。通过这样做,我们发现挂钩有一定的局限性。然后,我们将比较挂钩的重新实现与真实挂钩。此外,我们还介绍了替代的 hookapi,并讨论了它们存在的问题。最后,我们学习如何使用挂钩解决常见问题,例如条件挂钩和循环中的挂钩。

第 3 章使用 React 挂钩编写您的第一个应用,我们从前两章学到了什么,并通过使用 React 挂钩(特别是状态挂钩)开发博客应用将其付诸实践。在本章中,我们还将学习如何以良好的伸缩性构建 React 项目。

第 4 章使用简化器和效果挂钩,从学习简单状态挂钩开始,并在实践中使用它。我们将学习 React 库预定义的另外两个主要挂钩:Reducer 和 Effect 挂钩。我们首先学习何时应该使用减速机挂钩而不是状态挂钩。然后,我们学习如何将现有的状态挂钩转换为减速机挂钩,以了解这个概念。最后,我们将学习如何使用效果挂钩实现更高级的功能。

第 5 章实现了 React 上下文,解释了 React 上下文以及如何在我们的应用中使用它。然后,我们在博客应用中实现 React 上下文,以使用上下文挂钩提供主题功能和全局状态。

第 6 章实现请求和响应暂挂介绍了使用效果挂钩和状态或还原挂钩从具有挂钩的服务器请求资源。然后我们学习如何使用React.memo来防止不必要的组件重新渲染。最后,我们学习 React Suspense,它可以用于延迟渲染,直到满足条件为止,也称为延迟加载。

第 7 章使用挂钩进行路由解释了如何在我们的博客应用中使用挂钩实现路由。我们了解 Navi,这是 React 的一个路由库,它利用了挂钩和悬念。我们首先在应用中实现页面,然后定义路由,最后继续实现路由挂钩。

第 8 章使用社区挂钩说明 React 社区已经开发了各种使用挂钩的库。在本章中,我们将学习如何从社区实现各种挂钩,以及在哪里可以找到更多挂钩。我们首先了解输入处理挂钩。接下来,我们将学习如何用挂钩替换 React 生命周期方法。然后,我们将学习各种有用的挂钩以及使用挂钩进行响应性设计。此外,我们还将学习如何使用挂钩实现撤销/重做功能。最后,我们学习如何找到社区提供的其他挂钩。

第 9 章吊钩规则涵盖吊钩规则。掌握挂钩的规则对于构建我们自己的挂钩非常重要,我们将在下一章中进行介绍。我们还将深入了解挂钩的局限性,并发现需要注意的事项。最后,我们将学习如何使用过梁强制执行挂钩规则。

第 10 章构建自己的挂钩从挂钩的基本概念开始。我们现在要建造自己的挂钩。我们首先从博客应用的现有函数中提取一个自定义挂钩,然后学习如何使用自定义挂钩。接下来,我们学习如何在挂钩之间传递信息。最后,我们将学习 React Hooks API 和其他可用于构建我们自己的挂钩的挂钩。在本章结束时,我们的应用将完全由 hook 提供动力!

第 11 章从 React 类组件迁移,介绍 React 类组件的状态处理。我们首先用类组件实现一个简单的 ToDo 应用。然后,我们学习如何使用类组件将现有项目迁移到基于挂钩的实现。最后,我们将了解使用类组件与挂钩的权衡,以及高效迁移现有项目的策略。

第 12 章Redux 和 Hooks解释了 Redux 的状态处理。我们首先将现有的 ToDo 应用迁移到 Redux,然后学习如何使用带有挂钩的 Redux。此外,我们还将学习如何将现有的 Redux 应用迁移到挂钩。最后,我们将了解使用 Redux 的利弊。

第 13 章MobX 和挂钩涵盖了对 MobX 的状态处理。我们首先将现有的 ToDo 应用迁移到 MobX。然后我们学习如何使用 MobX 和 hook。此外,我们还将学习如何将现有的 MobX 应用迁移到 hook。最后,我们了解使用 MobX 的利弊。

*# 充分利用这本书

我们假设您已经以某种方式使用过 React,尽管这本书对于 React 的初学者来说也是可以理解的。

请注意,强烈建议您自己编写代码。不要简单地运行提供的代码示例。为了正确地学习和理解代码,自己编写代码是很重要的。但是,如果遇到任何问题,可以始终参考代码示例。

下载示例代码文件

您可以从您的账户www.packt.com下载本书的示例代码文件。如果您在其他地方购买了本书,您可以访问www.packtpub.com/support并注册,将文件通过电子邮件直接发送给您。

您可以通过以下步骤下载代码文件:

  1. 登录或注册www.packt.com
  2. 选择“支持”选项卡。
  3. 点击代码下载。
  4. 在搜索框中输入图书名称,然后按照屏幕上的说明进行操作。

下载文件后,请确保使用以下最新版本解压或解压缩文件夹:

  • WinRAR/7-Zip for Windows
  • 适用于 Mac 的 Zipeg/iZip/UnRarX
  • 适用于 Linux 的 7-Zip/PeaZip

该书的代码包也托管在 GitHub 上的https://github.com/PacktPublishing/Learn-React-Hooks 。如果代码有更新,它将在现有 GitHub 存储库中更新。

我们的丰富书籍和视频目录中还有其他代码包,请访问https://github.com/PacktPublishing/ 。看看他们!

下载彩色图像

我们还提供了一个 PDF 文件,其中包含本书中使用的屏幕截图/图表的彩色图像。您可以在这里下载:https://static.packt-cdn.com/downloads/9781838641443_ColorImages.pdf

行动中的代码

访问以下链接以查看正在运行的代码的视频:

http://bit.ly/2Mm9yoC

使用的惯例

本书中使用了许多文本约定。

CodeInText:表示文本中的码字、文件夹名称、文件名、文件扩展名、路径名、虚拟 URL 和用户输入。下面是一个示例:“JavaScript 类提供一个render方法,该方法返回用户界面(通常通过 JSX)。”

代码块设置如下:

class Example extends React.Component {

当我们希望提请您注意代码块的特定部分时,相关行或项目以粗体显示:

    constructor (props) {
        super(props)
        this.state = { name: '' }
        this.handleChange = this.handleChange.bind(this)
    }

任何命令行输入或输出的编写方式如下:

> npm run-script build

粗体:表示一个新术语、一个重要单词或您在屏幕上看到的单词。下面是一个例子:“在本章中,我们还将学习JSX以及ES6中引入的新 JavaScript 功能,直到ES2018。”

在代码块中,我们使用粗体格式突出显示代码中的更改。通常,我们使用粗体突出显示新代码。如果指定,我们还可以使用粗体格式指示应该删除代码的哪些部分。

Warnings or important notes appear like this. Tips and tricks appear like this.

联系

我们欢迎读者的反馈。

一般反馈:如果您对本书的任何方面有疑问,请在邮件主题中注明书名,并发送电子邮件至customercare@packtpub.com

勘误表:尽管我们已尽一切努力确保内容的准确性,但还是会出现错误。如果您在本书中发现错误,如果您能向我们报告,我们将不胜感激。请访问www.packtpub.com/support/errata,选择您的书籍,单击 errata 提交表单链接,然后输入详细信息。

盗版:如果您在互联网上发现我们作品的任何形式的非法复制品,请您提供我们的位置地址或网站名称,我们将不胜感激。请通过copyright@packt.com与我们联系,并提供该材料的链接。

如果您有兴趣成为一名作家:如果您对某个主题有专业知识,并且您有兴趣撰写或贡献一本书,请访问authors.packtpub.com

评论

请留下评论。一旦你阅读并使用了这本书,为什么不在你购买它的网站上留下评论呢?然后,潜在读者可以看到并使用您的无偏见意见做出购买决定,我们 Packt 可以了解您对我们产品的看法,我们的作者可以看到您对他们书籍的反馈。非常感谢。

有关 Packt 的更多信息,请访问Packt.com。*