小册链接：《玩转 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. 掌握函数式编程**，用于工作，享受便利。

• communication：开篇几种方式以及源码部分的代码
• basic：基础模块（v16 v18 官方 Hooks）
• hooks：所有自定义 Hooks 代码
• hooksView：所有自定义 Hooks 代码使用示例

感谢各位小伙伴的支持，如果在阅读过程中有什么问题欢迎大家加我微信，交个朋友，微信：domesyPro, 也可以关注笔者的公众号：杜杜的全栈之旅，一起来玩转 React Hooks 吧～