《ReactJS》读书笔记十四_html/css_WEB-ITnose-HTML Tutorial-php.cn

使用渐变组的隐患

使用渐变组也有两个隐患需要非常注意的。

首先，渐变组会延迟子组件的移除直到动画完成。也就是说如果你把一个列表的组件包裹进一个 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 This will animate!
 }});

Copy after login

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

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

注意，这套逻辑只在基于时间戳的清况下成立。对 animationCompleteTimestamp所做的改变会触发逻辑，而 this.state.position的值完全依赖于当前时间与 animationCompleteTime-stamp的差。正因如此， 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 This will animate!
 }});

Copy after login

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