玩转 React Hooks--掘金小册课程推荐/优惠

作者介绍

小杜杜，掘金签约作者。目前就职于一线跨境电商大厂。对 React 源码有过深入研究，并发布《深入 React，彻底搞懂 React》系列文章。

小册介绍

React 是如今应用最广泛、最受欢迎的前端开发库之一，不仅有着精简的 UI，而且非常容易上手。通过多年的迭代，其精妙的设计思想吸引了全世界网页开发者。最重要的是，React 在 2019 年 2 月发布的 16.8 版本中引入了 Hooks。

Hooks 带来的全新机制让人耳目一新，因为它拓展了 React 的开发思路，为 React 开发者提供了一种更方便、更简洁的选择。

在引入 Hooks 的概念后，函数组件既保留了原本的简洁，也具备了状态管理、生命周期管理等能力，在原来 Class 组件所具备的能力基础上，还解决了 Class 组件存在的一些代码冗余、逻辑难以复用等问题。因此，在如今的 React 中，Hooks 已经逐渐取代了 Class 的地位，成了主导。

而且，Hooks 相对于 Class 而言，更容易上手，其简洁性、逻辑复用性等特性深受开发者喜爱，可谓是前端界的"流量明星"，不止 React，Vue 3.0 、Preact、Solid.js 等框架也都选择加入 Hooks 的大家庭，前端的日常工作也在趋向于 Hooks 开发。

不过也有很多人有这样的疑问：Hooks 的上手难度并不高，有必要去系统学习吗？

首先，我们扪心自问下，自己真的掌握 Hooks 了吗？事实上，在实际的开发中，大多数开发者还停留在 useState、useEffect 基本使用上，对其他 API 并不了解，对整个 Hooks 的运行流程感到陌生，导致出现一些莫名其妙的 Bug。完全掌握 Hooks API，书写贴近业务、融入项目的 Hooks 是非常有必要的。

其次，系统学习 Hooks ，也可以作为一个突破口，帮助我们打破技术瓶颈期，更加深入进阶 React。比如函数式组件（本质是函数）在渲染和更新的时候，对所有的变量、表达式进行初始化，而 useState、useRef 仍然可以保留变量，这究竟是如何做到的？通过逐步的探索，才能体验到 React 的魅力。 我们可以通过这条线去串联整个 React 模块，然后逐一了解、攻破，实现进阶。

而且，在面试和工作中，常常遇到 Hooks 的时序问题、闭包问题、性能优化等问题。加强对 Hooks 的理解，去活用 Hooks 的特点，创造出一些赋能业务的自定义 Hooks，最终形成一套自己的体系，在面试中也会脱颖而出。

总之，相信在系统学习完 React Hooks 后，不但可以让我们的工作、面试更加轻松，还可以作为一把探索 React 源码的钥匙，完成技术的深入进阶。

在这本小册中，我将自己的学习经验和心得总结了出来，从“基础篇、原理篇、实践篇”三大方向 跟大家探讨 Hooks，在深入理解的基础上，融入工作中，享受 Hooks 带来的诸多好处。

• 基础篇：详解 React v16.8 和 v18 官方提供的 Hooks API 使用方法，结合 TS、Jest 详细分析如何书写自定义 Hooks，包括功能类、DOM 类、场景类等，共计 30+ 的自定义 Hooks 设计思路与实现。

• 源码篇：针对 React Hooks 中的核心 API 进行源码分析，并结合类组件中的一些 API，进行比较、辅助，从源码的角度去了解 React Hooks，一次性弄懂面试中遇到的问题。

• 实践篇：结合之前的模块，以实际的业务场景驱动，掌握解决实际问题的思考方式，利用自定义 Hooks 进行整体功能的实现，进行组件的封装、状态库的设计等。

小册整体设计如下思维导图所示：

你会学到什么？

1. 全面知悉 React 提供的 15 Hooks API 的使用和场景；
2. 手写 30+ 自定义 Hooks 的实现，全面掌握设计思想；
3. 了解 Hooks 源码，从根源上彻底解决现有的难点；
4. 掌握函数式编程思想，用于工作，享受便利。

问与答

问：这本小册只限于 React Hooks ？

答：会以 React Hooks 为核心，同时穿插其他相关知识作为辅助，帮助你更好地理解 Hooks。比如：讲自定义 Hooks 时会涉及 TS，讲 Hooks 运行机制时会提及 Fiber，讲 useMemo 会介绍 React 其他优化方案，讲 useRef 会介绍 createRef、ref 属性问题…… 总之，以 Hooks 为核心的内容会全部涉及到。

问：小册涉及到 TS、Jest、Fiber 等知识，这些都没有接触过，是否先要了解后才能学习小册？

答：不用担心没接触过，也不用了解，只需要保持一颗想要学习的心即可。小册所涉及的 TS、Jest 等知识都会有详细的解答。在学习 Hooks 的基础上，顺便掌握其他知识点。

适宜人群

1. 学过一些前端基础知识、React 零基础或刚接触 React 的同学；
2. 想要系统学习、深入进阶 React ，并且能应用于工作之中的同学；
3. 缺乏实际开发经验，对 Hooks 的应用场景不太理解的同学；
4. 想要攻克 React Hooks 面试知识点的同学。

阅读前的声明

• 本小册主要以学习为主，通过 creact-react-app 创建项目，环境为 v18.2，配置 TS，让代码规范起来，配置 Ant Design，让案例更加醒目；

• 本小册设计的源码为 React v18.2.0，方便大家更好了解、学习 React v18；

• 所涉及的辅助知识点不会太深，主要是辅助 Hooks，所以不用担心提前了解，只需要沉心阅读即可，相信一定能帮助到你；

• 所有的 Demo，我都已经整理到 GitHub 上，地址为：《玩转 React Hooks》-- Dome 项目，代码持续更新中，还请各位小伙伴多多支持。

名人推荐

更新日志

• 2023.07.03：将 17、18、19 三章表单内容合并为两章，增加一章 CheckCard 多选卡片组件的制作；

• 基础篇｜10 种 React Hooks API 的介绍和使用（v16 篇）

• 预习篇｜React 组件的通信和强化方式

• 基础篇｜5 种 React Hooks API 的介绍和使用（v18 篇）

• 基础篇｜自定义 Hooks 之 Jest（一）：如何测试自定义 Hooks？

• 源码篇｜全方面剖析 Ref

• 基础篇｜自定义 Hooks 之 Jest（二）：DOM 类 Hooks

• 基础篇｜自定义 Hooks 之 Jest（三）：场景类 Hooks

• 基础篇｜自定义 Hooks 开发：响应式的 useState

• 基础篇｜常用自定义 Hooks 开发

• 源码篇｜以 useState 的视角来看 Hooks 的运行机制

• 源码前置篇｜搞懂 Fiber 和并发

• 源码篇｜彻底搞懂 useMemo 和 useCallback

• 源码篇｜从 useEffect 的源码上解决闭包问题

• 实践篇｜表单组件设计（上）：整体设计与流程

• 源码篇｜深入探究 useTransition 和 useDeferredValue

• 源码篇｜探索 useSyncExternalStore 的神秘面纱

• 实践篇｜实现简易版的 react-redux

• 实践篇｜CheckCard：多选卡片

• 结语：是结束，也是开始

• 实践篇｜表单组件设计（下）：表单的规则与验证