说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

React首部经典图书推荐:全程经典实例,360度剖析React.js

HTML文档下载 WORD文档下载 PDF文档下载
React.js基于Virtual DOM重新定义了用户界面的开发方式,革新了大家对前端框架的认识,将PHP风格的开发方式迁移到客户端应用开发。《React:引领未来的用户界面开发框架》作为该领域的首部作品已正式出版。

【编者按】Facebook 2014年推出了开源框架React.js,《React:引领未来的用户界面开发框架》作为该领域的首作,由多位一线专家精心撰写,采用一个全程实例全面介绍和剖析了ReactReact.js 的方方面面。下面为该书的节选内容。

动画

动画可以让用户体验变得更加流畅与自然,而React 的TransitionGroup 插件配合CSS3 可以让我们在项目中整合动画效果的工作变得易如反掌。

通常情况下,浏览器中的动画都拥有一套极其命令式的API。你需要选择一个元素并主动移动它或者改变它的样式,以实现动画效果。这种方式与React 的组件渲染、重渲染方式显得格格不入,因此React 选择了一种偏声明式的方法来实现动画。

CSS 渐变组(CSS Transition Group)会在合适的渲染及重渲染时间点有策略地添加和移除元素的class,以此来简化将CSS 动画应用于渐变的过程。这意味着唯一需要你完成的任务就是给这些class 写明合适的样式。

间隔渲染以牺牲性能为代价提供了更多的扩展性和可控性。这种方法需要更多次的渲染,但同时也允许你为CSS 之外的内容(比如滚动条位置及Canvas 绘图)添加动画。

CSS 渐变组

看一下我们的示例程序——问卷制作工具——是如何在问卷编辑器中渲染问题列表的。

<ReactCSSTransitionGroup transitionName='question'>{questions}</ReactCSSTransitionGroup>

ReactCSSTransitionGroup 是一款插件,它在文件最顶部通过var ReactCSSTransitionGroup= React.addons.ReactCSSTransitionGroup; 语句被引入。

它会自动在合适的时候处理组件的重渲染,同时根据当前的渐变状态调整渐变组的class 以便实现组件样式的改变。

我们有一个贯穿全书的示例项目,一个问卷制作工具,你可以在https://github.com/backstopmedia/bleeding-edge-sample-app 阅读全部源码。

给渐变class 添加样式

按照惯例,为元素添加transitionName='question' 意味着给它添加了4 个class:questionenter、question-enter-active、question-leave 及question-leave-active。当子组件进入或退出ReactCSSTransitionGroup 时,CSSTransitionGroup 插件会自动添加或移除这些class。

下面是问卷编辑器中使用到的渐变样式:

.survey-editor .question-enter {transform: scale(1.2);transition: transform 0.2s cubic-bezier(.97,.84,.5,1.21);}.survey-editor .question-enter-active {transform: scale(1);}.survey-editor .question-leave {transform: translateY(0);opacity: 0;transition: opacity 1.2s, transform 1s cubic-bezier(.52,-0.25,.52,.95);}.survey-editor .question-leave-active {opacity: 0;transform: translateY(-100%);}

注意这些.survey-editor 选择器并不是ReactCSSTransitionGroup 需要的,它们只是简单地用来确保这些样式只会在编辑器里生效。

渐变生命周期

question-enter 与question-enter-active 的区别在于,question-enter 这个class 是组件被添加到渐变组后即刻添加上的,而question-enter-active 则是在下一轮渲染时添加的。这样的设计让你能轻松地定义渐变开始时的样式、结束时的样式以及如何进行渐变。

举个例子,当问卷编辑器中的问题被添加到列表时,它们首先被用scale(1.2) 放大,然后渐变到正常的scale(1) 状态,总共耗时0.2 秒。这就创造出了一种你看到的跳出来的效果。

默认情况下,渐变组同时启用了进入和退出的动画,你可以通过给组件添加transitionEnter={false} 或transitionLeave={false} 属性来禁用其中一个或全部禁用。除了可以控制选择哪些动画效果外,我们还能根据一个可配置的值在特定的情况下禁用动画,像这样:

<ReactCSSTransitionGroup transitionName='question'transitionEnter={this.props.enableAnimations}transitionLeave={this.props.enableAnimations}>{questions}</ReactCSSTransitionGroup>

使用渐变组的隐患

使用渐变组时主要有两个重要的隐患需要注意。

首先,渐变组会延迟子组件的移除直到动画完成。这意味着如果你把一个列表的组件包裹进一个ReactCSSTransitionGroup 中,却没有为transitionName 属性指定的class 明确任何CSS,这些组件将永远无法被移除——甚至当你尝试不再渲染它们时也不可以。

其次,渐变组的每一个子组件都必须设置一个独一无二的key 属性。渐变组使用这个属性来判断组件究竟是进入还是退出,因此如果没有设置key 属性动画可能无法执行,同时组件也会变得无法移除。

注意,即使渐变组只有一个子元素,它也需要设置一个key 属性。

间隔渲染

使用CSS3动画能够获得巨大的性能提升并拥有简洁的代码,但它们并不总是解决问题的正确工具。有些时候你必须要为较老的、不支持CSS3 的浏览器做兼容,还有些时候你想为

CSS属性之外的东西添加动画,比如滚动条位置或Canvas 绘画。在这些情况下,间隔渲染能够满足我们的要求,但是相比CSS3 动画来说,它会带来一定的性能损耗。

间隔渲染最基本的思想就是周期性地触发组件的状态更新,以明确当前处于整个动画时间中的什么阶段。通过在组件的render 方法中加入这个状态值,组件能够在每次状态更新触发的重渲染中正确表示当前的动画阶段。

因为这种方法涉及多次重渲染,所以通常最好和requestAnimationFrame 一起使用以避免不必要的渲染。不过,在requestAnimationFrame 不被支持或不可用的情况下,降级到不那么智能的setTimeout 就是唯一的选择了。

使用requestAnimationFrame 实现间隔渲染

假设你希望使用间隔渲染将一个div 从屏幕的一边移向另一边,可以通过给它添加position: absolute 并随着时间变化不停更新left 或top 属性来实现。根据消耗时间内的变化总量,用requestAnimationFrame 来实现这个动画应该可以得出一个流畅的动画。

下面是具体实现的例子。

var Positioner = React.createClass({getInitialState: function() { return {position: 0}; },resolveAnimationFrame: function() {var timestamp = new Date();var timeRemaining = Math.max(0, this.props.animationCompleteTimestamp- timestamp);if (timeRemaining > 0) {this.setState({position: timeRemaining});}},componentWillUpdate: function() {if (this.props.animationCompleteTimestamp) {requestAnimationFrame(this.resolveAnimationFrame);}},render: function() {var divStyle = {left: this.state.position};return <div style={divStyle}>This will animate!</div>}});

在这个例子中,组件的props 中设置了一个名为animationCompleteTimestamp 的值,它和requestAnimationFrame 的回调中返回的时间戳一起被用来计算剩余多少位移。计算的结果存在this.state.position 中,而render 方法会用它来确定div 的位置。

由于requestAnimationFrame 被componentWillUpdate 方法调用,所以只要组件的props有任何的变动(比如改变了animationCompleteTimestamp)它就会被触发。它又包含了在resolveAnimationFrame 中的this.setState 调用。这意味着一旦animationComleteTimestamp被设置,组件就会自动调用后续的requestAnimationFrame 方法,直到当前时间超过了animationCompleteTimestamp 为止。

注意,这套逻辑只在基于时间戳的情况下成立。对animationCompleteTimestamp 所做的改变会触发逻辑,而this.state.position 的值完全依赖于当前时间与animationCompleteTimestamp的差。正因如此,render 方法可以自由地在各种动画中使用this.state.position,包括设置滚动条位置、在canvas 上绘画,以及任何中间状态。

使用setTimeout 实现间隔渲染

尽管requestAnimationFrame 总体上能够以最小的性能损耗实现最流畅的动画,但它在较老的浏览器上是无法使用的,而且它被调用的次数可能比你想象的更频繁(也更加无法预测)。在这些情况下你可以使用setTimeout。

var Positioner = React.createClass({getInitialState: function() { return {position: 0}; },resolveSetTimeout: function() {var timestamp = new Date();var timeRemaining = Math.max(0, this.props.animationCompleteTimestamp- timestamp);if (timeRemaining > 0) {this.setState({position: timeRemaining});}},componentWillUpdate: function() {if (this.props.animationCompleteTimestamp) {setTimeout(this.resolveSetTimeout, this.props.timeoutMs);}},render: function() {var divStyle = {left: this.state.position};return <div style={divStyle}>This will animate!</div>}});

由于setTimeout 接受一个显式的时间间隔,而requestAnimationFrame 是自己来决定这个时间间隔的,因此这个组件需要额外依赖一个变量this.props.timeoutMs,以此来明确要使用的间隔。

开源库ReactTweenState 基于这种动画方式提供了一套方便的抽象接口。

总结

使用这些动画技术,你现在可以:

1. 在状态改变过程中,使用CSS3 和渐变组高效地应用渐变动画。

2. 使用requestAnimationFrame 为CSS 之外的东西添加动画,如滚动条位置或Canvas绘画。

3. 当requestAnimationFrame 不被支持时降级到setTimeout 方法。


本文摘自《React:引领未来的用户界面开发框架》,电子工业出版社出版。

2014年横空出世的由Facebook推出的开源框架React.js,基于Virtual DOM重新定义了用户界面的开发方式,彻底革新了大家对前端框架的认识,将PHP风格的开发方式迁移到客户端应用开发。其优势在于可以与各种类库、框架搭配使用。《React:引领未来的用户界面开发框架》是这一领域的首作,由多位一线专家精心撰写,采用一个全程实例全面介绍和剖析了React.js 的方方面面,适合广大前端开发者、设计人员,及所有对未来技术趋势感兴趣者阅读。

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。 

BDTC 2014干货精彩不断,四大全天技术论坛议题全面曝光 全功能API!开源2D游戏引擎Firmament 微信公众平台新增“微信连Wi-Fi”功能,打通线上线下闭环 马化腾:微信在一线城市活跃 QQ增长从城市到农村 承包MIPS开发!Imagination发布双Codescape MIPS SDK 不任性了!Google Play宣布开通国内开发者通道 脑洞大开!用Swift写个Material Design组件库 美国最大婚恋网站eHarmony利用Hadoop、OpenStack重构自己 每个Java开发者都应该知道的5个JDK工具 异构计算应用研讨暨OpenCL编程培训在上海和西安成功举行! APIs.io:用来发布和发现API的利器 偏爱MySQL,Nifty使用4个Web Server支撑5400万个用户网站 直接拿来用!十大Material Design开源项目 初探WatchKit,开发者必须知道的6件事! 【MDCC专访】环信CEO刘俊彦:音视频即时通讯将成为技术壁垒 第十七届全国工程建设计算机应用大会在京召开,AMD受邀详解GPU Computing! 哪一门开发语言薪水最高? 借助ArangoDB,带你玩转Google图算法引擎Pregel 【最具价值CTO评选秀】MediaV CTO胡宁:技术女神的自我奋斗 豌豆荚邓草原:如何实现实时响应式平台 必须谨记!Node.js安全开发技巧 聚焦新平台新应用 IBM 2014技术峰会上海站顺利落幕 《近匠》NAGA娜迦信息:移动安全加固定制化 棱镜、飞流、TalkingData三方解读:手游如何高效运营 【MDCC秀场】枕戈待旦——秉持移动开发大潮下的主角思想 Netflix的首席产品官Neil Hun谈推荐系统打造和AWS实践 微信开放WiFi接口,醉翁之意在乎O2O还是大数据? 软硬整合:基于云的微型智能防丢设备Linquet 【MDCC专访】AppCan CTO赵庆华:助力企业快速移动化 使用Bluemix中的Rules服务构建一个酒店预订应用程序 基于IBM Bluemix开发微信公共账号应用 sql语句求救 VC里的error look怎么用呀??? 新手:为什么可以用notes预览却不可以用ie预览? 关于水晶报表的价格问题!!! 其实我真的很郁闷,从此我再也不灌水了,大家不要想我…… 关于arp的小问题 请给我一个在线升级的例子。。。。 更新记录遇到的简单问题!!请高手指点--在线等待 关于字符串问题(局部变量)急!!!!!!!!!今夜无眠 VB程序打包好以后为什么不能安装 兄弟们给我起名啦,,up也有分!! 学单片机,推荐点好书,谢谢各位大虾了 用JSP条件来触发Javascript弹出一个小窗口怎么做? 难道要给32个参数? PB 连接 SQL SERVER 2000 问题(多用户无响应!!) 关于Pointer类型数据和自定义的数据类型(Record),TList的保存问题。 请问哪里有《WRITING WINDOWS VXD AND DEVICE DRIVER》下载,中英文皆可,作者KAREN HAZZAH 还是#pragma的问题请教高手 用鼠标选定图形应该怎么做? !!!超长数字,大家猜猜,欢迎灌水!!!! 关于localhost不能直接连接的问题 请问一个很简单的问题,做了一个查询功能,如果没有查到记录,怎样做才能提示:没有满足条件的记录!的这样的信息呢?很菜的问题! 如何在浏览器客户端上载一个文件,传送到SERVER数据库? 关于求余和with语句 各位各位,小弟有新发现哦,爽。 我想学GIS (dos高手的挑战!!!)如何在dos下对声卡编程选通CD-IN通道,实现CD播放 jdbc连接oracle8i的问题?急。 如何用<logic:iterate>与<html:radio>配合将<logic:iterate>的列出多项列表项,从中选定一项,并对该项进行操作?如何联系?谢谢!急用! 哪有jbuilder中文版文档 请问怎样将整个屏幕拷贝到一个Image对象? 如何在vbscript中获取javascript取得的下拉菜单所选择的值?(急,在线等) 在聊天室中服务器的socket怎么和多个客户端的socket建立连接? 如何在Post以后保存Post之前的值 史上最恐怖的10个鬼故事!!! j2ee中的EAR 和war是怎么生成的,具体用什么工具,怎么生成的 紧急降落求救(在线等待)…………谁能告诉这个水晶报表的问题04, 图形如何和数据库关联? 积分运算? 急!!! 怎样在RowFilter中用函数表达式, 如SubString, ToString等? VB中的WINSOCK在哪里?我打开VB找了半天没找到这个控件,真衰 请教.... 能否在autoexec.bat的内容里: path ......... 加上 ;c:\windows \.....之类的? tomcat 4 中配置JDBCRealm的问题。急啊!! mysql怎么用money类型的数据? 会用FileGateway的进来 服务器配置(jdk1.3+tomcat或jswdk) 关于dreamweaver mx的font preference设置 redhat9.0的安装问题 如何获取文件上传者的IP地址?(马上给分)万分感激,在线等待. 各位大侠帮帮忙!急!!!有高分! 双曲线9x^2-16y^2=144左支上一点P到右焦点距离为9,则P的坐标是? 为什么柴油车起动时电流还大过汽油车起动?汽油车起动只是200-600A,但柴油车起动要500-1000A甚至还要...为什么柴油车起动时电流还大过汽油车起动?汽油车起动只是200-600A,但柴油车起动要50 小学男生喜欢女生的表现五年级替别人问的,大家要打就认真打哦,那个男生很重面子,做事都很有尊严不厚脸皮,他跟那个女生关系还算不错,他经常捉弄她,耍她,他也跟别的女生闹,但不如和他 双曲线9x²-4y²=1的焦距为 26题第二小题 9a²-b²-4b-4分解因式 双曲线9x-4y=1的焦距是?求过程! 26题第二小题2,3空! 五年级小学相声要两位男生演的 用英语写一份感谢卡 对小学英语老师的 用英语写一份感谢卡 对小学英语老师的 毛泽东的思想概论是什么 第七题求 已知:(x2+y2-3)(2x2+2y2-4)=24,求x2+y2的值 文明其精神 野蛮其体魄 不是毛泽东说的吧?据说是铁托说的.敬请考究. 初三二次函数所有式子 包括顶点坐标 对称轴 开口方向 复制的别来 我早看完了 巧加标点.1.你同意他不同意 2.你同意他不同意 3.你同意他不同意 毛泽东说的"文明其精神,野蛮其体魄"的意思 钓鱼的启示中,作者描写周围环境的目的是什么?还有一个问题,也是钓鱼的启示里面的:“孩子,你得把它放回湖里去”这句话该用怎样的语气来读?为什么?快,必须要在今天之内,好的有分加 英语翻译 田宫橙盖与白盖胶水的区别 钓鱼的启示中作者描写环境的目的是什么 高中英语单选 helpThe mountain is so steep that we have to climb to the top on foot instead of_______.A.busB.by bus C.climbing by busD.to climb by bus答案是选B,为何不选C?instead of 后面不要-ing 真数和底数都不同的对数函数怎么比大小第3题 爸爸去哪儿2、第四站的观后感重赏 你同意他不同意加标点 1征求意见 2表示对比 3表示问答 新教师年度思想工作总结200个字左右,发到我的邮箱去.别发这.先谢过了 分解因式3(a^4+a^2*b^2+b^4)-9a^2*b^2 写一篇英语感谢信 ,在父亲节感谢父亲的,内容任意,但是格式要正式.本人男,20岁.一定要正式格式.字数在120左右.再次说下,一定要正式格式的.偶有不清楚正式格式是啥样的..其次语法简单些啊. 求2010年思想总结 怎样写 增长倍数怎么计算从2007年的265亿美元猛增至2013年的902亿美元,增长3.5倍问,这3.5是怎么计算出来的?请细说计算过程. 多谢英语高手帮我写一篇英语作文Write a composition of about 200 words on the title of The Battle against Climate Crisis.You are required to write three paragraphs with the suggested guideliness below.1.The present situation of climate c 打架思想总结怎么写啊. 分解因式2/9a^2-4/3a+2 帮忙写一篇自我介绍,英语的.谢谢谢谢谢谢谢谢了. 高中对数函数比大小 已知x2+y2=1,则y/(x+2)的取值范围是多少? 英语翻译请专家给提供一篇有关库存管理的英文文献,附带中文翻译.最好达到中文字数5000以上,另有追加分50. 利用对数函数比较大小log以a为底b与log以b为底a(a大于b大于1) 因式分解9a^6+4不要用到虚数和根式 第12题第2小题 英语翻译想写一个译作赏析的论文,政治方面的,可是不知道哪里有中英完全一致的翻译材料?最好比较权威的!不是自己翻译用的!是权威翻译好了 敬畏生命中哪些词语写出了作者被生命 逐渐震撼 要作者的感情变化(不好意思,没说明) 装在口袋里的爸爸读后感怎么写 哪个有3D里的翻译?我要学3D了,不知道哪里可以下到3D里面所有的英语翻译? 文中用那些描写时间的句子写出了作者被生命逐渐震撼的过程?那是一个夏天长的不能再长的下午,在印第安那州的一个湖边.我起先是不经意地坐着看书,忽然发现湖边 有几棵树正在飘散一些 第十二题的第二小题谢谢 合适的成语,实力相当,难分胜负.( )还有还有…… 震颤的具体意思谁能说说呀! 敬畏生命 文中哪些词写出了作者被生命“逐渐震撼的过程 为.英文怎么写 您见过这样的毛病吗?柴油车!电路上的神奇问题!本人一辆485柴油货车12V电压的,新车开了半年,去二级维护的时候,外检时候大灯都亮,一到上线的时候右大灯突然就不亮了,钨丝没断,钨丝也红,就 关于高中数学logaN的公式 尽量仔细点 非常感谢英文怎么写 怎样列算式?得数是多少?贝贝和丽丽练习毛笔字,从开始练习到现在,贝贝已经写了120个.比丽丽多写了96个.从今天开始,他两改变计划,贝贝每天坚持写13个,丽丽每天坚持写25个.多少天后,丽丽写 1+1=2求公式 非常感谢的英文怎么写 为什么柴油车起动时的电流比汽油车起动时的电流要大呢?为什么? 田宫黄盖胶水和绿盖胶水有什么不同?如题,在效果上,价钱上的异同? 写出双曲线9x^2-16y^2-36x-32y-124=0的一个焦点坐标 为什么汽油车起动时的电流要比柴油车起动时的电流要大?为什么? 小于1的价格在用asp输出的时候,程序自动省略了小数点前面的“0”,怎么显示小数点前的“0”?在修改商城程序的时候,价格通常是XXX.00元 这样的形式显示的,而小于1的价格必然0.98在用asp输出 肯尼亚少女遭多人强奸 嫌犯仅被罚剪草摩根大通:今明两年中国跨境并购将非常美国务卿回应监听活动:某些方面“太过王毅强调:一定要打造好海外民生工程美使馆神秘“白盒”遍布全球 德媒称其澳大利亚警方追捕偷车贼 造成路过少年日本政府拟制定相关措施援助海外核爆受巴西副总统特梅尔将于11月4日至10马来西亚移民局前总监被判处贪污罪名成以色列军方与武装分子在加沙地带交火 卜拉希米:日内瓦会议不能缺少叙反对派韩政府再次敦促日方删除主张争议岛屿主德国成欧洲首个允许出生登记性别栏空白奥巴马出席投资美国峰会 承诺加强吸引叙利亚已完成销毁化学武器第一阶段任务全球首辆太阳能家用车亮相 未来或大量日媒:缓解眼睛疲劳的食物有哪些?澳男子将宠物店名犬藏入裤裆内带走接受以色列批准在定居点新建1500套住房奥巴马幕僚曾考虑用克林顿替换拜登法著名导演吕克·贝松出席《LUCY》一人卖保险 全家不要脸;一人在银行 美国研发似星际迷航设备 快速愈合伤口挑战者号25年来的惊天谜团终被解!美计划2018年从火星带尘埃回地球大清朝灭亡后,王爷后代纷纷挖祖坟盗取文化交易“上海模式”:互联网+文化+火牛财富成功通过互联网金融行业认证21世纪传媒公司案件宣判 沈颢等多数科比微笑面对惨败送名言:训练猫学狗叫天文新发现:巨行星螺旋撞向恒星自杀卖饮料的也来做手机啦 — 百事手机P火牛财富 获SLL安全加密技术支持中国明确资本市场五大任务 助力供给侧24日数据:勇士马刺齐头并进 诺天王为省钱挖补火车票乘车 行迹败露换来五伏尔加庄园打造城堡滑雪场 让您穿行在秦皇岛一网民为增粉丝冒充警察拍恶搞视圣诞节到了“单身汪”教你“排”出全家主力探底回升暗藏三阴谋 ,明日走势分维克黑沙滩:怪异的温柔LOHO 碳纤维镜架 & 镜片线
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘