书籍介绍
本小册为纯实战类型的教程系列，以React全家桶(包含hooks)以及immutable数据流为基础仿网易云音乐UI打造一款高质量的WebApp。
首先说一说为什么要开始做这个前端的小册教程:
1、React Hooks如今可谓前端界”当红小生”， 因其API简洁性、逻辑复用性等特性逐渐被开发者所应用，vue3.0也是采用类似的Function Based的模式，因此学习React Hooks也是未来的大趋势，通过一个具体的项目来实践、应用hooks特性，我觉得比干啃文档要强太多，并且在实践的过程中会遇到一些坑，通过坑驱动来学习，可以加深我们对于hooks原理的理解。
2、把Redux和不可变数据结合也是react性能优化的一个重要的手段，通过immutable.js来进行实践一把，能够加深自己对于React性能优化相关知识的理解。
3、完成这个小册中的项目绝对不仅仅是功能上的实现，我保证整个项目的质量能够对得起”精美“二字，从头到尾不断优化和迭代才得以完成，因此也非常乐意分享给更多在前端路上的同学，也有自信能让大家收获到非常多的知识点和实战经验，帮助大家进阶。
接下来介绍一下这个项目的技术栈:
react v16.8全家桶(react，react-router): 用于构建用户界面的 MVVM 框架redux: 著名JavaScript状态管理容器redux-thunk: 处理异步逻辑的redux中间件immutable: Facebook历时三年开发出的进行持久性数据结构处理的库react-lazyload: react懒加载库better-scroll: 提升移动端滑动体验的知名库styled-components: 处理样式，体现css in js的前端工程化神器axios: 用来请求后端api的数据。
写作思路:小册的主干部分以不同的模块为线索，一共有推荐模块、歌手列表模块、排行榜模块、歌单详情模块、歌手主页模块、播放器模块和搜索模块构成，中间会穿插一些基础组件的搭建，整个性能及体验的优化过程也会在每个模块开发基本完成之后来进行，因此是一个循序渐进、不断深入的过程。
主题特点:以实战为线索，逐步深入React开发各个环节，掌握前端常用性能体验优化思路，打造完整前端工作流，提升工程化编码能力和思维能力。
本书目录
- 项目介绍及小册食用说明【不看错亿】
- React 的 Reconciliation 算法原理【开局必备框架原理】
- 为什么要在 React 中用 Immutable 数据流？【全程实战指导方针】
- 初始化项目【万丈高楼平地起】
- 搭建项目基本骨架【磨刀不误砍柴工】
- 推荐模块: 打造酷炫轮播及列表
- 推荐模块: 打造巨好用的项目灵魂组件 ——Scroll 组件
- 推荐模块: 从零开发数据层
- 性能及体验优化【实战精华】
- 歌手列表:横向分类列表开发，搞定诸多类似场景
- 歌手列表: 歌手 List 开发，为后面起飞做铺垫
- 歌手列表:上拉/下拉加载及优化，全面助力移动web开发
- 如何用 hooks 实现一个 Redux?【中途来波骚操作】
- 排行榜单模块开发【举一反三，巩固技能】
- 歌单详情: 动感切页动画，你心动了吗？
- 歌单详情: 准备静态模板
- 歌单详情: 打通歌单数据层
- 代码封装及优化【代码质量不可小觑】
- 榜单详情组件一站式开发【组件复用，解放自我】
- 歌手主页: 核心布局，组件基石
- 歌手主页: 交互逻辑，精益求精
- 歌手主页: 组件接轨业务数据流
- 播放器: 开发前热身，准备好干粮再出发
- 播放器: 布局+动画各个击破
- 播放器: 进度条组件封装，完美衔接业务开发
- 播放器: 复杂交互，挑战极限
- 播放器: 由音符陨落动画引发的EventLoop机制之问
- 播放器: 解决潜在bug, 细节决定精致程度
- 播放器: 播放列表组件，跟App媲美的丝滑体验
- 播放器: 来，手把手写一个歌词解析第三方插件
- 播放器: 歌词功能深度集成
- 搜索模块: 小小的搜索框，大大的学问
- 搜索模块：火力全开，完成最后的组件
- 代码分割、项目部署及展望未来
- 彩蛋 :CD界面更新&歌曲倍速播放【鬼畜篇】
- 彩蛋 : Redux 及中间件原理解析【素养篇】
你会学到什么？
读完小册你会有什么收获:
- 熟练使用React Hooks进行业务开发，理解哪些场景产生
闭包陷阱，如何避免掉坑。 - 手写近
6000行代码，封装13个基础UI组件、12个业务组件，让你知道关于 React + Redux 业内公认的最佳实践到底是什么样子。 - 封装常用的移动端组件，实现常见的需求，如
封装滚动组件、实现图片懒加载、实现上拉/下拉刷新的功能、实现防抖功能、实现组件代码分割(CodeSpliting)等。 - 拥有实现前端复杂交互的实际项目经验，提升自己的内功，比如开发播放器内核就是其中一个很大的挑战。
- 掌握CSS中的诸多技巧，提升自己的CSS能力，无论布局还是动画，都有相当多的实践和探索，未使用任何UI框架，样式代码独立实现。
- 彻底理解redux原理，并能够独立开发redux的中间件。
适合人群
- 1.学习过一些前端基础但缺乏实战经验的在校大学生。
- 2.业务中常常使用市面上各种UI框架和库无法提升自己，想要通过一种方式来强化基础和内功的前端工程师。
- 3.原来的技术栈是Vue.js，想要快速学习和掌握React.js并积累实战经验的前端开发者。
- 4.对React Hooks非常感兴趣，但是对它的了解仅仅停留在各种理论性的文档中，缺乏实践的经验，对各个hooks的应用场景不太理解的前端同学。
- 5.有前端基础，想要做一个高质量的前端项目，系统掌握前端开发完整流程，成为全栈开发的服务端同学。
另外，一些前端知识的基础是需要的，比如HTML、CSS、原生JavaScript的基础。总之，这个小册并不是零基础教程，重点的原理性内容会有所强调，但绝不会有照搬官方文档的重复性内容，保证全程高能实战。当然这里我也没有办法保证项目涉及的技术栈你都有实践过，但这个小册的意义恰恰在于给你一个实际的场景，在一个舒适的环境中完成一个复杂的项目，并在这个过程中知道自己还有哪些不足、理解不透彻的地方，让你更加明确以后努力以及深耕的具体方向，我觉得这是比单纯地做一个项目更加宝贵的东西。
作者介绍
「前端三元同学」公众号作者，掘金优秀作者，博客关注量过万, 深耕前端领域，并且长期坚持输出优质博客文章，热爱开源，热爱分享。
