码迷,mamicode.com
首页 > 其他好文 > 详细

[React Fundamentals] Component Lifecycle - Updating

时间:2016-08-16 07:02:23      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that.

 

import React from react;
import ReactDOM from react-dom;

export default class App extends React.Component {
    constructor(){
        super();
        this.state = {
            increasing: false
        }
    }
    update(){
        ReactDOM.render(<App val={this.props.val+1} /> , document.getElementById(app));
    }
    componentWillReceiveProps(nextProps){
        //Invoked when a component is receiving new props. This method is not called for the initial render.
        this.setState({
            increasing: nextProps.val > this.props.val
        })
    }
    shouldComponentUpdate(nextProps, nextState){
        // Control whether the component should re-render
        return nextProps.val % 5 === 0; // update dom every 5 clicks
    }
    render() {
        console.log(this.state.increasing);
        return (
            <div>
                <button onClick={this.update.bind(this)}>{this.props.val}</button>
            </div>
        )
    }
    componentDidUpdate(prevProps, prevState){
        //After DOM update
        console.log("prevProps", prevProps);
    }
}

App.defaultProps = {
    val: 0
}

 

 

[React Fundamentals] Component Lifecycle - Updating

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5774920.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!