深入浅出 React 状态管理库--掘金小册课程推荐/优惠

作者介绍

木木学长，前端开发工程师。曾就职于快手，目前就职于字节跳动，亿万级月活项目研发，对各类技术底层源码有着深厚的理解，多个开源状态管理库贡献者。

小册介绍

学习状态管理库对于处理大型和复杂的前端应用至关重要，因为它们帮助集中管理应用状态，确保数据的一致性和组件间的有效通信。通过状态管理，开发者可以更容易地追踪和调试应用状态，提高开发和维护的效率。此外，良好的状态管理还能提升应用的性能，减少不必要的重新渲染（re-render）。

绝大多数前端开发者的技能往往局限于应用层面。随着前端技术的快速迭代和更新，开发者又需要疲于重新去学习各类技术，那么对于一个前端开发者来说如何“破局”呢？或者说在这样一个环境下真正应该修炼的是什么？

对于一个前端开发者来说，一定要修炼广度和深度，这里就以状态管理库为例：

• 广度，即理解各类状态管理库方案的特点与不同，能够在不同业务场景和团队情况面前选择最合适的方案。

• 深度，即对状态管理库有源码级别的理解，熟练掌握调试工具，以及对相关 React 知识点也同样有着深入的理解。只有具备这种技能，才能够设计出很好的前端架构以及编写出更高质量的代码，在面对复杂的问题和 Bug 面前也能够应对自如。

相信所有前端开发工程师在日常开发中都会用到状态管理库（甚至可能不止一种），也许你也曾经思考过这些问题：

• 在调用状态管理库 API 时，是如何驱动 UI 完成更新的？
• 为什么在组件中打印的 console 会频繁地被调用，为什么有的时候又没有被调用？
• 为什么明明有了 React Context，我们还需要状态管理库？
• 我这么使用是否是正确的？是否符合状态管理库设计的哲学？
• 公司起了一个新的项目，我应该如何为这个项目进行技术选型？如何结合项目特点、团队情况选择最适合的状态管理库？
• 想学习和接触开源库的源码，但是不知道如何下手，应该选择什么库作为切入？
• 如何优化项目的性能，在状态管理库层面来尽量减少 re-render？
• 为什么状态可以在多个组件之间维持一致？
• React 19 来了，它会对状态管理库和整个社区带来什么影响？

这本小册将会帮助你解决以上全部疑问，一步一步揭开状态管理库神秘的面纱，并收获广度与深度，理解状态管理的方方面面，在完成学习之后，你将完全有能力自己独立创造出一款符合时代潮流的状态管理工具！

小册 大纲 如下：

小册包含了 React 状态管理相关的方方面面，系统化地带你从 0～1 实现整个架构设计，不仅仅是主流几个状态管理库的简单实现。

小册整体内容大致划分为 四大模块。

• 前言：通过该模块，你可以对状态管理库的现状与未来有更深入的理解，能够明晰如何根据团队与项目现状完成技术选型，以及掌握项目开始前的必备知识点。

• 项目建设：通过该模块你将具备工程化的能力，了解主流开源库除了实现它们的核心功能以外还需要做哪些事情。

• 主流库实现：一起实现四个当下流行并且符合未来趋势的 React 状态管理库，包括 Zustand、Jotai、Valtio 和 Tanstack Query。

• React 关联知识：将会学习到很多关联的 React 知识点，并深入它们的原理。

除此之外，小册还配备了大量可以直接调试的 codesandbox 案例代码，以方便大家学习和实操。

你会学到什么？

• 技术选型：鸟瞰技术“棋局”，明晰状态管理选型
• 深入源码：汲取精粹，手撕四大主流状态管理库
• 透彻底层：洞悉根本，手刃 Bug，助力代码实现
• 更进一步：融合己见，铸就潮流之下的状态艺术

适宜人群

• 希望系统学习 React 状态管理的同学；
• 正在从 0 到 1 搭建前端项目但是不知道如何技术选型的同学；
• 项目中正在使用某个库，希望进一步了解它原理的同学；
• 正在或者希望搭建开源库，但是不知道需要做什么的同学。

• 开篇：携手并进，创造出符合时代潮流的状态管理工具！

• 初识 Jotai：一个高性能原子化状态管理库

• Jotai 和 React Suspense：异步状态管理的优雅实践

• 手把手带你从 0～1 实现 mini-jotai

• 初识 Zustand：一个强大而灵活的状态管理库

• React 18 的并发挑战：如何解决状态 Tearing 问题？

• 手把手带你从 0～1 实现 Zustand

• 为你的状态管理库编写单元测试

• 发布你的第一个状态管理库！

• 状态管理库与 SSR：构建高性能服务器渲染 React 应用的策略与实践

• 总揽 React 状态管理库：如何在项目中合理的进行技术选型

• 项目搭建：从配置到 CI 的全方位指南

• 结语：小册的结束，也是新的开始

• React Context 性能挑战及其优化之道

• 探索 React 18 的并发渲染机制

• Jotai DevTools：深入 Hooks DevTools 实现

• 基于 Benny 对 Jotai 进行基准测试（Benchmark）

• 浅析 Race Condition（竞态）及其解决策略

• 前置知识：构建知识体系的基石

• 手把手带你从 0～1 实现 mini-valtio

• 初识 Valtio：探索高效的可变状态管理魔法

• TanStack Query DevTools：深入 UI DevTools 实现

• Docusaurus 与 Vercel：打造并部署你的官方文档站

• Zustand DevTools：深入 Extension DevTools 实现

• Immer：JavaScript 不可变数据的革命性管理

• 手把手带你从 0～1 实现 TanStack Query（上）

• 初识 TanStack Query：一个强大的异步状态管理库

• RSC（React Server Components）与 Tanstack Query

• 迎接变革：React 19 的新特性与对状态管理生态的影响解析（上）

• 番外篇：面试题讲解

• 手把手带你从 0～1 实现 TanStack Query（下）

• bailout：React性能优化的终极秘籍

• 迎接变革：React 19 的新特性与对状态管理生态的影响解析（下）

• 谈谈状态管理库的实现方案

• 探索灵活高效的数据查询语言——GraphQL 与 NestJS

• 探索灵活高效的数据查询语言——快速入门

• 手把手带你从 0～1 实现 Apollo Client（1）

• 手把手带你从 0～1 实现 Apollo Client（2）

• 探索灵活高效的数据查询语言——深入GraphQL

• 探索灵活高效的数据查询语言——Apollo Client 与 Apollo Server

• GraphQL最佳实践

• 实战练习 —— 浏览器终端（1）

• 实战练习 —— 浏览器终端（2）

• Jotai 极致性能/用户体验优化策略

• 深入浅出 tRPC

• 番外篇：从 0-1 实现 RSC —— 手撕客户端组件

• 番外篇：从 0-1 实现 RSC —— 手撕服务端组件

• 番外篇：从 0-1 实现 RSC —— 手撕 Waku

• 如何调试状态管理库源码

• 番外篇：手写 React Router(1)

• 番外篇：手写 React Router(2)

• 番外篇：什么是React BatchUpdates