首页>demo11

Demo11 - mixin定时器 by zuojj at 02 Jul 2016

本实例通过使用mixin优化定时器，提取公共部分，实现多个组件共用

HTML

<div id="countdown-01"></div>
<div id="countdown-02"></div>

JAVASCRIPT

/**
 * 实现简单倒计时
 */
var Countdown = React.createClass({
    getInitialState: function() {
        return {
            leftTime: 10
        }
    },
    reflow: function() {
        if(this.state.leftTime > 0) {
            this.setState({
                leftTime: this.state.leftTime - 1
            });
        }else {
            clearInterval(this._interval);
        }
    },
    componentDidMount: function() {
        this._interval = setInterval(this.reflow, 1000);
    },
    render: function() {
        return (
            <p>{this.state.leftTime}秒</p>
        );
    }
});

ReactDOM.render(<Countdown/>, document.getElementById('countdown-01'));

/**
 + 使用mixin优化，提取公共部分，多个组件共用
 */

var IntervalMixin = function() {
    return {
        componentDidMount: function() {
            this._interval = setInterval(this.onReflow, 1000);
        },
        componentWillUnmount: function() {
            clearInterval(this._interval);
        }
    }
};

var CountdownTwo = React.createClass({
    mixins: [IntervalMixin()],
    getInitialState: function() {
        return {
            leftTime: 10
        }
    },
    onReflow: function() {
        if(this.state.leftTime > 0) {
            this.setState({
                leftTime: this.state.leftTime - 1
            });
        }else {
            clearInterval(this._interval);
        }
    },
    render: function() {
        return (
            <p>{this.state.leftTime}秒</p>
        );
    }
});

ReactDOM.render(<CountdownTwo/>, document.getElementById('countdown-02'));