编辑推荐
适读人群:适用于从零开始学习React的初学者
《React进阶之路》的特点是内容全、知识新、实战性强。
内容全:《React进阶之路》不仅详细介绍了React的使用,还详细介绍了React技术栈中常用的其他相关技术:ReactRouter、Redux和MobX。
知识新:《React进阶之路》介绍的知识点都是基于各个框架、类库当前的新版本,尤其是涵盖React16的新特性和ReactRouter4的介绍。对于新版本已经不再支持或建议废弃的特性,《React进阶之路》不会再介绍,确保读者所学知识的时效性。
实战性强:《React进阶之路》配有大量示例代码,保证读者学以致用。实战篇使用的简易BBS项目示例接近真实项目场景,但又有所简化,让读者既可以真正理解和领会相关技术在真实项目中的使用方式,又不会因为示例项目过于复杂而影响学习。
内容简介
《React进阶之路》详细介绍了React技术栈涉及的主要技术。《React进阶之路》分为基础篇、进阶篇和实战篇三部分。基础篇主要介绍React的基本用法,包括React16的新特性;进阶篇深入讲解组件state、虚拟DOM、高阶组件等React中的重要概念,同时对初学者容易困惑的知识点做了介绍;实战篇介绍ReactRouter、Redux和MobX3个React技术栈的重要成员,并通过实战项目讲解这些技术如何和React结合使用。
《React进阶之路》示例丰富、注重实战,适用于从零开始学习React的初学者,或者已经有一些React使用经验,但希望更加全面、深入理解React技术栈的开发人员。阅读《React进阶之路》,需要先掌握基础的前端开发知识。
作者简介
徐超
毕业于浙江大学,硕士,资深前端工程师,长期就职于能源物联网公司远景智能。8年软件开发经验,熟悉大前端技术,拥有丰富的Web前端和移动端开发经验,尤其对React技术栈和移动Hybrid开发技术有深入的理解和实践经验。
目录
目录
第1篇基础篇——React,一种革命性的UI开发理念
第1章初识React3
1.1React简介3
1.2ES6语法简介4
1.3开发环境及工具介绍9
1.3.1基础环境9
1.3.2辅助工具9
1.3.3CreateReactApp10
1.4本章小结12
第2章React基础13
2.1JSX13
2.1.1JSX简介13
2.1.2JSX语法14
2.1.3JSX不是必需的16
2.2组件17
2.2.1组件定义17
2.2.2组件的props18
2.2.3组件的state21
2.2.4有状态组件和无状态组件23
2.2.5属性校验和默认属性26
2.2.6组件样式28
2.2.7组件和元素32
2.3组件的生命周期34
2.3.1挂载阶段34
2.3.2更新阶段35
2.3.3卸载阶段36
2.4列表和Keys36
2.5事件处理39
2.6表单43
2.6.1受控组件44
2.6.2非受控组件51
2.7本章小结52
第3章React16新特性53
3.1render新的返回类型53
3.2错误处理54
3.3Portals56
3.4自定义DOM属性57
3.5本章小结58
第2篇进阶篇——用好React,你必须要知道的那些事
第4章深入理解组件60
4.1组件state60
4.1.1设计合适的state60
4.1.2正确修改state63
4.1.3state与不可变对象64
4.2组件与服务器通信66
4.2.1组件挂载阶段通信66
4.2.2组件更新阶段通信67
4.3组件通信68
4.3.1父子组件通信68
4.3.2兄弟组件通信71
4.3.3Context75
4.3.4延伸78
4.4特殊的ref79
4.4.1在DOM元素上使用ref79
4.4.2在组件上使用ref79
4.4.3父组件访问子组件的DOM节点81
4.5本章小结82
第5章虚拟DOM和性能优化83
5.1虚拟DOM83
5.2Diff算法84
5.3性能优化87
5.4性能检测工具90
5.5本章小结91
第6章高阶组件92
6.1基本概念92
6.2使用场景93
6.3参数传递96
6.4继承方式实现高阶组件99
6.5注意事项99
6.6本章小结101
第3篇实战篇——在大型Web应用中使用React
第7章路由:用ReactRouter开发单页面应用103
7.1基本用法103
7.1.1单页面应用和前端路由103
7.1.2ReactRouter的安装104
7.1.3路由器104
7.1.4路由配置105
7.1.5链接107
7.2项目实战108
7.2.1后台服务API介绍108
7.2.2路由设计111
7.2.3登录页113
7.2.4帖子列表页117
7.2.5帖子详情页125
7.3代码分片133
7.4本章小结138
第8章Redux:可预测的状态管理机139
8.1简介139
8.1.1基本概念139
8.1.2三大原则141
8.2主要组成141
8.2.1action141
8.2.2reducer142
8.2.3store146
8.3在React中使用Redux148
8.3.1安装react-redux148
8.3.2展示组件和容器组件148
8.3.3connect149
8.3.4mapStateToProps150
8.3.5mapDispatchToProps150
8.3.6Provider组件151
8.4中间件与异步操作152
8.4.1中间件152
8.4.2异步操作154
8.5本章小结155
第9章Redux项目实战156
9.1组织项目结构
前言/序言
前言
当今,前端应用需要解决的业务场景正变得越来越复杂,这也直接推动了前端技术的迅速发展,各种框架和类库日新月异、层出不穷。面对众多的框架和类库,前端开发者可能感到眼花缭乱,但换一个角度来看,这未尝不是一种百家争鸣的现象。不同框架和类库的设计思想和设计理念各有千秋,解决的问题也有所不同,这些多元化和差异化不断推动前端技术的发展,同时也是前端技术领域的一份思想瑰宝。
React作为当今众多新技术的一个代表,由Facebook开源,致力于解决复杂视图层的开发问题,它提出一种全新的UI组件的开发理念,降低了视图层的开发复杂度,提高了视图层的开发效率,让页面开发变得简单、高效、可控。此外,React不仅是单一的类库,更是一个技术栈生态,可以和生态中的Redux、MobX等其他技术结合使用,构建可扩展、易维护、高性能的大型Web应用。
《React进阶之路》内容
《React进阶之路》涵盖React技术栈中的主要技术,内容由浅到深。《React进阶之路》内容分为基础篇、进阶篇和实战篇,每一篇内容又分成若干章节来介绍。
基础篇,介绍了React的基本概念,包括React的开发环境和开发工具、React的基本用法和React16的新特性。每个知识点都有配套的项目示例。
进阶篇,深入介绍了React的几个重要概念,如组件state、虚拟DOM、高阶组件等,此外,还针对初学者使用React时容易产生困惑的知识点做了专门讲解,如组件与服务器通信、组件之间通信、组件的ref属性等。
实战篇,介绍了React技术栈中最重要的三个技术:ReactRouter、Redux和MobX,每一个技术都配有详细的项目实战示例。
《React进阶之路》章节的难度逐步递增,各章节的知识存在依赖关系,所以读者需按照章节顺序阅读《React进阶之路》,不要随意跳跃章节,尤其是在阅读实战篇时,务必保证已经掌握了基础篇和进阶篇的内容,否则,阅读实战篇可能会有些吃力。
《React进阶之路》特点
《React进阶之路》的特点是内容全、知识新、实战性强。
内容全:《React进阶之路》不仅详细介绍了React的使用,还详细介绍了React技术栈中最常用的其他相关技术:ReactRouter、Redux和MobX。
知识新:《React进阶之路》介绍的知识点都是基于各个框架、类库当前的最新版本,尤其是涵盖React16的新特性和ReactRouter4的介绍。对于新版本已经不再支持或建议废弃的特性,《React进阶之路》不会再介绍,确保读者所学知识的时效性。
实战性强:《React进阶之路》配有大量示例代码,保证读者学以致用。实战篇使用的简易BBS项目示例接近真实项目场景,但又有所简化,让读者既可以真正理解和领会相关技术在真实项目中的使用方式,又不会因为示例项目过于复杂而影响学习。
《React进阶之路》目标读者
《React进阶之路》面向希望从零开始学习React的初学者,或者已经有一些React使用经验,希望更加全面、深入理解React技术栈的开发人员。
示例代码
《React进阶之路》中默认的开发环境是Node.jsv8.4.0,书中介绍到的几个主要库的版本分别为React16.1.1、ReactRouter4.2.2、Redux3.7.2及MobX3.3.1。
致谢
《React进阶之路》的完成离不开在各个方面给过我支持和帮助的人,请允许我在这里向他们表示感谢。
首先,感谢公司的领导余海峰(Colin)和贺鸣(Sky)对我写书的支持。Colin在百忙之中还抽出时间为《React进阶之路》作序。
其次,感谢我的同事王博、陈小梦、吴福城、詹敏和朱雅琴,他们给《React进阶之路》提出了很多宝贵的意见。
还要感谢我的老婆,2017年,她的新书《时间的格局:让每一分钟为未来增值》出版,这也让我产生了写书的念头,同时她的写书经验也给了我很多帮助。
最后,感谢清华大学出版社的王金柱老师,正是缘于他的主动联系,才让我写书的念头变成了行动。他认真、负责的工作态度也保证了《React进阶之路》的顺利问世。
徐超
2018年1月1日于上海