首页 > 其他 > 详细

[React Fundamentals] Component Lifecycle - Updating

时间:2016-08-16 07:00:25      阅读:156      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!