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

React 前端之家
前端之家收集整理的这篇文章主要介绍了React首部经典图书推荐：全程经典实例，360度剖析React.js，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

动画

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

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

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

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

CSS 渐变组

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

[js] view plain copy
  1. <ReactCSSTransitionGrouptransitionName='question'>
  2. {questions}
  3. </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{
  1. transform:scale(1.2);
  2. transition:transform0.2scubic-bezier(.97,.84,.5,1.21);
  3. }
  4. .survey-editor.question-enter-active{
  5. transform:scale(1);
  6. }
  7. .survey-editor.question-leave{
  8. transform:translateY(0);
  9. opacity:0;
  10. transition:opacity1.2s,transform1scubic-bezier(.
  11. 52,-0.25,.52,.95);
  12. .survey-editor.question-leave-active{
  13. opacity:0;
  14. transform:translateY(-100%);
  15. }

注意这些.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} 属性来禁用其中一个或全部禁用。除了可以控制选择哪些动画效果外，我们还能根据一个可配置的值在特定的情况下禁用动画，像这样：

    'question'
  1. transitionEnter={this.props.enableAnimations}
  2. transitionLeave={this.props.enableAnimations}>
  3. 使用渐变组的隐患

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

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

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

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

    间隔渲染

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

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

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

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

    使用requestAnimationFrame 实现间隔渲染

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

    下面是具体实现的例子。

    varPositioner=React.createClass({
  1. getInitialState:function(){return{position:0};},
  2. resolveAnimationFrame:function(){
  3. vartimestamp=newDate();
  4. vartimeRemaining=Math.max(0,this.props.animationCompleteTimestamp
  5. -timestamp);
  7. if(timeRemaining>0){
  8. this.setState({position:timeRemaining});
  9. },
  11. componentWillUpdate:if(this.props.animationCompleteTimestamp){
  12. requestAnimationFrame(this.resolveAnimationFrame);
  13. render:vardivStyle={left:this.state.position};
  14. return<divstyle={divStyle}>Thiswillanimate!</div>
  15. });

在这个例子中，组件的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。

    resolveSetTimeout:setTimeout(this.resolveSetTimeout,153); font-weight:700; background-color:inherit">this.props.timeoutMs);
  1. 由于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，进行前端技术交流。

    猜你在找的React相关文章

    react使用moment进行日期格式化
    导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
    推荐使用并手写实现redux-actions原理
    @ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
    【译】值得推荐的十大React Hook 库
    十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
    React生命周期
    React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
    React虚拟DOM的理解
    React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
    使用react-native-vector-icons（RN0.6+）
    1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
    React中的Props, State 与 render 函数
    React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
    React开发环境准备
    react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
    React组件拆分与传值
    组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
    React组件的简单演示
    src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作