新書推薦:
《
皇家宫廷中的保健秘方 中小学课外阅读
》
售價:HK$
63.8
《
《诗经》十五讲 十五堂《诗经》历史文化与文学课 丹曾人文通识丛书
》
售價:HK$
86.9
《
述异记汇笺及情节单元分类研究(上下册)
》
售價:HK$
104.5
《
环境、社会、治理(ESG)信息披露操作手册
》
售價:HK$
261.8
《
桑德拉销售原则 伍杰 [美]大卫·马特森
》
售價:HK$
96.8
《
理论的意义
》
售價:HK$
74.8
《
悬壶杂记:医林旧事
》
售價:HK$
52.8
《
谁之罪?(汉译世界文学5)
》
售價:HK$
52.8
|
編輯推薦: |
煊赫一时的领域首著,启蒙万千读者后再洒甘霖,携重大内容及代码升级重装上阵
Fackbook开源巨献 React,已迅速被广大前端攻城狮所熟知并应用到各种真实场景
无论传统网站还是移动开发,尤其跨终端Web,都已彻底逃不开 React 的耀眼光芒
BAT等一线IT企业快速跟进研发、部署,让React行情持续看涨,职业前景一片光明
|
內容簡介: |
Facebook 的开源框架 React.js,基于 Virtual DOM 重新定义了用户界面的开发方式,彻底革新了大家对前端框架的认识,将PHP风格的开发方式迁移到客户端应用开发。其优势在于可以与各种类库、框架搭配使用。本书由多位一线专家精心撰写,采用全程实例介绍和剖析了 React.js 的方方面面,适合广大前端开发者、设计人员,以及所有对未来技术趋势感兴趣者阅读。本书前版作为 React 首作推出之后,React 生态继续蓬勃发展,技术及社区都在不断推陈出新。本书诸位专家作者适时推出新版,全面更新示例,用 ES6 重写代码,摒弃社区弃用范式,新增无状态组件、不可变数据、Redux 等热点内容。阅读本书,不但可以夯实 React 开发基础,更能全方位紧跟整个 React 生态!
|
關於作者: |
寸志,资深前端架构师,陆金所前端团队Leader。范洪春,阿里巴巴(中国)网络技术有限公司前端工程师。 杨森,阿里巴巴(中国)网络技术有限公司前端工程师。 题叶,饿了么资深前端工程师。 本书由一个团队编写而成,这个团队的成员都是一些经验丰富且专注于JavaScript 的开发者。
Tom Hallett 是一位高级Ruby 和JavaScript 工程师,在Tout.com 工作(Tout.com 是一个实时视频平台,办公地点在旧金山)。他是jasmine-react 的作者,jasmine-react 是一个开源的类库,旨在帮助开发者使用测试框架Jasmine 测试React 应用程序。在Twitter(@tommyhallett)和Github(@tommyh)上都可以找到他。他的爱好是打水球,以及与妻子和儿子待在一起。
Richard Feldman 是旧金山教育科技公司NoRedInk 的前端工程师。他是一个函数式编程爱好者,会议发言人,还是seamlessimmutable的作者。seamless-immutable 是一个开源类库,可以提供不可变的数据结构,向后兼容普通的JavaScript 对象和数组。Richard 在Twitter 和Github 上都叫@rtfeldman。
Simon Højberg 是一个高级UI 工程师,在罗德岛普罗维登斯市的Swipely 公司工作。他是普罗维登斯市线下JS 见面会的核心组织者,之前还是波士顿创业学院的JavaScript 讲师。他一直在使用JavaScript 开发功能性的用户界面,也会开发一些像cssarrowplease.com 这样的业余项目。Simon 的Twitter 是@shojberg。寸志,资深前端架构师,陆金所前端团队Leader。范洪春,阿里巴巴(中国)网络技术有限公司前端工程师。 杨森,阿里巴巴(中国)网络技术有限公司前端工程师。 题叶,饿了么资深前端工程师。 本书由一个团队编写而成,这个团队的成员都是一些经验丰富且专注于JavaScript 的开发者。
Tom Hallett 是一位高级Ruby 和JavaScript 工程师,在Tout.com 工作(Tout.com 是一个实时视频平台,办公地点在旧金山)。他是jasmine-react 的作者,jasmine-react 是一个开源的类库,旨在帮助开发者使用测试框架Jasmine 测试React 应用程序。在Twitter(@tommyhallett)和Github(@tommyh)上都可以找到他。他的爱好是打水球,以及与妻子和儿子待在一起。
Richard Feldman 是旧金山教育科技公司NoRedInk 的前端工程师。他是一个函数式编程爱好者,会议发言人,还是seamlessimmutable的作者。seamless-immutable 是一个开源类库,可以提供不可变的数据结构,向后兼容普通的JavaScript 对象和数组。Richard 在Twitter 和Github 上都叫@rtfeldman。
Simon Højberg 是一个高级UI 工程师,在罗德岛普罗维登斯市的Swipely 公司工作。他是普罗维登斯市线下JS 见面会的核心组织者,之前还是波士顿创业学院的JavaScript 讲师。他一直在使用JavaScript 开发功能性的用户界面,也会开发一些像cssarrowplease.com 这样的业余项目。Simon 的Twitter 是@shojberg。
Karl Mikkelsen 是LockedOn 的一位高级PHP 和JavaScript 工程师,工作是开发外观漂亮且功能强大的房地产软件。Karl 对新技术充满热情,喜欢学习以不同的方式做事。如果你在网上(http:karlmikko.com)找不到他,那他很可能在和妻子攀岩或者在喝咖啡。
Jon Beebe 在Dave Ramsey 的数字开发团队里开发应用,专注于一些面向用户的技术,例如Web 和iOS。在这之前,他开发过PHPWeb 服务,也为Final Cut Pro 和Motion 写过插件。他以能够把艺术和代码结合到一起为乐。他的网名是@bejonbee。他自诩是一个热衷阅读的人,喜欢摄影,并且以超出妻子的日常期望为自己的目标。
Frankie Bagnardi 是一位高级前端工程师,为多种不同的客户端创造用户体验。在业余时间里,他会在StackOverflow(FakeRainBrigand)和IRC(GreenJello)上回答问题,或者开发一些小项目。你可以通过f.bagnardi@gmail.com 联系他。
|
目錄:
|
推荐序1III
推荐序2V
推荐序3VII
前言IX
第 1 章?React 简介1
背景介绍1
本书概览3
Component的创建和复合3
进阶5
React工具6
React实践6
第 2 章?JSX8
什么是JSX9
使用JSX的好处10
更加熟悉10
更加语义化10
更加直观11
关注点分离12
复合组件12
定义一个自定义组件12
使用动态值13
子节点14
JSX与HTML有何不同16
属性16
条件判断17
非DOM属性19
事件21
注释22
特殊属性23
样式23
没有JSX的React24
创建React元素24
延伸阅读及参考引用25
JSX官方规范25
第 3 章?组件的生命周期26
生命周期方法26
实例化27
存在期27
销毁&清理期27
实例化27
componentWillMount28
render28
componentDidMount29
存在期30
componentWillReceiveProps30
shouldComponentUpdate30
componentWillUpdate31
componentDidUpdate31
销毁&清理期32
componentWillUnmount32
反模式:把计算后的值赋给state32
总结33
第 4 章?数据流34
Props35
PropTypes36
defaultProps37
State37
放在state和props的各是哪些部分40
无状态的函数式组件40
总结41
第 5 章?事件处理42
绑定事件处理器43
事件和状态44
根据状态进行渲染44
更新状态45
状态没有更新!46
事件对象47
总结48
第 6 章?组件的复合49
扩展HTML50
组件复合的例子50
组装HTML51
追踪状态53
整合到父组件当中54
父组件与子组件的关系56
总结59
第 7 章?高阶组件和Mixins60
简单的例子60
常见使用场景63
总结63
第 8 章?DOM操作64
访问受控的DOM节点65
在组件内部查找DOM节点66
整合非React类库67
侵入式插件70
总结72
第 9 章?表单73
无约束的组件74
约束组件76
表单事件78
Label79
文本框和 Select79
复选框和单选框82
表单元素的name属性84
多个表单元素与change处理器86
自定义表单组件89
Focus93
可用性93
把要求传达清楚94
不断地反馈94
迅速响应94
符合用户的预期95
可访问95
减少用户的输入96
总结97
第 10 章?动画98
CSS渐变组99
给渐变class添加样式99
渐变生命周期100
使用渐变组的隐患101
间隔渲染101
使用requestAnimationFrame实现间隔渲染102
使用setTimeout实现间隔渲染104
弹簧动画105
总结106
第 11 章?性能优化107
shouldComponentUpdate107
键(key)109
总结111
第 12 章?服务端渲染112
渲染函数113
React.renderToString113
React.renderToStaticMarkup114
用React.renderToString还是用React.renderToStaticMarkup114
服务端组件生命周期115
设计组件116
异步状态118
同构路由121
单例、实例及上下文121
总结122
第 13 章?开发工具123
构建工具123
Browserify124
建立一个Browserify项目124
对代码做出修改126
Watchify127
构建127
Webpack127
Webpack与React128
调试工具131
基础工具131
总结133
第 14 章?测试134
上手135
测试的类型135
工具136
使用Jest和Enzyme测试React组件136
编写组件的内容的断言136
测试组件的方法和DOM事件143
编写子组件的断言144
总结147
第 15 章?架构模式148
路由149
react-router150
Flux152
数据流152
Flux各个部分153
Dispatcher153
Action154
Store154
控制视图155
管理多个Store156
总结161
第 16 章?不可变性162
性能优势162
性能消耗163
架构优势164
使用Immutability Helpers Addon164
使用seamless-immutable166
使用Immutable.js167
Immutable.Map168
Immutable.Vector168
总结169
第 17 章?其他使用场景170
桌面应用171
游戏172
电子邮件177
绘图183
总结186
|
內容試閱:
|
推荐序1
时光回溯。2011年我离开Google转而加入Facebook,从事移动互联网(Mobile Web)的核心产品开发工作。
随着时间的推移,工作上逐渐取得了许多有意义的巨大进展,同仁们也都深以此为傲。然而不是所有的事情都进展得特别顺利。其中一个很大的问题与挑战就是因为HTML5 的技术限制与性能瓶颈,许多产品的开发工作受到了限制。
2012年Facebook公开了一件很多人深有体会却不想说出口的事实,那就是HTML5之类的Web技术并未成熟到能够担任产品开发工具重任的程度。在很多方面,使用原生代码(native code)开发仍然是必要的选项。
对于很多包括我在内的Mobile Web开发者来说,这样的情况是一个让人失望却又不得不接受的事实。
2013年年初,我离开工作两年多的移动互联网开发部门,转而投入广告部门,从事桌面富客户端(Rich App Client Application)的开发工作。
虽然Mobile Web的进展不如预期理想,但此时在Desktop Web方面,事情却有了有意思的变化。
当时我参与的新项目主要是要使用一种叫作React的新平台技术,将当时广告部门的一个主要产品重构。项目的有趣之处在于,产品的视觉外观与功能将不会也不能有任何变化,但是内部执行的代码将会是以React打造的。
由于项目的目标为实际上线且对公司营收有重要影响的产品,所以项目的挑战除了在于应用React这门新技术之外,维持产品本身的稳定当然也是不可妥协的目标。
所幸,项目顺利达标,而同仁们也对于React这门技术有了更丰富的经验与更强的信心。就连React本身也快速吸收众人的回馈,快速演进。
我从事Web前端开发工作已经十年,有幸亲身经历众多重大的技术变革与范式转移。我可以负责任也很喜悦地说,作为一门新生技术,React及其相关工具对于从事Web开发的人来说,将会产生巨大且革命性的影响。
虽说React初始是为了解决Facebook广告部门在产品开发上遇到的很多实际问题,但实际应用的层面却非常广泛。
2015年Facebook也开源了ReactNative,让React能够在iOS移动终端执行(对Android的平台支持预计为2015年年底)。
由于React的特殊设计,React消弥了客户端与服务器端的开发界线。最近的发展则更进一步衍生到Mobile Native App与其他非传统Web(HTML CSS)的执行环境。
无论你是有多年经验的开发者,或者是刚入门的新人,此时选择React都会是一个很好的选择。
React 可以解决很多传统Web开发架构碰到的艰难问题,同时由于它是一门新生技术,开发者将更有机会掌握一门强大的开发工具,解决更深入的艰难问题并提升产品开发的质量与境地。
作为一本入门书籍,本书提供基本但足够的范例与介绍,着重在实际的代码与操作应用,可以让读者快速学习React的相关知识与技术,并实际打造可执行的程序。
相信对于需要使用React 开发的人来说,这将会是一本不错的入门参考。
必须要补充的是,目前由于React还在Beta版本阶段,本书的内容主要是以v0.12为主。目前公开的最新版本为v0.13,书中提到的API将会略有差异,细节方面可以在它的官方网站上查询(https:facebook.github.ioreactblog20150224streamlining-react-elements.html)。
Hedger Wang
Facebook资深前端工程师
推荐序2
组件化一直是前端领域的圣杯。我至今依旧记得自己初次接触YUI-Ext时,被其精致的组件和优雅的设计深深震撼的场景。之后随着ExtJS的发布,我在很长时间内都痴迷于探索ExtJS深邃的继承层次与架构,并由此进入了前端行业。
ExtJS作为一个企业级框架,借鉴了Java的Swing设计,同Java一样有着教科书般的学院风派,也同Swing一样注定曲高和寡。在快速变化的互联网领域,ExtJS犹如一条大船行驶在激流中,每一次调头都非常艰难。同时代的不少互联网企业也开源了自己的前端类库,包括YUI、Closure Library、KISSY、Arale等,它们同样有着不错的组件设计,但思路和ExtJS并无显著不同,只不过更加轻量化。
传统组件化的特点是把组件和原生DOM节点的渲染割裂起来,要么如ExtJS一样抛弃原生DOM节点,要么就在原生DOM节点渲染后再渲染自定义组件。现代的组件架构鼓励原生DOM节点和自定义组件的统一渲染融合,比如React以及未来的Web Components规范。
React最为人称道的是,它是一个专注于组件架构的类库。API很少,理念也很简单,使用React可以非常快速地写出和原生DOM标签完美融合的自定义组件(标签),并且能够高效渲染。而想要真正使用好React,我们必须跳出以往的思维,拥抱React的理念和思想,比如状态、虚拟DOM、组合优于继承、单向数据流等。React的简单抽象和专注,使得React可以更容易与其他各种技术结合。因为React的简单抽象,我们终于可以脱离浏览器中充满敌意的DOM环境,从而使得组件也可以运行在服务器端、Native客户端等各种底层平台。令人惊奇的是,这种抽象泄漏非常少,必要时可以很方便地跳出React的抽象而直接操纵DOM等底层平台。因为React专注于组件架构,所以模块系统可以直接采用CommonJS,测试框架可以使用Mocha或Jasmine等,生态圈则可以直接依托npm,工具可以采用现成的Browserify或webpack,我们不必受制于任何单一技术,这非常符合Web的开放本质。
在本书中,作者不仅完整地介绍了React本身的方方面面,用通俗的语言和简洁的例子阐述了React的开发理念,还介绍了一套基于React以及业界其他优秀技术的最佳实践,相信读者在看完本书后能够快速将其中的知识应用于项目开发。React目前处于快速发展时期,在本书发行后,又增加了不少吸引人的新特性,加大了和ES6的进一步整合,从而进一步减少了需要学习的API,大家在看完本书后可以持续关注React社区的最新发展动态。值得注意的是,业界基于React的优秀组件与传统组件相比仍然严重不足,这对我们来说是一个很好的机会有机会可以向业界发出中国的声音。积极学习业界的先进技术,未来我们一定能在前端类库领域创造出让业界称赞的东西。
何一鸣(承玉)
蚂蚁金服技术专家
前KISSY核心开发者,现React爱好者
推荐序3
React是一种革命性的UI组件开发思路。
在此之前,我们所见到的JavaScript框架开发思路几乎是同质的。框架为开发者提供一套组件库,业务开发基于组件库提供的组件来进行就可以了。
而在UI组件架构里,有几个特点需要注意:一是越靠近用户端变化越快,用枚举组件的思路在高速迭代快速变化的互联网中开发,将会使UI组件库逐渐变得臃肿和难以维护。二是组件开发不再是五六年前那样一穷二白的初始状态,现今行业里组件百花齐放,可选面非常广,即使当下找不到非常匹配的组件,进行自研的成本也不高。三是UI 组件受具体业务场景的约束。
因此,各大互联网公司在组件上都尽可能地采取自研或统一组织组件库。而组件库在公司级别难抽象,对整体技术的挑战比较大,且收效不确定。于是只能将组件场景定位到更具体的某一类型的业务线再进行抽象。从而让组件库变得轻量、灵活。
开发架构的理想态是同构。用相同的内部机制与结构将开发变得透明且测试可控。这在React里表现得很明显。它的设计非常大胆,一开始就没有将枚举组件功能作为重点,而是以同构的理想架构为起点将原本的DOM 操作接管,提出Virtual DOM、单向数据流,用很少的接口覆盖在组件开发的生命周期上,采取声明式的语法等。实现了一个纯粹的组件引擎。
另一方面,React的思路也可作为连接异构端的组件入口。现在,用React native 就可以实现React- native;用React canvas 就可以实现一套基于canvas的高性能的Web UI组件;最近,我还尝试了React WebComponents,将两者的优势进行融合。
可见,React的思路为开发创造了非常大的想象空间。
本书内容围绕示例展开,书中还涵盖了React的周边信息,为读者提供了较为全面和丰富的React讲解。通过阅读本书,读者能够学会如何将React运用到实际开发中去。另外,我建议大家不仅要学习React的应用如何实现组件,更重要的是通过书中的实例理解React的设计思路。可以预见,React未来将会影响整个用户端UI组件的开发。希望能有更多的人了解React的开发思路,大家携手共建React 的组件生态。
刘平川(rank)
现美团网架构师,React爱好者
前百度FEX创立者及负责人
前言
React 是什么,为什么要使用它
React是Facebook内部的一个JavaScript类库,已于2013年开源,可用于创建web用户交互界面。它引入了一种新的方式来处理浏览器DOM。那些需要手动更新DOM、费力地记录每一个状态的日子一去不复返了这种老旧的方式既不具备扩展性,又很难加入新的功能,就算可以,也是冒着很大的风险。React使用很新颖的方式解决了这些问题。你只需声明式地定义各个时间点的用户界面,而无须关心在数据变化时需要更新哪一部分DOM。在任何时间点,React都能够以最小的DOM修改来更新整个应用程序。
本书内容
React引入了一些激动人心的新概念,向现有的一些最佳实践发起了挑战。本书将会带领你学习这些概念,帮助你理解它们的优势,创建具备高扩展性的单页面应用(SPA)。
React把主要的注意力放在了应用的视图部分,没有限定与服务端交互和代
|
|