初识ReactJS的组件化开发(六):ajax更新评论列表时的定时器bug修改

前面我们定时器加载评论数据，当评论组件被移除的时候，定时器依然在运行。

我们需要在移除组件的时候，把定时器清除了

// 电影评论组件
var ReviewList = React.createClass({
    getInitialState: function () {
        return {
            review:[], //保存电影json对象数组
            timer:null
        };
    },

    componentDidMount: function () {
        this.state.timer = setInterval(function () {
            $.get(this.props.src,null,function (ret) {
                this.setState({review:ret});
            }.bind(this))
        }.bind(this),3000);
    },

    componentWillUnmount: function () {
        if(this.state.timer != null){
            clearInterval(this.state.timer);
        }
    },

    render: function(){
        if(this.state.review.length == 0){
            //代表还没有完成 数据交互,显示一个蒙版
            return <PageMask />
        }else{
            var lis = this.state.review.map(function (r) {
                return <li><span className="author">{r.user}</span><span>{r.content}</span></li>
            })
            return <ul id="reviewList">{lis}</ul>
        }

    }
});

最后全部js代码：

// 创建组件
var NavBar = React.createClass({
    removeNode: function () {
        ReactDOM.unmountComponentAtNode(document.getElementById("container"))
    },

    loadMovie: function () {
        ReactDOM.render(
            <MovieList src="http://localhost/myphp/movies.php" />,
            document.getElementById("container")
        )
    },

    loadReview: function () {
        ReactDOM.render(
        <ReviewList src="http://localhost/myphp/reviews.php" />,
            document.getElementById("container")
        )
    },

    render: function(){
        return <ul>
                <li><a href="#" onClick={this.loadMovie}>最新电影</a></li>
                <li><a href="#" onClick={this.loadReview}>最新评论</a></li>
                <li><a href="#" onClick={this.removeNode}>移除组件</a></li>
                <li><SearchText  cssClass={this.props.searchTextCss} placeholder={this.props.searchTextPlaceHolder} /></li>
            </ul>
    }
});

// 搜索框组件
var SearchText = React.createClass({
    render: function(){
        return <input type="text" placeholder={this.props.placeholder} className={this.props.cssClass}/>
    }
});

// 电影列表组件
var MovieList = React.createClass({
    getInitialState: function () {
        return {
            movie:[] //保存电影json对象数组
        };
    },

    componentDidMount: function () {
        $.get(this.props.src,null,function (ret) {
            this.setState({movie:ret});
        }.bind(this))
    },

    render: function(){
        if(this.state.movie.length == 0){
            //代表还没有完成 数据交互,显示一个蒙版
            return <PageMask />
        }else{
            var lis = this.state.movie.map(function (m) {
                return <li><p className="title">{m.movieName}</p><p className="intro">{m.movieIntro}</p></li>
            })
            return <ul id="movielist">{lis}</ul>
        }

    }
});

// 电影评论组件
var ReviewList = React.createClass({
    getInitialState: function () {
        return {
            review:[], //保存电影json对象数组
            timer:null
        };
    },

    componentDidMount: function () {
        this.state.timer = setInterval(function () {
            $.get(this.props.src,null,function (ret) {
                this.setState({review:ret});
            }.bind(this))
        }.bind(this),3000);
    },

    componentWillUnmount: function () {
        if(this.state.timer != null){
            clearInterval(this.state.timer);
        }
    },

    render: function(){
        if(this.state.review.length == 0){
            //代表还没有完成 数据交互,显示一个蒙版
            return <PageMask />
        }else{
            var lis = this.state.review.map(function (r) {
                return <li><span className="author">{r.user}</span><span>{r.content}</span></li>
            })
            return <ul id="reviewList">{lis}</ul>
        }

    }
});


// 遮罩组件
var PageMask = React.createClass({
    render: function () {
        return <div className="mask"><p>正在加载...</p></div>
    }
});



ReactDOM.render(
    // 使用组件
    <NavBar searchTextCss="search_text2" searchTextPlaceHolder="请输入关键字" />,
    document.getElementById("navbar")
);