开课吧React工程师修炼指南 pdf下载

React一经推出便迅速流行，其基于虚拟dom、JSX的技术重新定义了UI开发方式，也革新了我们对前端框架的认知，凭借其的特性，伴随着构建、测试、部署等前端工程化的日趋完善，React全家桶成为了项目技术选型热门框架之一。
本书从ES6语言基础开始，通过各种实战案例，讲解了React技术栈在项目中的各种使用技巧。本书还从源码层面进行深入解析，同时结合webpack对项目优化，帮助读者更深入理解和掌握React，运用起来更加得心应手。

本书以 React 16.13 为标准，帮助读者全面学习 React 技术栈相关知识。内容涵盖从开发 React 所必须掌握的 ES6 知识，到 React 、React-Router、Redux 等 React 相关技术栈的使用；从 React 在商城项目中的*佳实践方案，到 React 整体源码解析，再到工程化开发时 React 项目的各种配置及优化。本书内容系统全面，可以让读者快速上手 React 开发，帮助读者在面试时获取更高分数。
本书实例丰富、注重实战，可供React的初学者，以及有一定React使用经验，但希望更加全面、深入理解React的开发人员学习或参考。

◆ 目录：◆

前言
●第1章ES6基础
1.1let及const
1.1.1let命令
1.1.2const命令
1.1.3临时死区
1.1.4循环中的let及const
1.2解构赋值
1.2.1数组的解构
1.2.2对象的解构
1.2.3解构的默认值及参数的解构
1.3字符串扩展
1.3.1Unicode支持
1.3.2新增字符串方法
1.3.3模板字符串
1.4Symbol
1.5函数
1.5.1函数形参的默认值
1.5.2函数形参不定参数
1.5.3箭头函数
1.6类class
1.6.1类的基本语法
1.6.2静态成员
1.6.3类的继承
1.7异步编程
1.7.1ES5中的异步
1.7.2Promise基本语法
1.7.3Promise处理异步问题
1.7.4Promise里的其他方法
1.8模块化
1.8.1导入导出基本使用
1.8.2导入导出变式写法
1.8.3按需导入
1.9Set和Map集合
1.9.1Set集合
1.9.2Map集合
1.10小结
●第2章React详解
2.1为什么使用 React
2.1.1专注于视图层
2.1.2组件化开发和声明式编程
2.1.3Virtual DOM
2.2ReactDOM
2.2.1React 引入方式
2.2.2ReactDOM
2.3React 视图渲染
2.3.1ReactElement
2.3.2JSX
2.4create-react-app
2.4.1安装 create-react-app
2.4.2项目构建和启动
2.4.3项目入口文件
2.4.4React.StrictMode
2.5定义 React 组件
2.6组件间通信
2.6.1props 使用
2.6.2state 使用
2.6.3组件间的通信
2.6.4跨组件通信
2.7组件的生命周期
2.7.1挂载阶段的生命周期函数
2.7.2更新阶段的生命周期函数
2.7.3卸载阶段的生命周期函数
2.8ref
2.8.1string ref
2.8.2createRef
2.9key
2.10添加事件
2.11表单
2.12其他特性
2.12.1children
2.12.2dangerouslySetInnerHTML
2.12.3函数式组件
2.13React Hooks
2.13.1常用Hooks
2.13.2Hooks 使用规则
2.13.3自定义 Hook
2.14小结
●第3章基于 Redux 状态管理
3.1Redux 使用
3.1.1action、createStore 和 reducer 函数
3.1.2store
3.2React-Redux
3.2.1安装与配置
3.2.2connect
3.2.3Hooks
3.3基于Redux 的Todos实现
3.3.1建立视图
3.3.2建立数据模型以完善reducer
3.3.3数据关联视图完善功能
3.4reducer 拆分与合并
3.5rudux-thunk 中间件
3.6小结
●第4章React-Router
4.1什么是 React-Router
4.2React-Router 安装与配置
4.3Route 组件
4.3.1Path匹配
4.3.2路由渲染
4.4路由信息
4.5withRouter和Router Hooks
4.5.1withRouter
4.5.2Router Hooks
4.6链接组件
4.6.1Link 组件
4.6.2NavLink 组件
4.7404视图
4.8重定向
4.9Router 实战
4.10小结
●第5章商城项目实战
5.1模板搭建
5.1.1BasicLayout
5.1.2SecurityLayout
5.2导航组件
5.3登录跳转
5.3.1登录页面与逻辑实现
5.3.2用户中心信息展示
5.4免登录页面
5.4.1首页页面
5.4.2商品列表
5.4.3商品详情
5.5路由守卫页
5.5.1购物车
5.5.2确认订单
5.5.3支付
5.5.4订单列表
5.6小结
●第6章React原理解析
6.1React源码中的常用变量和数据结构
6.1.1WorkTag
6.1.2SideEffectTag
6.1.3ExecutionContext
6.1.4PriorityLevel
6.1.5RootTag
6.1.6RootExitStatus
6.1.7currentEventTime
6.2初次渲染与更新
6.2.1ReactDOM.render
6.2.2setState
6.2.3forceUpdate
6.2.4render、setState、forceUpdate对比
6.2.5enqueueUpdate
6.2.6scheduleUpdateOnFiber
6.2.7时间计算
6.3任务调度
6.3.1performSyncWorkOnRoot
6.3.2renderRootSync
6.3.3workLoopSync
6.3.4performUnitOfWork
6.3.5beginWork
6.3.6更新阶段
6.3.7协调
6.3.8commit
6.4Hook原理
6.4.1Hook基本数据结构
6.4.2全局变量
6.4.3标识路径
6.4.4更新函数
6.5Hook API解析
6.5.1useReducer
6.5.2useState
6.5.3useContext
6.5.4useRef
6.5.5useEffect
6.5.6useLayoutEffect
6.5.7useMemo
6.5.8useCallback
6.6重点解析
6.6.1Context
6.6.2Refs
6.6.3事件系统
6.6.4setState异步Or同步
6.6.5diff
6.7小结
●第7章工程化配置
7.1webpack入门
7.1.1什么是webpack
7.1.2webpack安装
7.1.3使用webpack
7.1.4webpack基础
7.1.5webpack核心配置
7.2实战React开发环境
7.2.1搭建前端开发基础环境
7.2.2样式配置
7.2.3静态资源管理
7.2.4本地开发环境配置
7.2.5使用Babel支持ES6+
7.2.6集成React框架
7.3扩展优化
7.4小结

◆ 前言：◆

React是2013年Facebook发布的一个前端库，刚发布时，React面对很多质疑，有人觉得React是很大的退步，但随着市场的普及，React被证明是一款高效且实用的精品软件。
作为一个创新的前端库，React率先提出了虚拟DOM的概念，这一概念理解起来并不难，难的是首先能创造它并加以使用，现在这一概念已经被广泛接受。最初的React中从虚拟DOM到真实DOM，用的是递归遍历，这种方法不适用于大型项目，因为只有一个主线程，当主线程被持续占用时，就会造成后面任务的延迟，如果后面任务是需要被立即执行的任务，如动画，那此时用户就会发现动画出现卡顿。React为了改善这种问题，引进了fiber架构，实现增量渲染，即可以根据任务优先级来决定任务执行的顺序，这极大提升了React在处理大型项目时的流畅度。除了虚拟DOM、Fiber架构的革新，针对函数组件，React又创造性地引入了Hooks，Hooks的出现使得函数组件拥有状态、副作用执行等新功能，因此现在的函数组件功能完整，可取代之前的class组件。
React的创新是值得大部分开发人员学习的。目前React最新版本是16.13，本书内容均是来自此版本。当然，React依然处于高速更新中，目前React正在更新的内容包括合成事件、diff算法等，读者拿到本书时，React版本也许已经又更新了几个版本，但是我们撰写本书的目的是帮助读者系统学习React的思想，而不仅仅是API的使用。
为了帮助读者更好地掌握React，本书第1章从ES6基础开始介绍，给出了React重要API的使用方法与样例。对于大型应用，由于React没有通信处理功能，此时就需要借助第三方库，如Redux与React-Redux，路由方面可以使用React-Router，关于这三个库的详细使用，本书第2~4章均有详细讲解。如果读者能够掌握前4章内容，初步开发React项目将不成问题。本书第5章为商城项目实战，这里会引导读者开发一个常见的商城项目，该项目采用当下最流行的umi框架，UI库使用antd4，基于TypeScript开发。开发本项目之前，建议读者先去umi和antd官网了解其基本使用方法，当然对于TypeScript新手来说，直接使用TypeScript开发会有一点吃力，但是我们建议读者能够坚持，类型检测开发是目前的一个流行趋势，以后会被广泛使用，不论是学习还是求职，都有必要掌握。第6章为React原理解析，建议读者重点掌握，学习一个框架的核心就是掌握其原理。第7章为工程化配置，该章内容在构建项目和优化配置方面非常重要，建议结合第5章内容学习掌握。
React是目前国内最流行的前端框架之一。它采用了虚拟DOM、Hooks思想和diff深度优先。React使用Fiber架构来减低渲染颗粒度，实现增量渲染。由于React Fiber目前的架构属于单向链表，因此只能实现单向查找。
任何一个框架都有被淘汰的一天，React也不会例外，但是它提出的创新思维和源代码编写方法，值得所有从业者学习借鉴，以此来扩展开发人员的思路，帮助读者成为一个优秀的开发者，而不仅仅是代码的搬运工。本书或许没有那么简单易懂，很多地方需要读者花一些心思去理解，但学习React就是要经历这样的过程，希望读者耐心学习理解，逐步提升React开发和实战能力。
限于作者编写水平，书中难免有不足之处，恳求广大读者批评指正。
编者

◆ 序言：◆

致数字化人才的一封信

如今，在全球范围内，数字化经济的爆发式增长带来了数字化人才需求量的急速上升。当前沿技术改变了商业逻辑时，企业与个人要想在新时代中保持竞争力，进行数字化转型不再是选择题，而是一道生存题。当然，数字化转型需要的不仅仅是技术人才，还需要能将设计思维、业务场景和ICT专业能力相结合的复合型人才，以及在垂直领域深度应用最新数字化技术的跨界人才。只有让全体人员在数字化技能上与时俱进，企业的数字化转型才能后继有力。
2020年对所有人来说注定是不平凡的一年，突如其来的新冠肺炎疫情席卷全球，对行业发展带来了极大冲击，在各方面异常艰难的形势下，AI、5G、大数据、物联网等前沿数字技术却为各行各业带来了颠覆性的变革。而企业的数字化变革不仅仅是对新技术的广泛应用，对企业未来的人才建设也提出了全新的挑战和要求，人才将成为组织数字化转型的决定性要素。与此同时，我们也可喜地看到，每一个身处时代变革中的人，都在加快步伐投入这场数字化转型升级的大潮，主动寻求更便捷的学习方式，努力更新知识结构，积极实现自我价值。
以开课吧为例，疫情期间学员的月均增长幅度达到300%，累计付费学员已超过400万。急速的学员增长一方面得益于国家对数字化人才发展的重视与政策扶持，另一方面源于疫情为在线教育发展按下的“加速键”。开课吧一直专注于前沿技术领域的人才培训，坚持课程内容“从产业中来到产业中去”，完全贴近行业实际发展，力求带动与反哺行业的原则与决心，也让自身抓住了这个时代机遇。
我们始终认为，教育是一种有温度的传递与唤醒，让每个人都能获得更好的职业成长的初心从未改变。这些年来，开课吧一直以最大限度地发挥教育资源的使用效率与规模效益为原则，在前沿技术培训领域持续深耕，并针对企业数字化转型中的不同需求细化了人才培养方案，即数字化领军人物培养解决方案、数字化专业人才培养解决方案、数字化应用人才培养方案。开课吧致力于在这个过程中积极为企业赋能，培养更多的数字化人才，并帮助更多人实现持续的职业提升、专业进阶。
希望阅读这封信的你，充分利用在线教育的优势，坚持对前沿知识的不断探索，紧跟数字化步伐，将终身学习贯穿于生活中的每一天。在人生的赛道上，我们有时会走弯路、会跌倒、会疲惫，但是只要还在路上，人生的代码就由我们自己来编写，只要在奔跑，就会一直矗立于浪尖！
希望追梦的你，能够在数字化时代的澎湃节奏中“乘风破浪”，我们每个平凡人的努力学习与奋斗，也将凝聚成国家发展的磅礴力量！

慧科集团创始人、董事长兼开课吧CEO方业昌